JQuery实现1024小游戏
程序员文章站
2022-07-30 15:55:45
最近用Jqery写了一个1024小游戏，由于是第一次写小游戏，所以就选了一个基础的没什么难度游戏。具体实现如下： 首先在开发时将整个游戏分成两层（自认为），底层是游戏的数据结构以及对数据的操作，上层是显示出来的用户界面。底层选择使用一个4x4的二维数组，整个游戏的数据操作都围绕着这个二维数组进行。 ......
最近用jqery写了一个1024小游戏，由于是第一次写小游戏，所以就选了一个基础的没什么难度游戏。具体实现如下：
首先在开发时将整个游戏分成两层（自认为），底层是游戏的数据结构以及对数据的操作，上层是显示出来的用户界面。底层选择使用一个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 }
【二】游戏逻辑
除了需要定义一个二维数组checkerboard，还需要定义一个存总分的变量score，一个存每次操作得分的变量addscore，一个记录键盘是否可以操作的变量ablekeydown，0可以响应键盘操作，1禁止键盘操作。
①游戏初始化
初始化封装成一个函数方便后续的【开始新的游戏】以及【再玩一次】功能。
1 //初始化游戏
2 function newgame(){
3 ablekeydown=0;
4 score=0;
5 checkerboard=[[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0]];
6 $('#score').text('0');
7 $('#maxscore').text(window.localstorage.getitem("maxscore"));
8 reprint(checkerboard);
9 randnum(checkerboard);
10 randnum(checkerboard);
11 }
②在随即位置生成2或4
根据游戏规则，在游戏刚开始时会在两个随即位置分别生成2或4，在每次操作后若游戏没结束，会在一个空的位置随机生成一个2或4，将这一功能封装成一个函数，math.random()生成的随机数范围是[0,1)，由于二维数组范围是[0,3]，所以通过math.floor(math.random()*4)将得到0-3的随机数。另外需要随机得到2或4，定义一个数组initrandnum=[2,4]，只需随机得到initrandnum[0]或initrandnum[1]即可，所以同理使用math.floor(math.random()*2)随机得到1或2即可。
1 function randnum(checkerboard){//在随机位置随机产生2或4
2 var randx = math.floor(math.random()*4);
3 var randy = math.floor(math.random()*4);
4 var initrandnum=[2,4];
5 var randnum=math.floor(math.random()*2);
6 var randval=initrandnum[randnum];
7 while(true){
8 if(checkerboard[randx][randy]==0){
9 break;
10 }else{
11 var randx = math.floor(math.random()*4);
12 var randy = math.floor(math.random()*4);
13 }
14 }
15 checkerboard[randx][randy]=randval;
16 printrandnum(randx,randy,randval);//将randnum()绘制出来
17 }
在得到上述随即位置的2或4后需要将其绘制出来：
1 function printrandnum(randx,randy,randval){
2 var printrandcell=$('#cell-'+randx+'-'+randy);
3 printrandcell.css('background-color',getbackgroundcolor(randval));
4 printrandcell.css('color',getcolor(randval));
5 printrandcell.text(randval);
6 }
③游戏中最重要的两个函数
即判断当前能否移动的函数以及如何移动合并的函数。
1）--------判断能否移动，以左移为例
根据对游戏的观察发现在两中情况下可以移动，一是存在某个不为零的方块，该数字左边为空，即其左边的数组值为0；二是存在某个不为零的方块，，该数字左边与其相同，即其左边的数组值与其相等。对二维数组进行循环，若满足上述条件就返回1，即可以移动。
1 function canmoveleft(checkerboard){
2 for(var i=0;i<4;i++){
3 for(var j=0;j<4;j++){
4 if(checkerboard[i][j]!=0){
5 if(j!=0){
6 if(checkerboard[i][j-1]==0||checkerboard[i][j-1]==checkerboard[i][j]){
7 return 1;
8 break;
9 }
10 }
11 }
12 }
13 }
14 }
2）--------移动合并函数，以左移为例
这个应该是游戏中最重要的函数，根据游戏规则，1）若一个非零方块左边全部为空，它将移动到最左边，若左边的某个不为0，它将移动到这个不为0方块的右边；2）若一个非零方块与左边的数字相同，它将移动到左边并与之合并相加；3）若一个非零方块与左边的数字相同，他与左边合并后的值恰巧与再左边的数相同，此时应该只进行第一次合并，不进行第二次合并。例如当前一排是4,2,2,0，其移动后结果应该是4,4,0,0，而不是8,0,0,0。
第三点尤为重要，最开始由于忽略了这点写出来后结果是不对的。我真对3）的解决办法是，在每次循环一行时初始化一个长度为4的数组var tag=[0,0,0,0]，若某个数在此次循环制相加过一次，就在tag相应位置置为1，再然后在每次合并前做一次判断，若该tag为1，则不进行相加。
1 function moveleft(checkerboard){
2 addscore=0;
3 for(var i=0;i<4;i++){
4 var tag=[0,0,0,0];
5 for(var j=1;j<4;j++){ 7 if(checkerboard[i][j]!=0){
8 if(checkerboard[i][j-1]==0){//左边为空时
9 for(k=j-1;k>=0;k--){
10 if(checkerboard[i][k]!=0){
11 checkerboard[i][k+1]=checkerboard[i][j];
12 checkerboard[i][j]=0;
13 if(checkerboard[i][k+1]==checkerboard[i][k]){//移动后与左边相等
14 if(tag[k]==0&&tag[k+1]==0){
15 checkerboard[i][k]+=checkerboard[i][k+1];
16 score += checkerboard[i][k];
17 addscore+=checkerboard[i][k];
18 tag[k]=1;20 checkerboard[i][k+1]=0;
21 }
22 }
23 break;
24 }else if(k==0){//左边全空
25 checkerboard[i][0]=checkerboard[i][j];
26 checkerboard[i][j]=0;
27 break;
28 }
29 }
30 }else if(checkerboard[i][j-1]==checkerboard[i][j]){//左边相等时
31 if(tag[j-1]==0&&tag[j]==0){
32 checkerboard[i][j-1]+=checkerboard[i][j];
33 score += checkerboard[i][j-1];
34 addscore+=checkerboard[i][j-1];
35 tag[j-i]=1;37 checkerboard[i][j]=0;
38 }
39 }
40 }
41 }
42 }
43 reprint(checkerboard);//停止移动后重绘画面
44 }
值得注意的是，为了计算游戏的总分以及每次操作的得分，需要在每次合并后对addscore和score进行计算。
右移、上移、下移与左移逻辑基本相同，只需对左移代码稍作修改即可。
④关于分数
1 //更新分数
2 function updatescore(num){
3 $('#score').text(num);
4 }
在每次得分后会在总分位置产生一个加分动画
1 //分数动画
2 function movescore(score){
3 if(score>0){
4 $('#movescore p').text('+'+score);
5 $('#movescore').css('top','110px');
6 $('#movescore').show();
7 var top;
8 var topval=110;
9 var opacityval=1;
10 var timer=null;
11 timer=setinterval(function(){
12 topval-=5;
13 opacityval-=0.1;
14 top=topval+'px';
15 $('#movescore').css('top',top);
16 $('#movescore').css('opacity',opacityval);
17 if(topval<50){
18 clearinterval(timer);
19 $('#movescore').hide();
20 }
21 },40);
22 }
23 }
⑤游戏结束
若二维数组中某一项等于1024游戏结束，显示最终得分，并设置键盘不可继续操作；或者当前无法继续移动游戏结束，显示最终得分。
1 //游戏结束函数
2 function gameover(checkerboard){
3 if(canmoveleft(checkerboard)!=1&&canmoveright(checkerboard)!=1&&canmoveup(checkerboard)!=1&&canmovedown(checkerboard)!=1){
4 $('.gameover').show();
5 $('#gameovertext p').text('game over ！');
6 $('#gameoverscore').text('最终得分'+score);
7 if(score>window.localstorage.getitem("maxscore")){
8 window.localstorage.setitem("maxscore",score);
9 $('#maxscore').text(window.localstorage.getitem("maxscore"));
10 }
11 }
12 for(var i=0;i<4;i++){
13 for(var j=0;j<4;j++){
14 if(checkerboard[i][j]==1024){
15 ablekeydown=1;//键盘不可操作
16 $('.gameover').show();
17 $('#gameovertext p').text('congratulations!');
18 $('#gameoverscore').text('最终得分'+score);
19 if(score>window.localstorage.getitem("maxscore")){
20 window.localstorage.setitem("maxscore",score);
21 $('#maxscore').text(window.localstorage.getitem("maxscore"));
22 }
23 break;
24 }
25 }
26 }
27 }
⑥开始新游戏&再玩一次
1 //开始新游戏
2 $('#newgame').click(function(){
3 newgame();
4 });
5 //再玩一次
6 $('#restartbtn').click(function(){
7 $('.gameover').hide();
8 newgame();
9 });