js编写2048小游戏 – 有爱前端

http://www.jb51.net/article/108766.htm

<!DOCTYPE html> <html> <head> <title> 2048-game </title> <meta charset="utf-8" /> <style media="screen"> #game { display: none; position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; background-color: #9DA5C3; opacity: 0.5; z-index: 1; } .clear:after { content: ""; display: table; clear: both; } .left { float: left; } .right { float: right; } .scoreShow { height: 50px; text-align: center; line-height: 50px; } .model { text-decoration: none; color: white; background-color: #bbada0; font-size: 36px; border-radius: 10px; } .head { width: 480px; height: 50px; margin: 0 auto; font-size: 25px; } #gridPanel { width: 480px; height: 480px; margin: 0 auto; background-color: #bbada0; border-radius: 10px; position: relative; z-index: 1; } .grid, .cell { width: 100px; height: 100px; border-radius: 6px; } .grid { background-color: #ccc0b3; float: left; margin: 16px 0 0 16px; } .n2 { background-color: #eee3da; background: url(http://img2.xcabc.com//201611/15/20161115035053968429.jpg); } .n4 { background-color: #ede0c8; background: url(http://img2.xcabc.com/201708/21/20170821102100351669.jpg); } .n8 { background-color: #f2b179; background: url(http://img2.xcabc.com/201708/18/20170818095705122440.jpg); } .n16 { background-color: #f59563; background: url(http://img2.xcabc.com//201708/22/20170822100447649757.jpg); } .n32 { background-color: #f67c5f; background: url(http://img2.xcabc.com//201609/02/20160902024628953170.jpg); } .n64 { background-color: #f65e3b; background: url(http://img2.xcabc.com//201611/18/20161118030759428548.jpg); } .n128 { background-color: #edcf72; background: url(http://img2.xcabc.com//201610/17/20161017115342318175.JPG); } .n256 { background-color: #edcc61; background: url(http://img2.xcabc.com//201610/24/20161024015906162900.png); } .n512 { background-color: #9c0; background: url(http://img2.xcabc.com//201602/19/20160219100655524590.jpg); } .n1024 { background-color: #33b5e5; background: url(http://img2.xcabc.com//201602/18/20160218020820490542.jpg); } .n2048 { background-color: #09c; background: url(http://img2.xcabc.com//201602/18/20160218094111714708.jpg); } .n4096 { background-color: #a6c; background: url(http://img2.xcabc.com//201602/17/20160217025310556928.jpg); } .n8192 { background-color: #93c; background: url(http://photocdn.sohu.com/20151006/mp34419561_1444131693540_1_th_fv23.jpeg); } .n2, .n4 { color: #776e65 } .cell { position: absolute; font-size: 60px; text-align: center; line-height: 100px; color: #fff; background-size: cover; } #gameover { width: 100%; display: none; position: fixed; left: 50%; right: 50%; top: 148px; width: 220px; height: 200px; border-radius: 10px; background-color: white; margin-left: -110px; text-align: center; z-index: 5; } #gameover>a { display: inline-block; width: 170px; height: 50px; border-radius: 10px; text-decoration: none; background-color: #9F8D77; color: white; font-size: 36px; } </style> </head> <body> <div id="game"> </div> <div class="head clear"> <div class="scoreShow left"> <span>Score:</span> <span id="score"></span> </div> <div class="selction right" onclick="getModel(event)"> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="model" value="3">3X3</a> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="model" value="4">4X4</a> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="model" type="button">5X5</a> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="model" type="button">6X6</a>   </div> </div> <div id="gridPanel"> </div> <div id="gameover"> <h1 id="Score"></h1> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="again" onclick="obj.gameStart()">Try again</a> </div> <script type="text/javascript"> var arr = []; function $(id) { return document.getElementById(id); } function C(cls) { return document.getElementsByClassName(cls); } var obj = { ROW: 4, CELL: 4, r: 0, c: 0, f: 0, //r行 c列 f查找的下一位置 keyCd: 0, score: 0, createEle: 0, //是否需要创建元素 eleFragment: "", //文档片段变量 //游戏开始 gameStart: function() { obj.init(); document.onkeydown = function(e) { //自动获得事件对象 switch (e.keyCode) { //判断按键号 case 37: obj.keyCd = 1; obj.moveLeft(); break; case 38: obj.keyCd = 2; obj.moveUp(); break; case 39: obj.keyCd = 1; obj.moveRight(); break; case 40: obj.keyCd = 2; obj.moveDown(); break; } $("score").innerHTML = obj.score; //更新分数 } }, //初始化 init: function() { obj.eleFragment = document.createDocumentFragment(); for (r = 0; r < obj.ROW; r++) { arr.push([]); for (c = 0; c < obj.CELL; c++) { arr[r][c] = 0; if (obj.createEle == 1) { obj.create(r, c); } } } if (obj.createEle == 1) { obj.createEle = 0; $("gridPanel").innerHTML = ""; //清空原有的元素 $("gridPanel").appendChild(obj.eleFragment); //添加元素 } obj.score = 0; $("score").innerHTML = obj.score; $("game").style.display = "none"; $("gameover").style.display = "none"; obj.random(); //开始游戏随机生成两个数 obj.random(); obj.updateView(); }, //创建div元素，添加到gridPanel中 create: function(r, c) { var grid, cell; var increment = 14, grWidth, grHeight, grMarginTop, grMarginLeft, ceWidth, ceHight; grid = document.createElement("div"); cell = document.createElement("div"); grid.id = "g" + r + c; grid.className = "grid"; cell.id = "c" + r + c; cell.className = "cell"; if (obj.ROW == 3) { increment = 24; } else if (obj.ROW == 4) { increment = 18; } grWidth = grHeight = ceWidth = ceHight = 66 + (6 - obj.ROW) * increment; //优化后 grMarginTop = grMarginLeft = (480 - grWidth * obj.ROW) / (obj.ROW + 1); grid.style.width = grWidth + "px"; grid.style.height = grHeight + "px"; grid.style.marginTop = grMarginTop + "px"; grid.style.marginLeft = grMarginLeft + "px"; cell.style.width = ceWidth + "px"; cell.style.height = ceHight + "px"; cell.style.top = grMarginTop + r * (grMarginTop + ceWidth) + "px"; cell.style.left = grMarginLeft + c * (grMarginLeft + ceHight) + "px"; cell.style.lineHeight = ceHight + "px"; cell.style.fontSize = 30 + (6 - obj.ROW) * 10 + "px"; //优化前 /*if (obj.ROW == 3) { grid.style.width = "140px"; grid.style.height = "140px"; grid.style.margin = "15px 0 0 15px"; cell.style.width = "140px"; cell.style.height = "140px"; cell.style.top = 15 + r * 155 + "px"; //设置距离上一位置的高度 cell.style.left = 15 + c * 155 + "px"; //设置离左一位置的距离 cell.style.lineHeight = "140px"; } else if (obj.ROW == 4) { grid.style.width = "100px"; grid.style.height = "100px"; grid.style.margin = "16px 0 0 16px"; cell.style.width = "100px"; cell.style.height = "100px"; cell.style.top = 16 + r * 116 + "px"; cell.style.left = 16 + c * 116 + "px"; cell.style.lineHeight = "100px"; } else if (obj.ROW == 5) { grid.style.width = "75px"; grid.style.height = "75px"; grid.style.margin = "17.5px 0 0 17.5px"; cell.style.width = "75px"; cell.style.height = "75px"; cell.style.top = 17.5 + r * 92.5 + "px"; cell.style.left = 17.5 + c * 92.5 + "px"; cell.style.fontSize = "40px"; cell.style.lineHeight = "75px"; } else if (obj.ROW == 6) { grid.style.width = "66px"; grid.style.height = "66px"; grid.style.margin = "12px 0 0 12px"; cell.style.width = "66px"; cell.style.height = "66px"; cell.style.top = 12 + r * 78 + "px"; cell.style.left = 12 + c * 78 + "px"; cell.style.fontSize = "30px"; cell.style.lineHeight = "66px"; }*/ obj.eleFragment.appendChild(grid); obj.eleFragment.appendChild(cell); }, //随机产生一个新的数 random: function() { while (1) { var row = Math.floor(Math.random() * obj.ROW); var cell = Math.floor(Math.random() * obj.CELL); if (arr[row][cell] == 0) { //判断生成的随机数位置为0才随机生成2或4 arr[row][cell] = (Math.random() > 0.5) ? 4 : 2; break; } } // var row = Math.floor(Math.random() * 4); // var cell = Math.floor(Math.random() * 4); // if (arr[row][cell] == 0) { //判断生成的随机数位置为0才随机生成2或4 // arr[row][cell] = (Math.random() > 0.5) ? 4 : 2; // return; // } // obj.random();//递归影响执行效率 }, //更新页面 updateView: function() { var win = 0; for (r = 0; r < obj.ROW; r++) { for (c = 0; c < obj.CELL; c++) { if (arr[r][c] == 0) { //值为0的不显示 $("c" + r + c).innerHTML = ""; //0不显示 $("c" + r + c).className = "cell" //清除样式 } else { $("c" + r + c).innerHTML = arr[r][c]; $("c" + r + c).className = "cell n" + arr[r][c]; //添加不同数字的颜色 if (obj.ROW == 3 && arr[r][c] == 1024) { win = 1; } else if (obj.ROW == 4 && arr[r][c] == 2048) { win = 1; } else if (obj.ROW == 5 && arr[r][c] == 4096) { win = 1; } else if (obj.ROW == 6 && arr[r][c] == 8192) { win = 1; } } } } if (win == 1) { //通关 $("game").style.display = "block"; $("gameover").style.display = "block"; $("Score").innerHTML = "You win!<br>Score:" + obj.score; } if (obj.isGameOver()) { //游戏失败 $("game").style.display = "block"; $("gameover").style.display = "block"; $("Score").innerHTML = "GAME OVER!<br>Score:" + obj.score; console.log("gameover"); } }, //游戏失败 isGameOver: function() { for (r = 0; r < obj.ROW; r++) { for (c = 0; c < obj.CELL; c++) { if (arr[r][c] == 0) { //有0还不是gameover return false; } else if (c != obj.CELL - 1 && arr[r][c] == arr[r][c + 1]) { //左往右前一个和下一个不相等 return false; } else if (r != obj.ROW - 1 && arr[r][c] == arr[r + 1][c]) { //上往下上一个和下一个不相等 return false; } } } return true; }, //查找下一个不为0的数值的位置 find: function(r, c, start, condition, direction) { if (obj.keyCd == 2) { //上下按键 if (direction == 1) { //向上按键 f++ for (var f = start; f < condition; f += direction) { if (arr[f][c] != 0) { return f; } } } else { //向下按键 f-- for (var f = start; f >= condition; f += direction) { if (arr[f][c] != 0) { return f; } } } } else { //左右按键 if (direction == 1) { //左按键 f++ for (var f = start; f < condition; f += direction) { if (arr[r][f] != 0) { return f; } } } else { //右按键 f-- for (var f = start; f >= condition; f += direction) { if (arr[r][f] != 0) { return f; } } } } return null; //循环结束仍然没有找到！=0的数值，返回null }, //左按键的处理 dealToLeft: function(r) { var next; for (c = 0; c < obj.ROW; c++) { next = obj.find(r, c, c + 1, obj.CELL, 1); //找出第一个不为0的位置 if (next == null) break; //没有找到就返回 //如果当前位置为0 if (arr[r][c] == 0) { arr[r][c] = arr[r][next]; //把找到的不为0的数值替换为当前位置的值 arr[r][next] = 0; //找到的位置清0 c--; //再次循环多一次，查看后面否有值与替换后的值相同， } else if (arr[r][c] == arr[r][next]) { //如果当前位置与找到的位置数值相等，则相加 arr[r][c] *= 2; arr[r][next] = 0; obj.score += arr[r][c]; } } }, move: function(itertor) { var before, //没处理前 after; //after处理后 before = arr.toString(); itertor(); //执行for函数 after = arr.toString(); if (before != after) { //前后对比，如果不同就update obj.random(); obj.updateView(); } }, moveLeft: function() { obj.move(function() { for (r = 0; r < obj.ROW; r++) { obj.dealToLeft(r); } }) // if 当前位置不为零 // 从当前位置，下一个成员开始，遍历， // 如果找到，与当前位置相等的数， // 两者相加，并把不为零的成员，设置为零 // 如果当前位置是零 // 从当前位置下一个成员开始遍历 // 如果找到第一个不为零的成员 // 当前位置数值设置为这个不为零的成员的值，并且把那个不为零的成员设置为 0 }, //右按键处理 dealToRight: function(r) { var next; for (c = obj.CELL - 1; c >= 0; c--) { next = obj.find(r, c, c - 1, 0, -1); //找出第一个不为0的位置 if (next == null) break; //没有找到就返回 //如果当前位置为0 if (arr[r][c] == 0) { arr[r][c] = arr[r][next]; //把找到的不为0的数值替换为当前位置的值 arr[r][next] = 0; //找到的位置清0 c++; //再次循环多一次，查看后面否有值与替换后的值相同， } else if (arr[r][c] == arr[r][next]) { //如果当前位置与找到的位置数值相等，则相加 arr[r][c] *= 2; arr[r][next] = 0; obj.score += arr[r][c]; } } }, moveRight: function() { obj.move(function() { for (r = 0; r < obj.ROW; r++) { obj.dealToRight(r); } }) }, //上按键处理 dealToUp: function(c) { var next; for (r = 0; r < obj.ROW; r++) { next = obj.find(r, c, r + 1, obj.ROW, 1); //找出第一个不为0的位置 if (next == null) break; //如果当前位置为0 if (arr[r][c] == 0) { arr[r][c] = arr[next][c]; //把找到的不为0的数值替换为当前位置的值 arr[next][c] = 0; //找到的位置清0 r--; //再次循环多一次，查看后面否有值与替换后的值相同 } else if (arr[r][c] == arr[next][c]) { //如果当前位置与找到的位置数值相等，则相加 arr[r][c] *= 2; arr[next][c] = 0; obj.score += arr[r][c]; } } }, moveUp: function() { obj.move(function() { for (c = 0; c < obj.CELL; c++) { obj.dealToUp(c); } }) }, //下按键处理 dealToDown: function(c) { var next; for (r = obj.ROW - 1; r >= 0; r--) { next = obj.find(r, c, r - 1, 0, -1); //找出第一个不为0的位置 if (next == null) { break; } //如果当前位置为0 if (arr[r][c] == 0) { arr[r][c] = arr[next][c]; //把找到的不为0的数值替换为当前位置的值 arr[next][c] = 0; //找到的位置清0 r++; //再次循环多一次，查看后面否有值与替换后的值相同 } else if (arr[r][c] == arr[next][c]) { //如果当前位置与找到的位置数值相等，则相加 arr[r][c] *= 2; arr[next][c] = 0; obj.score += arr[r][c]; } } }, moveDown: function() { obj.move(function() { for (c = 0; c < obj.CELL; c++) { obj.dealToDown(c); } }) } } window.onload = function() { obj.createEle = 1; obj.gameStart(); } //切换模式 function getModel(e) { //事件冒泡获取a元素 var a = e.target, modelValue = 4; if (a.nodeName == "A") { if (a.innerHTML == "3X3") { modelValue = 3; } else if (a.innerHTML == "4X4") { modelValue = 4; } else if (a.innerHTML == "5X5") { modelValue = 5; } else if (a.innerHTML == "6X6") { modelValue = 6; } obj.ROW = obj.CELL = modelValue; obj.createEle = 1; //需要创建格子div元素的标志 obj.gameStart(); } } // var modelValue = parseInt($("model").value); // if (isNaN(modelValue)) { // modelValue = 4; //默认是4*4 // } // if (modelValue <= 2 || modelValue > 6) return; //2格或者大于6格无效 // obj.ROW = modelValue; // obj.CELL = modelValue; // obj.createEle = 1; // obj.gameStart(); // console.log(modelValue); // } </script> </body> </html>

提示：你可以先修改部分代码再运行。

http://www.qdfuns.com/notes/21400/02f47ff73ec012348129354d7a867af8.html

<!doctype html> <html> <head> <meta charset="utf-8"> <title>2048</title> <style type="text/css"> #gridPanel{ width:480px; height:480px; margin:0 auto; background-color:#bbada0; border-radius:10px; position:relative; } .grid,.cell{ width:100px; height:100px; border-radius:6px; } .grid{ float:left; margin:16px 0 0 16px; background-color:#ccc0b3; } .cell{ text-align:center; line-height:100px; color:#776e65; font-size:60px; position:absolute; } /*每一行拥有同样的top 每一列拥有同样的left*/ #c00,#c01,#c02,#c03{top:16px;} #c00,#c10,#c20,#c30{left:16px;} #c10,#c11,#c12,#c13{top:132px;} #c01,#c11,#c21,#c31{left:132px;} #c20,#c21,#c22,#c23{top:248px;} #c02,#c12,#c22,#c32{left:248px;} #c30,#c31,#c32,#c33{top:364px;} #c03,#c13,#c23,#c33{left:364px;} .n2{background-color:#eee3da;} .n4{background-color:#ede0c8;} .n8{background-color:#f2b179;} .n16{background-color:#f59563;} .n32{background-color:#f67c5f;} .n64{background-color:#f65e3b;} .n128{background-color:#edcf72;} .n256{background-color:#edcc61;} .n512{background-color:#9c0;} .n1024{background-color:#33b5e5;} .n2048{background-color:#09c;} .n4096{background-color:#a6c;} .n8192{background-color:#93c;} .n8,.n16,.n32,.n64,.n128,.n256,.n512,.n1024,.n2048,.n4096,.n8192{color:#fff;} .n1024,.n2048,.n4096,.n8192{font-size:40px;} /*显示分数的p元素*/ p{width:480px;margin:0 auto;font-family:Arial;font-weight:bold;font-size:40px;padding-top:15px;} /*game over界面样式*/ #gameOver{width:100%;height:100%;;position:absolute;top:0px;left:0px;display:none;} #gameOver div{width:100%;height:100%;background-color:#555;opacity:0.5;} #gameOver p{position:absolute;border-radius:10px;top:200px;left:40%;width:300px;height:200px;border:1px solid #edcf72;line-height:1.6em;text-align:center;background-color:#fff;} .button{padding:10px;background-color:#9f8d77;border-radius:6px;color:#fff;cursor:pointer; } </style> </head> <body> <p>Score:<span id="score"><span></p> <div id="gridPanel">  <div id="g00" class="grid"></div> <div id="g01" class="grid"></div> <div id="g02" class="grid"></div> <div id="g03" class="grid"></div> <div id="g10" class="grid"></div> <div id="g11" class="grid"></div> <div id="g12" class="grid"></div> <div id="g13" class="grid"></div> <div id="g20" class="grid"></div> <div id="g21" class="grid"></div> <div id="g22" class="grid"></div> <div id="g23" class="grid"></div> <div id="g30" class="grid"></div> <div id="g31" class="grid"></div> <div id="g32" class="grid"></div> <div id="g33" class="grid"></div>  <div id="c00" class="cell n2">2</div> <div id="c01" class="cell n4">4</div> <div id="c02" class="cell n8">8</div> <div id="c03" class="cell n16">16</div> <div id="c10" class="cell n32">32</div> <div id="c11" class="cell n64">64</div> <div id="c12" class="cell n128">128</div> <div id="c13" class="cell n256">256</div> <div id="c20" class="cell n512">512</div> <div id="c21" class="cell n1024">1024</div> <div id="c22" class="cell n2048">2048</div> <div id="c23" class="cell n4096">4096</div> <div id="c30" class="cell n8192">8192</div> <div id="c31" class="cell"></div> <div id="c32" class="cell"></div> <div id="c33" class="cell"></div> </div>  <div id="gameOver"> <div></div>  <p>Game Over!<br/> Score:<span id="finalScore"></span><br/> <a class="button" id="restart" style="font-size:30px;" onclick="game.start()">爱心 Try again!</a> </p> </div> </body> <script> var game={ data:[],//单元格中的所有数字 score:0, state:1, RUNNING:1, GAME_OVER:0, PLAYING:2,//动画正在播放中 start:function(){//启动游戏时调用 this.data=[ [0,0,0,0], [0,0,0,0], [0,0,0,0], [0,0,0,0] ]; //在两个随机位置生成2或4 this.score=0; this.state=this.RUNNING; var div=document.getElementById("gameOver"); div.style.display="none"; this.randomNum(); this.randomNum(); //document.write(this.data.join("<br/>")); this.updateView(); }, isFull:function(){//判断是否已满 /*遍历data数组，只要发现==0，就返回false 如果退出循环，就返回true*/ for(var row=0;row<4;row++){//this.data.length=4 for(var col=0;col<4;col++){//this.data[row].length=4 if(this.data[row][col]==0){ return false; } } } return true; }, randomNum:function(){//在随机位置生成2或4 if(this.isFull()){return;}//如果满了就不用生成 /*循环条件：true 随机在0到3行中生成一个行下标row 随机在0到3列中生成一个列下标col 如果该位置==0，随机选择2或4:如果Math.random()<0.5,选2，否则选4；放入该位置退出循环*/ while(true){ var row=Math.floor(Math.random()*(3-0+1)+0); var col=Math.floor(Math.random()*(3-0+1)+0); if(this.data[row][col]==0){ /*this.data[row][col]=Math.random()*(1-0+1)+0; if(Math.random()<0.5){ this.data[row][col]=2; }else{ this.data[row][col]=4; }*/ this.data[row][col]=Math.random()<0.5?2:4; break; } } }, canLeft:function(){ /*遍历每个元素（最左侧列除外），只要发现任意元素左侧数==0或者当前值==左侧值return true 如果循环正常结束， return false*/ for(var row=0;row<4;row++){ for(var col=1;col<4;col++){ if(this.data[row][col]!=0){ if(this.data[row][col-1]==0||this.data[row][col]==this.data[row][col-1]){ return true; } } } } return false; }, moveLeft:function(){//实现左移所有行 if(this.canLeft()){//先判断能否左移 for(var row=0;row<4;row++){ this.moveLeftInRow(row); } this.state=this.PLAYING; animation.start(); setTimeout(function(){ game.state=game.RUNNING; game.randomNum(); game.updateView(); },animation.times*animation.interval); } }, moveLeftInRow:function(row){//左移一行 /*从0位置开始到2结束遍历row行中的每个元素获得一个下一个不为0的元素的nextCol下标如果nextCol==-1，break；否则，判断合并如果自己==0，用下一个元素的值替换自己，将下一个元素的值设为0，让col留在原地：col-- 如果自己==下一个元素将自己*2；将下一个元素设为0*/ for(var col=0;col<=2;col++){ var nextCol=this.getNextRight(row,col); if(nextCol==-1){ break; }else{ if(this.data[row][col]==0){ this.data[row][col]=this.data[row][nextCol]; this.data[row][nextCol]=0; animation.addTask(""+row+nextCol,""+row+col); col--; }else if(this.data[row][col]==this.data[row][nextCol]){ this.data[row][col]*=2; this.score+=this.data[row][col]; this.data[row][nextCol]=0; animation.addTask(""+row+nextCol,""+row+col); } } } }, getNextRight:function(row,col){//获得当前行中，指定位置右侧第一个不为0的数，返回下一个为0的数的位置 /*遍历当前位置右侧每个元素只要返现！=0的，就返回其位置下标nextCol 退出循环，返回-1*/ for(var i=col+1;i<4;i++){ if(this.data[row][i]!=0){ return i; } } return -1; }, canRight:function(){//判断能否右移 for(var row=0;row<4;row++){ for(var col=2;col>=0;col--){ if(this.data[row][col]!=0){ if(this.data[row][col+1]==0||this.data[row][col]==this.data[row][col+1]){ return true; } } } } return false; }, moveRight:function(){//向右移动所有行 if(this.canRight()){ for(var row=0;row<4;row++){ this.moveRightInRow(row); } this.state=this.PLAYING; animation.start(); setTimeout(function(){ game.state=game.RUNNING; game.randomNum(); game.updateView(); },animation.times*animation.interval); } }, moveRightInRow:function(row){//右移当前行 /*从右向左遍历检查，（最左边元素除外）*/ for(var col=3;col>0;col--){ var nextCol=this.getNextLeft(row,col); if(nextCol==-1){ break; }else{ if(this.data[row][col]==0){ this.data[row][col]=this.data[row][nextCol]; this.data[row][nextCol]=0; animation.addTask(""+row+nextCol,""+row+col); col++; }else if(this.data[row][col]==this.data[row][nextCol]){ this.data[row][col]*=2; this.score+=this.data[row][col]; this.data[row][nextCol]=0; animation.addTask(""+row+nextCol,""+row+col); } } } }, getNextLeft:function(row,col){ /*从当前位置向左，找下一个不为0的数*/ for(var i=col-1;i>=0;i--){ if(this.data[row][i]!=0){ return i; } } return -1; }, canUp:function(){ for(var row=1;row<4;row++){ for(var col=0;col<4;col++){ if(this.data[row][col]!=0){ if(this.data[row-1][col]==0||this.data[row][col]==this.data[row-1][col]){ return true; } } } } return false; }, moveUp:function(){ if(this.canUp()){//先判断能否左移 for(var col=0;col<4;col++){ this.moveUpInCol(col); } this.state=this.PLAYING; animation.start(); setTimeout(function(){ game.state=game.RUNNING; game.randomNum(); game.updateView(); },animation.times*animation.interval); } }, moveUpInCol:function(col){ for(var row=0;row<3;row++){ var nextRow=this.getNextDown(row,col); if(nextRow==-1){ break; }else{ if(this.data[row][col]==0){ this.data[row][col]=this.data[nextRow][col]; this.data[nextRow][col]=0; animation.addTask(""+nextRow+col,""+row+col); row--; }else if(this.data[row][col]==this.data[nextRow][col]){ this.data[row][col]*=2; this.score+=this.data[row][col]; this.data[nextRow][col]=0; animation.addTask(""+nextRow+col,""+row+col); } } } }, getNextDown:function(row,col){ for(var i=row+1;i<4;i++){ if(this.data[i][col]!=0){ return i; } } return -1; }, canDown:function(){//判断能否右移 for(var row=0;row<3;row++){ for(var col=0;col<4;col++){ if(this.data[row][col]!=0){ if(this.data[row+1][col]==0||this.data[row][col]==this.data[row+1][col]){ return true; } } } } return false; }, moveDown:function(){//向右移动所有行 if(this.canDown()){ for(var col=0;col<4;col++){ this.moveDownInCol(col); } this.state=this.PLAYING; animation.start(); setTimeout(function(){ game.state=game.RUNNING; game.randomNum(); game.updateView(); },animation.times*animation.interval); } }, moveDownInCol:function(col){//右移当前行 /*从右向左遍历检查，（最左边元素除外）*/ for(var row=3;row>0;row--){ var nextRow=this.getNextUp(row,col); if(nextRow==-1){ break; }else{ if(this.data[row][col]==0){ this.data[row][col]=this.data[nextRow][col]; this.data[nextRow][col]=0; animation.addTask(""+nextRow+col,""+row+col); row++; }else if(this.data[row][col]==this.data[nextRow][col]){ this.data[row][col]*=2; this.score+=this.data[row][col]; this.data[nextRow][col]=0; animation.addTask(""+nextRow+col,""+row+col); } } } }, getNextUp:function(row,col){ /*从当前位置向左，找下一个不为0的数*/ for(var i=row-1;i>=0;i--){ if(this.data[i][col]!=0){ return i; } } return -1; }, /*将游戏数据整体更新到页面上*/ updateView:function(){ /*step1.遍历二维数组中的每个元素 step2：找到当前元素对应的div 拼div的id：c+row+col var div=document.getElementById(id)； step3：将当前元素的值放入div中如果当前值==0，就放入“”，div.innerHTML=? 否则放入当前值 step4：根据当前元素值修改div样式类 div.className="类名"; 如果当前值==0，className=“cell”；否则className=“cell n”+当前值*/ for(var row=0;row<4;row++){ for(var col=0;col<4;col++){ var div=document.getElementById("c"+row+col); /*if(this.data[row][col]==0){ div.innerHTML=""; }else{ div.innerHTML=this.data[row][col]; }*/ div.innerHTML=this.data[row][col]==0?"":this.data[row][col]; /* if(this.data[row][col]==0){ div.className="cell"; }else{ div.className="cell n"+this.data[row][col]; }*/ div.className=this.data[row][col]==0?"cell":"cell n"+this.data[row][col]; /*将分数放入span*/ } } /*将分数放入span*/ var span=document.getElementById("score"); span.innerHTML=this.score; /*判断游戏结束如果游戏结束，this.state=GAME_OVER 显示游戏结束div 找到gameOverdiv 修改div的style.display*/ if(this.isGameOver()){ this.state=this.GAME_OVER; var div=document.getElementById("gameOver"); var finalSocre=document.getElementById("finalScore"); finalSocre.innerHTML=this.score; div.style.display="block"; } /*if(this.state==this.RUNNING){ var div=document.getElementById("gameOver"); div.style.display="none"; }*/ }, isGameOver:function(){//判断游戏是否结束 /*能继续时返回false，否则返回true*/ if(!this.isFull()){return false;} /*已经满了*/ /*if(this.canLeft()||this.canRight()||this.canUp()||this.canDown()){return false;} else{return ture;}*/ for(var row=0;row<4;row++){ for(var col=0;col<4;col++){ //if(this.data[row][col==0]){return false;} if(col<3){/*检查右侧相邻*/ if(this.data[row][col]==this.data[row][col+1]){ return false; } } if(row<3){/*检查下方相邻*/ if(this.data[row][col]==this.data[row+1][col]){ return false; } } } } return true; } } //当窗口加载后，调用game对象的start方法 window.onload=function(){//事件处理函数 game.start(); //console.log(game.moveLeftInRow(0)); document.onkeydown=function(){ /*step1：先获得事件对象！所有事件发生时，都自动创建一个event对象 event对象中封装了事件信息，比如：鼠标的坐标，触发事件的元素，按键的编号 step2：获得事件对象中的按键编号如果是37号，就调用moveLeft */ if(game.state!=game.PLAYING){ var event=window.event||arguments[0];//||经常用于解决浏览器兼容性问题 if(game.state==game.RUNNING){ if(event.keyCode==37){ game.moveLeft(); }else if(event.keyCode==39){ game.moveRight(); } else if(event.keyCode==38){ game.moveUp(); } else if(event.keyCode==40){ game.moveDown(); } }else if(event.keyCode==13){ game.start(); } } } } // animation function Task(obj,topStep,leftStep){ this.obj=obj; this.topStep=topStep; this.leftStep=leftStep; } /*moveStep方法将当前元素对象移动一步*/ Task.prototype.moveStep=function(){ var style=getComputedStyle(this.obj,null); var top=parseInt(style.top); var left=parseInt(style.left); this.obj.style.top=top+this.topStep+"px"; this.obj.style.left=left+this.leftStep+"px"; } /*清楚元素对象的样式，使其返回原地*/ Task.prototype.clear=function(){ this.obj.style.left=""; this.obj.style.top=""; } var animation={ times:10,//每个动画10步完成 interval:10,//10毫秒迈一步 timer:null,//保存定时器id的属性 tasks:[],//保存每次需要移动的任务 addTask:function(source,target){ console.log(source+","+target); var sourceDiv=document.getElementById("c"+source); var targetDiv=document.getElementById("c"+target); var sourceStyle=getComputedStyle(sourceDiv); var targetStyle=getComputedStyle(targetDiv); var topStep=(parseInt(targetStyle.top)-parseInt(sourceStyle.top))/this.times; var leftStep=(parseInt(targetStyle.left)-parseInt(sourceStyle.left))/this.times; var task=new Task(sourceDiv,topStep,leftStep); this.tasks.push(task); }, start:function(){ this.timer=setInterval(function(){ for(var i=0;i<animation.tasks.length;i++){ animation.tasks[i].moveStep(); } animation.times--; if(animation.times==0){ for(var i=0;i<animation.tasks.length;i++){ animation.tasks[i].clear(); } clearInterval(animation.timer); animation.timer=null; animation.tasks=[]; animation.times=10; } },this.interval); } } </script> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » js编写2048小游戏