最近用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 }JQuery实现2048小游戏
原文地址：https://www.cnblogs.com/huangin/p/9503006.html