h5游戏：适应不同尺寸屏幕的WEB2048

一、界面展示及简单介绍

先上完成后不同尺寸屏幕下的效果图，界面模仿的原版2048：

（768px<屏幕）

（500px<屏幕<768px）

（小于500px的超小屏幕）

原来预想左边是游戏列表，右边是排行榜，暂时没有做。

整体使用了bootstrap的栅格布局，左右两列在xs尺寸下隐藏，中间列独占12格。

在屏幕小于500px的时候额外设置样式：

@media screen and (max-width: 500px){...
}

动画效果的实现学习了慕课网的2048课程，也算学习了一种新思路。

其它效果：

·手机端的滑动操作

·页面放大缩小格子跟随移动

二、主要实现函数

这里就只贴出主要的代码，尽量增加注释，让大家更好地理解实现逻辑。完整项目代码可以在文章末尾的github地址中clone。

1.移动的逻辑，以向左移动为例

//判断是否可以移动 board为4*4对应格子的数组
function canMoveLeft(){for (let i = 0; i<4; i++){for (let j = 1; j<4; j++){//最左边的格子无法移动不用考虑if(board[i][j] != 0)//必须为有数字的格子//左侧相邻格子是否为空格或数字相等if (board[i][j-1] == 0 || board[i][j-1] == board[i][j])return true}}return false
}function moveLeft() {if(!canMoveLeft())//判断是否可以左移return;for(let x = 0; x<4; x++){//merged数组对应该行四个格子，判断是否已经合并过,避免[2,2,2,2]合并为[8,0,0,0]之类情况var merged = [false,false,false,false];for(let y = 1; y<4; y++) {if (board[x][y] !=0){//当前行从左至右寻找有数字点var currentnum = board[x][y]; //当前移动点的数字var last = y; //当前点移动或寻找合并的过程中记录当前位置for(var n = y-1; n>=0; n--){//从当前点左侧相邻格开始往左寻找空格或可合并格if(board[x][n] == 0){board[x][n] = currentnum;board[x][last] = 0;last = n;continue;}else if(board[x][n] == currentnum && !merged[n]){board[x][n] = currentnum * 2;score+= currentnum * 2;board[x][last] = 0;last = n;merged[n] = true;continue;}elsebreak;//相邻格不能移动和合并直接结束}moveAnimation(x,y,x,n+1,merged[n+1])//移动动画}}}setTimeout("updateBoardView()",200) //移动完成后更新视图setTimeout("ranNumber()",200)//等待移动动画完成后再生成新数字
}

2.动画效果的实现

实现思路为原本在html中写的16个div格子（grid-cell）只用来实现视觉效果，实际并没有对这16个格子进行操作，而是在每次根据二维数组board记录的数据生成16个position=absolute的div（number-cell），number-cell不显示时大小都为0，位置都在对应实grid-cell的中心，在生成数字或移动时使用animate方法对number-cell进行操作，动画结束后再更新视图，代码如下：

function updateBoardView() { //更新显示$(".number-cell").remove();for (let i =0; i < 4; i++)for (let j = 0; j<4; j++){$(".grid-container").append('<div class="number-cell" id="number-cell-'+i+'-'+j+'"></div>');var theNumberCell = $('#number-cell-'+i+'-'+j);if(board[i][j] == 0){theNumberCell.css('width','0px');theNumberCell.css('height','0px');theNumberCell.css('top',getPosTop(i)+cellSize/2);theNumberCell.css('left',getPosLeft(j)+cellSize/2);}//cellSize为每个格子的长宽 cellSpace为每个格子之间的间距else {theNumberCell.css('width',cellSize);theNumberCell.css('height',cellSize);theNumberCell.css('top',getPosTop(i));theNumberCell.css('left',getPosLeft(j));theNumberCell.css('background-color',getCellColor(board[i][j]));theNumberCell.css('color',getNumColor(board[i][j]));theNumberCell.text(board[i][j]);}}
}

移动动画代码：

//传入起始点坐标，终点坐标及是否是合并点
function moveAnimation(fromx,fromy,tox,toy,merged) { //移动动画var numberCell = $('#number-cell-'+fromx+'-'+fromy);numberCell.animate({top:getPosTop(tox),//根据行数确定top距离left:getPosLeft(toy)//根据列数确定left距离},100)if (merged){ //合并动画 胀大再还原的过程numberCell.animate({width:cellSize+cellSpace*2,height:cellSize+cellSpace*2,top:getPosTop(tox)-cellSpace,left:getPosLeft(toy)-cellSpace},50)numberCell.animate({width:cellSize,height:cellSize,top:getPosTop(tox),left:getPosLeft(toy)},50)}
}

三、总结

整个游戏在整体的逻辑实现上会花费比较久的时间，另一个难点就是动画的实现，幸好慕课网的教程给出了一种解决思路，总体来说2048还是一个比较简单的项目。

项目完整代码github地址：https://github.com/GaoMinjian/2048

项目在线体验地址一：https://gaominjian.github.io/2048/index.html

项目在线体验地址二：http://112.74.53.108/2048/