JQuery实现2048小游戏

Posted 2020-12-30 huangin

最近用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>&nbsp;&nbsp;&nbsp;&nbsp;最高分：<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 }