一、实验说明
别踩白块这个游戏相信很多人都在手机上玩过,今天我们就来做一个网页版的,先上一张游戏效果图,看看你有没有兴趣去实现这样一个小游戏。为了使代码尽量简单,逻辑清晰,去掉了很多的事件控制按钮,刷新页面即可以开始游戏,只保留了实现这个小游戏最重要的部分代码,让初学者也能很快看懂。
本试验涉及一下知识点:
- HTML
- CSS
- JavaScript
二、项目实战
1. 思路分析
我一般写 js 小游戏的思路是,先用 HTML 和 css 在游览器中将自己想要的静态效果写出来,然后再考虑如何用js来控制页面中各个元素的变化实现动态的游戏效果。所以参照手机APP版“别踩白块”,可以用通过HTML和css代码实现相似的静态效果。
2. HTML + css部分
可以用 div+css 布局来实现别踩白块的静态效果展示,直接上 HTML 代码,我来简要说下 HTML 思路,将主界面分解成一个4x4的大矩形格子,每一个方块代表其中一个小的矩形格,其中每一行的四个白块中有一个黑块,每一行中黑块位于那一列是随机生成的,但是我们这里现在是静态页面就自己确定了,然后通过 css 控制样式。
<div id="main">
<div id="con">
<div class="row">
<div class="cell"></div>/*白块*/
<div class="cell black"></div>/*黑块*/
<div class="cell"></div>
<div class="cell"></div>
</div>
<div class="row">
<div class="cell"></div>
<div class="cell black"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<div class="row">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell black"></div>
<div class="cell"></div>
</div>
<div class="row">
<div class="cell black"></div>
<div class="cell"></div>
<div class="cell"></div>