这是我一年前写的一个小游戏(具体什么时候忘记了)
链接:记忆力训练(移动端)
想和我交流的话可以邮件我,邮箱在第三部分。
第一部分:页面的设计框架
对于每个小方块或者说每一行我并没有采用js来自动生成(.lines):似乎就算使用js也不能简化我的标签,也不能优化性能,或许能够降低流量传输,但是对于这个项目来说这样不到1kB的数据似乎是不用担心的。
另外在#temp部分,我将所有图片直接读入了,而不是在需要的时候读入,这样做的原因是:在网络不好的情况下游戏时,如果根据需要读入图片,可能使得初次游戏过程不流畅;一次性全部读入的话默认情况是可以使图片缓存,因而不用担心再次游戏时流量的问题,并且初次使用时不会有卡顿(源于拉取图片)。
<body>
<div id="transition">
<h2>游 戏 结 束</h3>
<h3>得分:</h2>
<h3>用时:</h2>
</div>
<div id="game">
<div class="lines">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
</div>
<div class="lines">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
</div>
<div class="lines">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
</div>
<div class="lines">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
</div>
<div class="lines">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
</div>
<div class="lines">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
</div>
<div class="lines">
<img src="" alt="">
<img src="" alt="">
<img src