web--2048小游戏复现（慕课网）

mac2025-06-22 12

这周断断续续完成了2048小游戏的网页版，这里主要讲这款游戏的逻辑和代码实现。参考：慕课网2048私人订制 https://www.imooc.com/learn/76 对着视频把源码敲了一遍，这里作一个思路整理。

一、整体思路

1、游戏页面结构及样式 2、2048游戏逻辑 3、手机端优化思路可以划分为上三步，在第一步中，首先规划好整体的排版。

页面内容包括2048header、游戏开始button、得分字段

、整个4*4方格grid-container。在container中每一个cell后期都要绑定一个number。

二、游戏页面结构及样式

2048，开始、得分设置text-align：center；margin左右auto居中，字体背景颜色等；

4*4方格,盒子模型

<div id="grid-container"> <div id="grid-cell-0-0> </div> </div> //grid-cell-0-0到3-3

container设置width、height、background，bord-radius边框，padding，margin、position（relative相对定位，相当于浮动） grid-cell设置width，height、background-color、position（absolute绝对定位，可以被覆盖） number-cell覆盖每个grid-cell，，其中的数字为border-number，初使为0

三、2048游戏逻辑

1、newgame包括：init初始化游戏，生成gridcell4*4，number-cell清零，随机两个位置，generateOneNumber两次。（0）生成页面结构后，加载DOM（文档对象模型）。通过$(document).ready()完成，ready事件在生成html标签、元素，显示CSS样式后实现。在ready（）事件中执行newgame函数，该函数链接到《开始》按钮。（1）init：通过类选择器number-cell $（.number-cell).remove()清零，对grid-container中添加number-cell，number-cell中的数字都存在board【】【】二维数组中。（2）generateOneNumber中随机生成两个位置，和随机2或4， board[randx][randy]=randNumber;

2、moveLeft、moveRight、moveUp、moveDown键盘操作。moveLeft发生，所有数字左移，相同数字求和。（0）按下键盘的↑↓←→由 $KaTeX parse error: Expected 'EOF', got '&' at position 171: \dots，board[i][k]！=0&̲&在左移的这段（k~j）距离，\dots$ (’#score’).text(score)使得在得分：0处显示分数。 4、game over，判断所有border-number不为零（没有空格），且canMoveLeft等四个函数return false（不能移动）。

四、手机端优化

（0）在手机上与pc端的主要区别：页面大小、控制方式（按键盘和触控）（1）为了适应手机和pc，加一个获取屏幕大小的函数documentWidth=window.screen.availWidth,if 屏幕宽度大于500像素，认为是PC，grid-container按500像素显示，小于500，按手机来自适应。width和height按%百分比显示。（2）触控用document.addEventListener监听，包括touchstart、touchmove和touchend。（3）touchstart获取手指初始位置；touchmove是优化，使得手指点击无效；touchend获取手指离开屏幕的位置，通过xy坐标和滑动产生的位移来判断，执行moveLeft等上下左右四个函数。

注：bug修改在一排四个格子出现2248这样的情况下，左移结果应该是4480，但是在三、2、（2）中，结果是16000，应该添加hasConflicted二维数组，判断是否加过，保证只加一次。最后，附上慕课中给的源代码，仅作少量修改，侵删整体结构： index.html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content=" width=device_value, height=device_value, initial-scale=1.0, minimum-scale=0.9, maxmum-scale=1.0,  user-scalable = yes" /> <title>Title</title> <link rel="stylesheet" type="text/css" href="2048.css">   <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="main2048.js"></script> <script type="text/javascript" src="showanimation.js"></script> <script type="text/javascript" src="support2048.js"></script> </head> <body> <header> <h1>2048</h1> <a href="javascript:newgame();" id="newgamebutton">开始</a> <p>得分: <span id="score">0</span> </p> </header> <div id="grid-container"> <div class="grid-cell" id="grid-cell-0-0"></div> <div class="grid-cell" id="grid-cell-0-1"></div> <div class="grid-cell" id="grid-cell-0-2"></div> <div class="grid-cell" id="grid-cell-0-3"></div> <div class="grid-cell" id="grid-cell-1-0"></div> <div class="grid-cell" id="grid-cell-1-1"></div> <div class="grid-cell" id="grid-cell-1-2"></div> <div class="grid-cell" id="grid-cell-1-3"></div> <div class="grid-cell" id="grid-cell-2-0"></div> <div class="grid-cell" id="grid-cell-2-1"></div> <div class="grid-cell" id="grid-cell-2-2"></div> <div class="grid-cell" id="grid-cell-2-3"></div> <div class="grid-cell" id="grid-cell-3-0"></div> <div class="grid-cell" id="grid-cell-3-1"></div> <div class="grid-cell" id="grid-cell-3-2"></div> <div class="grid-cell" id="grid-cell-3-3"></div> </div> </body> </html>

2048.css

header{ display: block; margin: 0 auto; width:100%; text-align: center; } header h1{ font-family: Arial; font-size: 40px; font-weight:bold ; } header #newgamebutton{ display: block; margin: 20px auto; width: 100px; padding:10px 10px; /*background-color: #9efff4;*/ background-color: chocolate; font-family: Arial; color: white; border-radius: 10px; text-decoration: none; } header #newgamebutton:hover{ background-color: cyan; } header p{ font-family:Arial; font-size: 25px; margin: 20px auto; } #grid-container{ width:460px; height: 460px; padding:20px; /*上下左右各自向外20px，盒子为500*500*/ margin: 50px auto; /*background-color: #bbada0;*/ background-color: #9efff4; background-color: rgba(22,27,255,0.9); border-radius: 10px; position: relative; } .grid-cell{ width: 100px; height: 100px; border-radius: 6px; /*background-color: #ccc0b3;*/ background-color: yellowgreen; position: absolute; } .number-cell{ border-radius:6px; font-family: Arial; font-size: 60px; font-weight: bold; font-height:100px; text-align:center; position:absolute; }

main2048.js

support2048.js

documentWidth=window.screen.availWidth; gridContainerWidth=0.92*documentWidth; cellSideLength=0.18*documentWidth; cellSpace=0.04*documentWidth; function getPosTop(i,j) { return cellSpace + (cellSpace+cellSideLength)*i; } function getPosLeft(i,j) { return cellSpace + (cellSpace+cellSideLength)*j; } function getNumberBackgroudColor(number) { switch( number ){ case 2:return "#eee4da";break; case 4:return "#ede0c8";break; case 8:return "#f2b179";break; case 16:return "#f59563";break; case 32:return "#f67c5f";break; case 64:return "#f65e3b";break; case 128:return "#edcf72";break; case 256:return "#edcc61";break; case 512:return "#9c0";break; case 1024:return "#33b5e5";break; case 2048:return "#09c";break; case 4096:return "#a6c";break; case 8192:return "#93c";break; } return "black"; } function getNumberColor(number) { if (number<= 4) return "#776e65"; return "white"; } function nospace(board) { for (var i=0;i<4;i++) for (var j=0;j<4;j++) if (board[i][j]==0)//默认初始值为0，为0说明还有空格 return false; return true; } function noBlockHorizontal(row, col1,col2,board) { for (var i=col1+1;i<col2;i++) if (board[row][i]!=0) return false; return true; } function noBlockupdown(col, row1,row2,board) { for (var i=row1+1;i<row2;i++) if (board[i][col]!=0) return false; return true; } function canMoveLeft(board) { for (var i=0;i<4;i++) for (var j=1;j<4;j++){ if (board[i][j]!=0)//这个点不为0判断要向左移动 if (board[i][j-1]==0 || board[i][j-1]==board[i][j])//左侧是空的或者左右相等 return true; } return false; } function canMoveRight(board){ for (var i=0;i<4;i++) for (var j=2;j>=0;j--) if (board[i][j]!=0) if (board[i][j+1]==board[i][j] || board[i][j+1]==0) return true; return false; } function canMoveUp(board){ for (var j=0;j<4;j++) for (var i=1;i<4;i++) if (board[i][j]!=0){ if (board[i-1][j]==0 || board[i][j]==board[i-1][j]){ return true; } } return false; } function canMoveDown(board) { for (var j=0;j<4;j++) for (var i=2;i>=0;i--) if(board[i][j]!=0){ if (board[i+1][j]==board[i][j] || board[i+1][j]==0){ return true; } } return false; } function nomove(board) { if (canMoveLeft(board) || canMoveRight(board) || canMoveUp(board) || canMoveDown(board)){ return false; } return true; }

showanimation.js 移动的动画效果

最新回复(0)