最近用Jqery写了一个2048小游戏，由于是第一次写小游戏，所以就选了一个基础的没什么难度游戏。具体实现如下：
首先在开发时将整个游戏分成两层（自认为），底层是游戏的数据结构以及对数据的操作，上层是显示出来的用户界面。底层选择使用一个4x4的二维数组，整个游戏的数据操作都围绕着这个二维数组进行。
【一】游戏基础界面
1 <div id="game"> 2 <div id="header"> 3 <h1>1024</h1> 4 <button id="newGame">开始新的游戏</button> 5 <p>分数：<span id="score">0</span> 最高分：<span id="maxScore">0</span></p> 6 <div id="movescore"><p>+16</p></div> 7 </div> 8 <div id="container"> 9 <div class="cell" id="cell-0-0"></div> 10 <div class="cell" id="cell-0-1"></div> 11 <div class="cell" id="cell-0-2"></div> 12 <div class="cell" id="cell-0-3"></div> 13 <div class="cell" id="cell-1-0"></div> 14 <div class="cell" id="cell-1-1"></div> 15 <div class="cell" id="cell-1-2"></div> 16 <div class="cell" id="cell-1-3"></div> 17 <div class="cell" id="cell-2-0"></div> 18 <div class="cell" id="cell-2-1"></div> 19 <div class="cell" id="cell-2-2"></div> 20 <div class="cell" id="cell-2-3"></div> 21 <div class="cell" id="cell-3-0"></div> 22 <div class="cell" id="cell-3-1"></div> 23 <div class="cell" id="cell-3-2"></div> 24 <div class="cell" id="cell-3-3"></div> 25 </div> 26 <div class="gameover"> 27 <div id="gameoverText"> 28 <p></p> 29 </div> 30 <p id="gameoverScore"></p> 31 <div id="reStart"> 32 <button id="reStartBtn">再玩一次</button> 33 </div> 34 </div> 35 </div>
CSS：
1 *{ 2 margin: 0; 3 padding: 0; 4 } 5 #game{ 6 font-family: Arial; 7 margin: 0 auto; 8 text-align: center; 9 } 10 #header{ 11 margin: 20px; 12 } 13 #header a{ 14 font-family: Arial; 15 text-decoration: none;/*设置 h1、h2、h3、h4 元素的文本修饰*/ 16 display: block; 17 color: white; 18 margin: 20px auto; 19 width: 125px; 20 height: 35px; 21 text-align: center; 22 line-height: 40px; 23 background-color: #8f7a66; 24 border-radius: 10px; 25 font-size: 15px; 26 } 27 #header p{ 28 font-family: Arial; 29 font-size: 20px; 30 } 31 #container{ 32 width: 460px; 33 height: 460px; 34 background-color: #bbada0; 35 margin: 0 auto; 36 border-radius: 10px; 37 position: relative; 38 padding: 20px; 39 } 40 .cell{ 41 width: 100px; 42 height: 100px; 43 border-radius: 6px; 44 background-color: #ccc0b3; 45 position: absolute; 46 font-size: 3.5em; 47 font-weight:700; 48 text-align: center; 49 line-height:100px; 50 } 51 #newGame{ 52 width: 120px; 53 height: 30px; 54 border-radius: 5px; 55 border: 1px solid rgb(143,122,102); 56 background-color: rgb(143,122,102); 57 color: white; 58 margin-top: 10px; 59 margin-bottom: 10px; 60 } 61 .gameover{ 62 width: 100%; 63 height: 500px; 64 background-color: rgba(255,255,255,0.5); 65 position: absolute; 66 top:153px; 67 display: none; 68 } 69 #gameoverText{ 70 font-size: 4em; 71 font-weight: 600; 72 color: #363636; 73 text-align: center; 74 opacity: 1; 75 padding-top: 10%; 76 } 77 #reStartBtn{ 78 width: 100px; 79 height: 40px; 80 border-radius: 5px; 81 border: 1px solid rgb(143,122,102); 82 background-color: rgb(143,122,102); 83 color: white; 84 margin-top: 3%; 85 } 86 #gameoverScore{ 87 font-size: 1.5em; 88 } 89 #movescore{ 90 position: absolute; 91 text-align: center; 92 padding-left: 45%; 93 top:110px; 94 font-weight: 600; 95 display: none; 96 }
此时界面的16个格子是重叠在一起的，给每个格子写css比较麻烦，所以通过js循环进行设置：
1 //初始化绘制表格 2 function printTab(){ 3 for(var i=0;i<4;i++){ 4 for(var j=0;j<4;j++){ 5 var cell=$(‘#cell-‘+i+‘-‘+j); 6 cell.css({top:(20+i*120),left:(20+j*120)}); 7 } 8 } 9 }
不同的数字显示不同的背景颜色与文字颜色：
1 function getBackgroundColor(number){ 2 switch (number) { 3 case 2:return "#eee4da";break; 4 case 4:return "#ede0c8";break; 5 case 8:return "#f2b179";break; 6 case 16:return "#f59563";break; 7 case 32:return "#f67c5f";break; 8 case 64:return "#f65e3b";break; 9 case 128:return "#edcf72";break; 10 case 256:return "#edcc61";break; 11 case 512:return "#9c0";break; 12 case 1024:return "#33b5e5";break; 13 case 2048:return "#09c";break; 14 case 4096:return "#a6c";break; 15 case 8192:return "#93c";break; 16 } 17 } 18 // 设置相应数字的文字颜色 19 function getColor(number){ 20 if (number <= 4) { 21 return "#776e65" 22 } 23 return "white"; 24 }
每次操作后根据当前二维数组进行重绘画面：
1 //根据二维数组绘制画面 2 function rePrint(checkerboard){ 3 for(var i=0;i<4;i++){ 4 for(var j=0;j<4;j++){ 5 if(checkerboard[i][j]!=0){ 6 var printCell=$(‘#cell-‘+i+‘-‘+j); 7 printCell.css(‘background-color‘,getBackgroundColor(checkerboard[i][j])); 8 printCell.css(‘color‘,getColor(checkerboard[i][j])); 9 printCell.text(checkerboard[i][j]); 10 if(checkerboard[i][j]>=1024){ 11 printCell.css(‘font-size‘,‘2.5em‘); 12 printCell.css(‘font-weight‘,‘500‘); 13 } 14 }else{ 15 var printCell=$(‘#cell-‘+i+‘-‘+j); 16 printCell.css(‘background-color‘,‘#ccc0b3‘); 17 printCell.css(‘color‘,‘black‘); 18 printCell.text(‘‘); 19 } 20 } 21 } 22 }
原文：https://www.cnblogs.com/huangin/p/9503006.html