【2048小游戏】——CSS/原生js爬坑之纯CSS模态对话框&游戏结束
引言:2048小游戏的结束界面,使用纯CSS制作模态对话框,一般做模态对话框都会使用BootStrap自带的模态对话框组件方便使用,但在制作要运行在移动端的小项目时,就不能使用BootStrap,因为文件太大,下载耗时,耗费流量。
一、模态对话框的组成 |
2个Div,一个铺满整屛,一个显示内容
- 坑:如何让Div铺满整屛?解决:2个办法
- 宽 高 100% → position:absolute; → top=0;left=0;
- 四个方向 margin-top/left/right/bootom 都设为0
- 坑:如何让一个Div在整个窗口居中?
- 错误做法: top / left 50% 不能设置居中 因为top / left是左上角的定位
- 正确做法: 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:;
left:;
width:100%;
height:100%;
background: rgba(55,55,55,0.5);
}
二、游戏结束 |
- 游戏状态: 2048游戏有两个游戏状态
- 运行中 → game over 模态对话框不显示
- 游戏结束 → game over 模态对话框显示
- 标准状态保存:给每个状态起名 (一般全大写字母)定义常量,使特殊的值有意义,易维护
- const RUNNING= 1,GAMEOVER=0;
- RUNNING 和 GAMEOVER只是一个名称,实际存储的还是1/0,所以,并不会增大存储空间
- 坑:判断游戏结束的时候
- 解决:创建关键函数 function isGameOver(){ }
- 游戏没有结束的条件:
- 有0
- 当前元素等于右侧元素(不用和左侧元素比较,因为左侧的元素已经和当前元素比较过了;最右侧一列元素没有右侧元素,也不用比较 c < CN-1)
- 当前元素等于下方元素(不用和上方元素比较,因为上方的元素已经和当前元素比较过了;最下方一行元素没有下方元素,也不用比较 r < RN-1)
- 每一次移动后,都调用一次 isGameOver() 判断是否游戏结束
- 坑:调用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模态对话框&游戏结束的更多相关文章
- 【2048小游戏】——原生js爬坑之遍历算法显示二维数组内容
引言:做2048小游戏会将横纵方向的数字内容,存储在一个二维数组中,要将这个二维数组中的内容显示在页面上,就一定要用遍历算法来实现了. 一.二维数组存储 首先考虑用二维数组存储所有行数,列数 ...
- 【2048小游戏】——原生js爬坑之封装行的移动算法&事件
引言:2048小游戏的核心玩法是移动行,包括横行和纵行,玩家可以选择4个方向,然后所有行内的数字就会随着行的移动而向特定的方向移动.这个行的移动是一个需要重复调用的算法,所以这里就要将一行的移动算法封 ...
- 【京东详情页】——原生js爬坑之二级菜单
一.引言 做京东详情页仿写的时候,要用原生js实现顶部菜单的二级菜单显示与隐藏事件的触发. 过程中遇到了一个坑,在这里与大家分享.要实现的效果如下: 二.坑 谁触发事件?显示.隐藏二级菜单 ...
- 【京东详情页】——原生js爬坑之放大镜
一.引言 在商城的详情页中,放大镜的功能是很常见的.这里京东详情页就要做一个仿放大镜的效果,预览如下: 二.实现原理 实际上,放大镜的实现是单纯用几个div,鼠标移入其中一个小图div,触发事件显示另 ...
- 【京东详情页】——原生js爬坑之标签页
一.引言 要做详情页的商品评价等5个li的标签页转换,效果如下: 二.实现原理 有一个特别的地方:上面五个li,但下面只有四个容器(table/div). 设计的目的:无论点哪个li,只有前四个div ...
- 利用css+原生js制作简易钟表
利用css+原生js制作简单的钟表.效果如下所示 实现该效果,分三大块:html.javascript.css html部分html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期 ...
- 微信小程序结合原生JS实现电商模板(二)
接 <微信小程序结合原生JS实现电商模板(一)>,在首页列表加入购物车到购物和模块增删数量,动态计算商品价格实现后,本次提交主要实现了商品详情(还不完善)简单页面,从商品详情页跳转到购物车 ...
- 新浪博客:html+css+原生JS+Ajax初级+mySql数据库——源码
**************************************************************************************************** ...
- 原生js使用getComputedStyle方法获取CSS内部属性值
在对网页进行调试的过程中,经常会用到js来获取元素的CSS样式, 1.下面的方法只能JS只能获取写在html标签中的写在style属性中的值(style=”…”),而无法获取定义在<style ...
随机推荐
- RNQOJ 开心的金明
题目描述 金明今天很开心,家里购置的新房就要领钥匙了,新房里有一间他自己专用的很宽敞的房间.更让他高兴的是,妈妈昨天对他说:“你的房间需要购买哪些物品,怎么布置,你说了算,只要不超过N 元钱就行”.今 ...
- LAMP第一部分安装mysql -apache -php
1. 安装mysqlcd /usr/local/src/ 免安装编译二进制的包wget http://syslab.comsenz.com/downloads/linux/mysql-5.1.40-l ...
- mvc与mvp与mvvm
==MVC,MVP和MVVM都是常见的软件架构设计模式,它通过分离关注点来改进代码的组织方式== MVC.MVP和MVVM的相同点和不同点 不同部分是C(Controller).P(Presenter ...
- mysql-Innodb事务隔离级别-repeatable read详解1
经验总结: Python使用MySQLdb数据库后,如使用多线程,每个线程创建一个db链接,然后再各自创建一个游标cursor,其中第一个线程读一个表中数据为空,第二个写入该表一条数据并提交,第一个线 ...
- POJ 3155 Hard Life(最大密度子图+改进算法)
Hard Life Time Limit: 8000MS Memory Limit: 65536K Total Submissions: 9012 Accepted: 2614 Case Ti ...
- [tsinsen_A1278]串珠子
[tsinsen_A1278]串珠子 试题描述 铭铭有 \(n\) 个十分漂亮的珠子和若干根颜色不同的绳子.现在铭铭想用绳子把所有的珠子连接成一个整体. 现在已知所有珠子互不相同,用整数 \(1\) ...
- xctf --Hctf2014 Quals write up
描述 猫流大大发现一个女神,你能告诉我女神的名字么(名字即是flag) nvshen.zip Solution: Extract the file and we could find a txt wh ...
- BZOJ3531 [Sdoi2014]旅行 【树剖 + 线段树】
题目 S国有N个城市,编号从1到N.城市间用N-1条双向道路连接,满足 从一个城市出发可以到达其它所有城市.每个城市信仰不同的宗教,如飞天面条神教.隐形独角兽教.绝地教都是常见的信仰.为了方便,我们用 ...
- 【tmux】常用命令
https://www.cnblogs.com/lizhang4/p/7325086.html 复制 prefix [ + vim风格选择复制 新建session tmux new -s name 为 ...
- Python matplotlib 柱状图
matplotlib是python最著名的绘图库,它提供了一整套和matlab相似的命令API,十分适合交互式地进行制图.而且也可以方便地将它作为绘图控件,嵌入GUI应用程序中.它的文档相当完备,并且 ...