html + css + js使用HBuilder开发工具做2048益智游戏

2024-07-02 12:49| 来源: 网络整理| 查看: 265

2048–>html + css + js使用HBuilder开发工具做2048益智游戏

今天使用html + css + js给同学们做了一个简易版的2048益智游戏，希望大家按照步骤勤加练习，在编码的坑里早日踏上康庄大道，祝前程似锦！

效果图：在这里插入图片描述附源码github链接: https://github.com/LittleGreyKing-FriedBlackYoFeed-xoox/2048.git

开发思路：

一、使用HBuilder工具创建空白html项目在这里插入图片描述创建项目时路径尽量不要有中文路径

二、创建js和css文件备用在这里插入图片描述项目目录：

三、书写html标签引入css和js文件：在这里插入图片描述书写html标签： html标签的代码，直接放在body标签中即可:

index.html

2048 New Game Score: 0小灰灰版 Game Over! Score: 0 Try Again!

四、绘制css样式表在这里插入图片描述 2048.css

* { padding: 0; margin: 0; } div, p, h1, h2, a, span { font-family: Arial; font-weight: bold; } header { padding-top: 16px; } h1 { font-size: 40px; font-weight: bold; text-align: center; } #gamePanel { margin: 0 auto; width: 500px; position: relative; } #gridPanel { width: 480px; height: 480px; background: #BBADA0; border-radius: 10px; padding: 20px 0 0 20px; position: relative; } #gamePanel p { padding: 8px; } /* 按钮样式 */ .button { display: inline-block; padding: 10px; background: #9F8B77; border-radius: 6px; color: #FFF; cursor: pointer; } .grid, .cell { width: 100px; height: 100px; border-radius: 6px; } /* 背景网格 */ #gamePanel .grid { background-color: #ccc0b3; float: left; margin: 0 20px 20px 0; } /* 格式化前景单元格中位置 */ .cell { position: absolute; line-height: 100px; vertical-align: middle; text-align: center; font-size: 60px; color: #776E65; } /* 前景格中的行位置 */ #cell00, #cell01, #cell02, #cell03 { top: 20; } #cell10, #cell11, #cell12, #cell13 { top: 140px; } #cell20, #cell21, #cell22, #cell23 { top: 260px; } #cell30, #cell31, #cell32, #cell33 { top: 380px; } /* 前景格中的列位置 */ #cell00, #cell10, #cell20, #cell30 { left: 20px; } #cell01, #cell11, #cell21, #cell31 { left: 140px; } #cell02, #cell12, #cell22, #cell32 { left: 260px; } #cell03, #cell13, #cell23, #cell33 { left: 380px; } /* 数字显示效果 */ .num8, .num16, .num32, .num64, .num128, .num256, .num512, .num1024, .num2048, .num4096, .num8192 { color: #fff; } .num1024, .num2048, .num4096, .num8192 { font-size: 40px; } .num2 { background: #eee4da; } .num4 { background: #ede0c8; } .num8 { background: #f2b179; } .num16 { background: #f59563; } .num32 { background: #f67c5f; } .num64 { background: #f65e3b; } .num128 { background: #edcf72; } .num256 { background: #edcc61; } .num512 { background: #9c0; } .num1024 { background: #33b5e5; } .num2048 { background: #09c; } .num4096 { background: #a6c; } .num8192 { background: #93c; } /* 格式化Game Over的样式 */ #gameOver { display: none; position: absolute; width: 100%; height: 100%; top: 0; left: 0; } #gameOver div { width: 100%; height: 100%; background: #555; filter: alpha(Opacity=50); -moz-opacity: 0.5; opacity: 0.5; } #gameOver p { position: absolute; top: 150px; left: 100px; border-radius: 10px; width: 300px; border: 1px solid #EDCF72; background: #fff; line-height: 1.6em; font-size: 30px; color: #000; text-align: center; } .writer { width: 80px; margin-left: 30%; }

五、创造JS事件函数

在这里插入图片描述 animation.js

//动画效果工具对象 var animation = { tasks:[], //动画任务数据 timer:null,//动画定时器 times:10, //定时器次数 interval:1000/60,//定时器间隔 add:function(obj, top, left){ //动画已经开始了，不能添加任务了！ if(this.timer){ return false; } if(! obj){ return false; } //计算移动步伐 var t = (top - obj.offsetTop)/this.times; var l = (left - obj.offsetLeft)/this.times; //添加动画任务，其中obj是被移动到对象，top， left是移动以后的位置 var task = { topStep:t, leftStep:l, element:obj, step:function(){ var t = this.element.offsetTop; this.element.style.top = (t+ this.topStep )+"px"; var l = this.element.offsetLeft; this.element.style.left = (l+ this.leftStep )+"px"; }, clear:function(){ this.element.style.top = ""; this.element.style.left = ""; } }; this.tasks[this.tasks.length]=task; return true; }, start:function(callback){ //如果定时器已经启动，就不能再启动定时器了 if(this.timer){ return false; } console.log("STATRING"); if(this.tasks.length==0){ if(callback){ callback(); } return false; } //如果有callback就交给this.callback if(callback){ this.callback = callback; } this.timer = setInterval(function(){ //console.log("timeOut"); //console.log(animation.times); for(var i=0; i animation.stop(); } }, this.interval); return true; }, stop: function(){ if(this.timer){ window.clearInterval(this.timer); this.timer=null; this.times=10; } //结束以后执行callback() if(this.callback){ this.callback(); } for(var i=0; i if (state == CELL_MOVEING) { return false; } if (!canMoveUp()) { return false; } //每次处理一个列 for (var col = 0; col //一个列中，按照方方向检查是否需要合并处理。 for (var row = 0; row return; } var next = cells[nextRow][col]; if (current == 0) { //下一个格子移动到当前位置。 cells[row][col] = next; cells[nextRow][col] = 0; if (effect) { //如果动效开关打开，就处理动画 // $("cell"+nextRow+col) 找到下一个对象对应的格子 var obj = $("cell" + nextRow + col); var top = row * 120 + 20; var left = col * 120 + 20; animation.add(obj, top, left); } } else if (current == next) { //两个格子一样，就合并格子 cells[row][col] = next + current; cells[nextRow][col] = 0; score += cells[row][col]; row++; if (effect) { //如果动效开关打开，就处理动画 // $("cell"+nextRow+col) 找到下一个对象对应的格子 var obj = $("cell" + nextRow + col); var top = row * 120 + 20; var left = col * 120 + 20; animation.add(obj, top, left); } } else { //下个不一样，就忽略之 row++; } } } function getNextInCol(col, startRow, step) { var row = startRow; while (true) { if (row = 4) { return -1; } if (cells[row][col] != 0) { return row; } row += step; } } function getNextInRow(row, startCol, step) { var col = startCol; while (true) { if (col = 4) { return -1; } if (cells[row][col] != 0) { return col; } col += step; } } function downAction() { if (state == CELL_MOVEING) { return false; } if (!canMoveDown()) { return false; } //每次处理一个列 for (var col = 0; col //一个列中，按照方方向检查是否需要合并处理。 for (var row = 3; row >= 0;) { var current = cells[row][col]; var nextRow = getNextInCol(col, row - 1, -1); //没有下一个，就直接结束了 if (nextRow == -1) { return; } var next = cells[nextRow][col]; if (current == 0) { //下一个格子移动到当前位置。 cells[row][col] = next; cells[nextRow][col] = 0; if (effect) { //如果动效开关打开，就处理动画 // $("cell"+nextRow+col) 找到下一个对象对应的格子 var obj = $("cell" + nextRow + col); var top = row * 120 + 20; var left = col * 120 + 20; animation.add(obj, top, left); } } else if (current == next) { //两个格子一样，就合并格子 cells[row][col] = next + current; cells[nextRow][col] = 0; score += cells[row][col]; row--; if (effect) { //如果动效开关打开，就处理动画 // $("cell"+nextRow+col) 找到下一个对象对应的格子 var obj = $("cell" + nextRow + col); var top = row * 120 + 20; var left = col * 120 + 20; animation.add(obj, top, left); } } else { //下个不一样，就忽略之 row--; } } } function leftAction() { if (state == CELL_MOVEING) { return false; } if (!canMoveLeft()) { return false; } //每次处理一个行 for (var row = 0; row //一个列中，按照方方向检查是否需要合并处理。 for (var col = 0; col return; } var next = cells[row][nextCol]; //console.log("next:"+next); //console.log("current:"+current); if (current == 0) { //下一个格子移动到当前位置。 cells[row][col] = next; cells[row][nextCol] = 0; if (effect) { //如果动效开关打开，就处理动画 // $("cell"+nextRow+col) 找到下一个对象对应的格子 var obj = $("cell" + row + nextCol); var top = row * 120 + 20; var left = col * 120 + 20; animation.add(obj, top, left); } } else if (current == next) { //两个格子一样，就合并格子 cells[row][col] = next + current; cells[row][nextCol] = 0; score += cells[row][col]; col++; if (effect) { //如果动效开关打开，就处理动画 // $("cell"+nextRow+col) 找到下一个对象对应的格子 var obj = $("cell" + row + nextCol); var top = row * 120 + 20; var left = col * 120 + 20; animation.add(obj, top, left); } } else { //下个不一样，就忽略之 col++; } } } function rightAction() { if (state == CELL_MOVEING) { return false; } if (!canMoveRight()) { return false; } //每次处理一个行 for (var row = 0; row //一个列中，按照方方向检查是否需要合并处理。 for (var col = 3; col >= 0;) { var current = cells[row][col]; var nextCol = getNextInRow(row, col - 1, -1); //没有下一个，就直接结束了 if (nextCol == -1) { return; } var next = cells[row][nextCol]; //console.log("next:"+next); //console.log("current:"+current); if (current == 0) { //下一个格子移动到当前位置。 cells[row][col] = next; cells[row][nextCol] = 0; if (effect) { //如果动效开关打开，就处理动画 // $("cell"+nextRow+col) 找到下一个对象对应的格子 var obj = $("cell" + row + nextCol); var top = row * 120 + 20; var left = col * 120 + 20; animation.add(obj, top, left); } } else if (current == next) { //两个格子一样，就合并格子 cells[row][col] = next + current; cells[row][nextCol] = 0; score += cells[row][col]; col--; if (effect) { //如果动效开关打开，就处理动画 // $("cell"+nextRow+col) 找到下一个对象对应的格子 var obj = $("cell" + row + nextCol); var top = row * 120 + 20; var left = col * 120 + 20; animation.add(obj, top, left); } } else { //下个不一样，就忽略之 col--; } } } function canMoveUp() { for (var col = 0; col //格子上方是空位置, 可以移动 if (cells[row][col] != 0 && cells[row - 1][col] == 0) { return true; } //格子上方相邻的相等，可以移动 if (cells[row][col] != 0 && (cells[row][col] == cells[row - 1][col])) { return true; } } } return false; } function canMoveDown() { for (var col = 0; col //格子上方是空位置, 可以移动 if (cells[row][col] != 0 && cells[row + 1][col] == 0) { return true; } //格子上方相邻的相等，可以移动 if (cells[row][col] != 0 && (cells[row][col] == cells[row + 1][col])) { return true; } } } return false; } function canMoveLeft() { for (var col = 1; col //格子上方是空位置, 可以移动 if (cells[row][col] != 0 && cells[row][col - 1] == 0) { return true; } //格子上方相邻的相等，可以移动 if (cells[row][col] != 0 && (cells[row][col] == cells[row][col - 1])) { return true; } } } return false; } function canMoveRight() { for (var col = 0; col //格子上方是空位置, 可以移动 if (cells[row][col] != 0 && cells[row][col + 1] == 0) { return true; } //格子上方相邻的相等，可以移动 if (cells[row][col] != 0 && (cells[row][col] == cells[row][col + 1])) { return true; } } } return false; } function test() { rightAction(); state = CELL_MOVEING; animation.start(function() { //console.log("update"); randomNumber(); updateView(); state = PLAYING; }); } //更新显示，将表格中的数据，更新到界面显示 function updateView() { for (var row = 0; row var n = cells[row][col]; var cell = $("cell" + row + col); //清楚显示的数据和显示样式 cell.className = "cell"; cell.innerHTML = ""; if (n > 0) { //更新显示样式 cell.className = "cell num" + n; //更新显示的数字 cell.innerHTML = n; } } } $("score").innerHTML = score; $("finalScore").innerHTML = score; } //检查当前的表格中是否是满的，如果满了返回true，否则返回false function full() { for (var row = 0; row if (cells[row][col] == 0) { return false; } } } return true; } //向表格随机插入一个数字，如果插入成功返回true，插入失败返回false function randomNumber() { if (full()) { return false; } while (true) { var col = parseInt(Math.random() * 4); var row = parseInt(Math.random() * 4); if (cells[row][col] == 0) { var n = Math.random() for (var col = 0; col return document.getElementById(id); } function has8192() { for (var row = 0; row if (cells[row][col] == 8192) { return true; } } } } function hasSpace() { for (var row = 0; row if (cells[row][col] == 0) { return true; } } } } /* 显示游戏结束界面 */ function gameOver() { //发现8192游戏结束 if (has8192()) { state = GAME_OVER; $("gameOver").style.display = "block"; return true; } //发现空位置，游戏不结束 if (hasSpace()) { return false; } //能够移动游戏不结束 if (canMoveUp() || canMoveDown() || canMoveLeft() || canMoveRight()) { return false; } state = GAME_OVER; $("gameOver").style.display = "block"; return true; } //软件启动初始代码 window.onload = function() { $("newGame").onclick = function() { if (state == PLAYING) startAction(); } $("restart").onclick = function() { if (state == GAME_OVER) startAction(); } startAction(); //监听键盘事件 document.onkeydown = function(event) { if (state != PLAYING) { return; } var move = false; switch (event.keyCode) { case 37: //left move = leftAction(); break; case 38: //up move = upAction(); break; case 39: //right move = rightAction(); break; case 40: //down move = downAction(); break; } if (!move) { return; } if (effect) { state = CELL_MOVEING; animation.start(function() { //console.log("update"); updateView(); state = PLAYING; if (!gameOver()) { setTimeout(function() { randomNumber(); updateView(); }, 100); } }); } else { if (!gameOver()) { setTimeout(function() { randomNumber(); updateView(); }, 100); } updateView(); state = PLAYING; } gameOver(); }; // 5211 0842 8479 快捷快递 }

六、测试和运行

配置和运行时记得要打开index.html再执行。在这里插入图片描述完毕。

七、懒人版全部源码

很多同学喜欢html 和 css 和 js都放在同一个文件中，我给大家也做了一个懒人版的2048，以下提供源码：

2048.html

2048-懒人版 * { padding: 0; margin: 0; } div, p, h1, h2, a, span { font-family: Arial; font-weight: bold; } header { padding-top: 16px; } h1 { font-size: 40px; font-weight: bold; text-align: center; } #gamePanel { margin: 0 auto; width: 500px; position: relative; } #gridPanel { width: 480px; height: 480px; background: #BBADA0; border-radius: 10px; padding: 20px 0 0 20px; position: relative; } #gamePanel p { padding: 8px; } /* 按钮样式 */ .button { display: inline-block; padding: 10px; background: #9F8B77; border-radius: 6px; color: #FFF; cursor: pointer; } .grid, .cell { width: 100px; height: 100px; border-radius: 6px; } /* 背景网格 */ #gamePanel .grid { background-color: #ccc0b3; float: left; margin: 0 20px 20px 0; } /* 格式化前景单元格中位置 */ .cell { position: absolute; line-height: 100px; vertical-align: middle; text-align: center; font-size: 60px; color: #776E65; } /* 前景格中的行位置 */ #cell00, #cell01, #cell02, #cell03 { top: 20; } #cell10, #cell11, #cell12, #cell13 { top: 140px; } #cell20, #cell21, #cell22, #cell23 { top: 260px; } #cell30, #cell31, #cell32, #cell33 { top: 380px; } /* 前景格中的列位置 */ #cell00, #cell10, #cell20, #cell30 { left: 20px; } #cell01, #cell11, #cell21, #cell31 { left: 140px; } #cell02, #cell12, #cell22, #cell32 { left: 260px; } #cell03, #cell13, #cell23, #cell33 { left: 380px; } /* 数字显示效果 */ .num8, .num16, .num32, .num64, .num128, .num256, .num512, .num1024, .num2048, .num4096, .num8192 { color: #fff; } .num1024, .num2048, .num4096, .num8192 { font-size: 40px; } .num2 { background: #eee4da; } .num4 { background: #ede0c8; } .num8 { background: #f2b179; } .num16 { background: #f59563; } .num32 { background: #f67c5f; } .num64 { background: #f65e3b; } .num128 { background: #edcf72; } .num256 { background: #edcc61; } .num512 { background: #9c0; } .num1024 { background: #33b5e5; } .num2048 { background: #09c; } .num4096 { background: #a6c; } .num8192 { background: #93c; } /* 格式化Game Over的样式 */ #gameOver { display: none; position: absolute; width: 100%; height: 100%; top: 0; left: 0; } #gameOver div { width: 100%; height: 100%; background: #555; filter: alpha(Opacity=50); -moz-opacity: 0.5; opacity: 0.5; } #gameOver p { position: absolute; top: 150px; left: 100px; border-radius: 10px; width: 300px; border: 1px solid #EDCF72; background: #fff; line-height: 1.6em; font-size: 30px; color: #000; text-align: center; } .writer { width: 80px; margin-left: 30%; } //game 封装了2048的数据和核心算法 var cells = [ [2, 0, 0, 0], [0, 32, 0, 0], [0, 4, 0, 0], [0, 0, 2048, 0] ]; //游戏进行中 var PLAYING = 0; //方块正在移动动画处理中，期间不能响应键盘事件 var CELL_MOVEING = 1; //游戏结束了，结束了就不能响应键盘事件了 var GAME_OVER = 2; var score = 0; //当前游戏状态 var state = PLAYING; //动态效果开关,打开后可以绘制方块的移动动画效果 var effect = true; /* 向上的动作， */ function upAction() { if (state == CELL_MOVEING) { return false; } if (!canMoveUp()) { return false; } //每次处理一个列 for (var col = 0; col //一个列中，按照方方向检查是否需要合并处理。 for (var row = 0; row return; } var next = cells[nextRow][col]; if (current == 0) { //下一个格子移动到当前位置。 cells[row][col] = next; cells[nextRow][col] = 0; if (effect) { //如果动效开关打开，就处理动画 // $("cell"+nextRow+col) 找到下一个对象对应的格子 var obj = $("cell" + nextRow + col); var top = row * 120 + 20; var left = col * 120 + 20; animation.add(obj, top, left); } } else if (current == next) { //两个格子一样，就合并格子 cells[row][col] = next + current; cells[nextRow][col] = 0; score += cells[row][col]; row++; if (effect) { //如果动效开关打开，就处理动画 // $("cell"+nextRow+col) 找到下一个对象对应的格子 var obj = $("cell" + nextRow + col); var top = row * 120 + 20; var left = col * 120 + 20; animation.add(obj, top, left); } } else { //下个不一样，就忽略之 row++; } } } function getNextInCol(col, startRow, step) { var row = startRow; while (true) { if (row = 4) { return -1; } if (cells[row][col] != 0) { return row; } row += step; } } function getNextInRow(row, startCol, step) { var col = startCol; while (true) { if (col = 4) { return -1; } if (cells[row][col] != 0) { return col; } col += step; } } function downAction() { if (state == CELL_MOVEING) { return false; } if (!canMoveDown()) { return false; } //每次处理一个列 for (var col = 0; col //一个列中，按照方方向检查是否需要合并处理。 for (var row = 3; row >= 0;) { var current = cells[row][col]; var nextRow = getNextInCol(col, row - 1, -1); //没有下一个，就直接结束了 if (nextRow == -1) { return; } var next = cells[nextRow][col]; if (current == 0) { //下一个格子移动到当前位置。 cells[row][col] = next; cells[nextRow][col] = 0; if (effect) { //如果动效开关打开，就处理动画 // $("cell"+nextRow+col) 找到下一个对象对应的格子 var obj = $("cell" + nextRow + col); var top = row * 120 + 20; var left = col * 120 + 20; animation.add(obj, top, left); } } else if (current == next) { //两个格子一样，就合并格子 cells[row][col] = next + current; cells[nextRow][col] = 0; score += cells[row][col]; row--; if (effect) { //如果动效开关打开，就处理动画 // $("cell"+nextRow+col) 找到下一个对象对应的格子 var obj = $("cell" + nextRow + col); var top = row * 120 + 20; var left = col * 120 + 20; animation.add(obj, top, left); } } else { //下个不一样，就忽略之 row--; } } } function leftAction() { if (state == CELL_MOVEING) { return false; } if (!canMoveLeft()) { return false; } //每次处理一个行 for (var row = 0; row //一个列中，按照方方向检查是否需要合并处理。 for (var col = 0; col return; } var next = cells[row][nextCol]; //console.log("next:"+next); //console.log("current:"+current); if (current == 0) { //下一个格子移动到当前位置。 cells[row][col] = next; cells[row][nextCol] = 0; if (effect) { //如果动效开关打开，就处理动画 // $("cell"+nextRow+col) 找到下一个对象对应的格子 var obj = $("cell" + row + nextCol); var top = row * 120 + 20; var left = col * 120 + 20; animation.add(obj, top, left); } } else if (current == next) { //两个格子一样，就合并格子 cells[row][col] = next + current; cells[row][nextCol] = 0; score += cells[row][col]; col++; if (effect) { //如果动效开关打开，就处理动画 // $("cell"+nextRow+col) 找到下一个对象对应的格子 var obj = $("cell" + row + nextCol); var top = row * 120 + 20; var left = col * 120 + 20; animation.add(obj, top, left); } } else { //下个不一样，就忽略之 col++; } } } function rightAction() { if (state == CELL_MOVEING) { return false; } if (!canMoveRight()) { return false; } //每次处理一个行 for (var row = 0; row //一个列中，按照方方向检查是否需要合并处理。 for (var col = 3; col >= 0;) { var current = cells[row][col]; var nextCol = getNextInRow(row, col - 1, -1); //没有下一个，就直接结束了 if (nextCol == -1) { return; } var next = cells[row][nextCol]; //console.log("next:"+next); //console.log("current:"+current); if (current == 0) { //下一个格子移动到当前位置。 cells[row][col] = next; cells[row][nextCol] = 0; if (effect) { //如果动效开关打开，就处理动画 // $("cell"+nextRow+col) 找到下一个对象对应的格子 var obj = $("cell" + row + nextCol); var top = row * 120 + 20; var left = col * 120 + 20; animation.add(obj, top, left); } } else if (current == next) { //两个格子一样，就合并格子 cells[row][col] = next + current; cells[row][nextCol] = 0; score += cells[row][col]; col--; if (effect) { //如果动效开关打开，就处理动画 // $("cell"+nextRow+col) 找到下一个对象对应的格子 var obj = $("cell" + row + nextCol); var top = row * 120 + 20; var left = col * 120 + 20; animation.add(obj, top, left); } } else { //下个不一样，就忽略之 col--; } } } function canMoveUp() { for (var col = 0; col //格子上方是空位置, 可以移动 if (cells[row][col] != 0 && cells[row - 1][col] == 0) { return true; } //格子上方相邻的相等，可以移动 if (cells[row][col] != 0 && (cells[row][col] == cells[row - 1][col])) { return true; } } } return false; } function canMoveDown() { for (var col = 0; col //格子上方是空位置, 可以移动 if (cells[row][col] != 0 && cells[row + 1][col] == 0) { return true; } //格子上方相邻的相等，可以移动 if (cells[row][col] != 0 && (cells[row][col] == cells[row + 1][col])) { return true; } } } return false; } function canMoveLeft() { for (var col = 1; col //格子上方是空位置, 可以移动 if (cells[row][col] != 0 && cells[row][col - 1] == 0) { return true; } //格子上方相邻的相等，可以移动 if (cells[row][col] != 0 && (cells[row][col] == cells[row][col - 1])) { return true; } } } return false; } function canMoveRight() { for (var col = 0; col //格子上方是空位置, 可以移动 if (cells[row][col] != 0 && cells[row][col + 1] == 0) { return true; } //格子上方相邻的相等，可以移动 if (cells[row][col] != 0 && (cells[row][col] == cells[row][col + 1])) { return true; } } } return false; } function test() { rightAction(); state = CELL_MOVEING; animation.start(function() { //console.log("update"); randomNumber(); updateView(); state = PLAYING; }); } //更新显示，将表格中的数据，更新到界面显示 function updateView() { for (var row = 0; row var n = cells[row][col]; var cell = $("cell" + row + col); //清楚显示的数据和显示样式 cell.className = "cell"; cell.innerHTML = ""; if (n > 0) { //更新显示样式 cell.className = "cell num" + n; //更新显示的数字 cell.innerHTML = n; } } } $("score").innerHTML = score; $("finalScore").innerHTML = score; } //检查当前的表格中是否是满的，如果满了返回true，否则返回false function full() { for (var row = 0; row if (cells[row][col] == 0) { return false; } } } return true; } //向表格随机插入一个数字，如果插入成功返回true，插入失败返回false function randomNumber() { if (full()) { return false; } while (true) { var col = parseInt(Math.random() * 4); var row = parseInt(Math.random() * 4); if (cells[row][col] == 0) { var n = Math.random() for (var col = 0; col return document.getElementById(id); } function has8192() { for (var row = 0; row if (cells[row][col] == 8192) { return true; } } } } function hasSpace() { for (var row = 0; row if (cells[row][col] == 0) { return true; } } } } /* 显示游戏结束界面 */ function gameOver() { //发现8192游戏结束 if (has8192()) { state = GAME_OVER; $("gameOver").style.display = "block"; return true; } //发现空位置，游戏不结束 if (hasSpace()) { return false; } //能够移动游戏不结束 if (canMoveUp() || canMoveDown() || canMoveLeft() || canMoveRight()) { return false; } state = GAME_OVER; $("gameOver").style.display = "block"; return true; } //软件启动初始代码 window.onload = function() { $("newGame").onclick = function() { if (state == PLAYING) startAction(); } $("restart").onclick = function() { if (state == GAME_OVER) startAction(); } startAction(); //监听键盘事件 document.onkeydown = function(event) { if (state != PLAYING) { return; } var move = false; switch (event.keyCode) { case 37: //left move = leftAction(); break; case 38: //up move = upAction(); break; case 39: //right move = rightAction(); break; case 40: //down move = downAction(); break; } if (!move) { return; } if (effect) { state = CELL_MOVEING; animation.start(function() { //console.log("update"); updateView(); state = PLAYING; if (!gameOver()) { setTimeout(function() { randomNumber(); updateView(); }, 100); } }); } else { if (!gameOver()) { setTimeout(function() { randomNumber(); updateView(); }, 100); } updateView(); state = PLAYING; } gameOver(); }; // 5211 0842 8479 快捷快递 } // animation.js的部分 var animation = { tasks: [], //动画任务数据 timer: null, //动画定时器 times: 10, //定时器次数 interval: 1000 / 60, //定时器间隔 add: function(obj, top, left) { //动画已经开始了，不能添加任务了！ if (this.timer) { return false; } if (!obj) { return false; } //计算移动步伐 var t = (top - obj.offsetTop) / this.times; var l = (left - obj.offsetLeft) / this.times; //添加动画任务，其中obj是被移动到对象，top， left是移动以后的位置 var task = { topStep: t, leftStep: l, element: obj, step: function() { var t = this.element.offsetTop; this.element.style.top = (t + this.topStep) + "px"; var l = this.element.offsetLeft; this.element.style.left = (l + this.leftStep) + "px"; }, clear: function() { this.element.style.top = ""; this.element.style.left = ""; } }; this.tasks[this.tasks.length] = task; return true; }, start: function(callback) { //如果定时器已经启动，就不能再启动定时器了 if (this.timer) { return false; } console.log("STATRING"); if (this.tasks.length == 0) { if (callback) { callback(); } return false; } //如果有callback就交给this.callback if (callback) { this.callback = callback; } this.timer = setInterval(function() { //console.log("timeOut"); //console.log(animation.times); for (var i = 0; i animation.stop(); } }, this.interval); return true; }, stop: function() { if (this.timer) { window.clearInterval(this.timer); this.timer = null; this.times = 10; } //结束以后执行callback() if (this.callback) { this.callback(); } for (var i = 0; i

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章