【2048小游戏】——CSS/原生js爬坑之纯CSS模态对话框&游戏结束

引言：2048小游戏的结束界面，使用纯CSS制作模态对话框，一般做模态对话框都会使用BootStrap自带的模态对话框组件方便使用，但在制作要运行在移动端的小项目时，就不能使用BootStrap，因为文件太大，下载耗时，耗费流量。

     2个Div，一个铺满整屛，一个显示内容

• 坑：如何让Div铺满整屛？解决：2个办法

1. 宽  高 100%    →    position：absolute；  →   top=0;left=0;
2. 四个方向  margin-top/left/right/bootom  都设为0

• 坑：如何让一个Div在整个窗口居中？

1. 错误做法：  top  /  left   50%  不能设置居中  因为top / left是左上角的定位
2. 正确做法：  top  /  left   50%  →  margin-top:-100px;(高的一半)   margin-left:-150px;(宽的一半)

• 坑：模态框背景div的透明度  opacity是继承父元素的
• 解决：background：rgba(55,55,55,.5);  使用rgba() 可以避免继承
• 关键代码   ↓

<div id="gameover"> ???<p> ???????GAME OVER！<br> ???????SCORE:<span id="final">0</span><br> ???????<a class="btn" href="javascript:start();">TRY AGAIN!</a> ???</p></div>

p{ ???width:480px; ???margin:0 auto; ???font-size:40px; ???font-weight: bold; ???font-family:Arial; ???padding-top: 15px;}#gameover{ ???position:absolute; ???top:0; ???left:0; ???width:100%; ???height:100%; ???background: rgba(55,55,55,0.5);}

• 游戏状态： 2048游戏有两个游戏状态

1. 运行中  → game over 模态对话框不显示
2. 游戏结束  → game over 模态对话框显示

• 标准状态保存：给每个状态起名 （一般全大写字母）定义常量，使特殊的值有意义，易维护

1. const RUNNING= 1,GAMEOVER=0;  
2. RUNNING 和 GAMEOVER只是一个名称，实际存储的还是1/0，所以，并不会增大存储空间
3. 坑：判断游戏结束的时候
4. 解决：创建关键函数   function isGameOver(){ }

• 游戏没有结束的条件：

1. 有0
2. 当前元素等于右侧元素（不用和左侧元素比较，因为左侧的元素已经和当前元素比较过了；最右侧一列元素没有右侧元素，也不用比较  c < CN-1）
3. 当前元素等于下方元素（不用和上方元素比较，因为上方的元素已经和当前元素比较过了；最下方一行元素没有下方元素，也不用比较 r < RN-1）

• 每一次移动后，都调用一次 isGameOver()  判断是否游戏结束

1. 坑：调用isGameOver() 要在随机生成数之后 →  随机数把空格填满了，才可以进行游戏结束判断

• 关键代码  ↓

var status=0;//保存游戏状态 ??0：游戏结束 ?1：运行中const RUNNING= 1,GAMEOVER=0;

function start(){ ???//创建空数组保存到data中 ???status=RUNNING;//将游戏状态重置为运行中 ???score=0;//将得分归零 ???……}

//判断游戏是否结束function isGameOver(){ ???for(var r=0;r<RN;r++){ ???????for(var c=0;c<CN;c++){ ???????????if(data[r][c]==0) ???????????????return false; ???????????if(c<CN-1&&data[r][c]==data[r][c+1]) ???????????????return false; ???????????if(r<RN-1&&data[r][c]==data[r+1][c]) ???????????????return false; ???????} ???????return true; ???}}

//每一次移动之后，判断游戏是否结束 if(before!=after){ ???????randomNum(); ???????isGameOver(); ???????updataView(); ｝

注：转载请注明出处

【2048小游戏】——CSS/原生js爬坑之纯CSS模态对话框&游戏结束

原文地址：http://www.cnblogs.com/ljq66/p/7785036.html