前端学习要告一段落了，也没机会写什么像样的东西，然后无意中想起某人以前给我玩了一下别踩白块的游戏，手残还被嘲讽了下，现在想起来觉得这游戏实现起来也不难，于是上星期用jquery写了一个别踩白块的小游戏，就像当初学python的时候一样写了一个2048。然后今天正好抽个时间写个博客纪录下，算是对前一段时间学习的总结，没有玩过的可以去下一个原版的来玩一下，游戏很简单，就是从不断下落的方块中点击黑快，如果点击到百块或者有黑块没被点击到，游戏就算结束。游戏实现起来不难，都是一些小知识点。当时写的时候，脑袋有点糊，有一bug看了半天没解决，后来第二天早上脑袋清醒的时一看就看出来，顺便在这里提醒自己一定不要在脑袋不清醒的时候写代码。好了说了这么多先来看一下效果图，这里别吐槽我的css样式设计就好。。。
一、游戏html页面
游戏的html界面非常简单，分为4部分，
得分标题栏，
游戏界面主题容器，开始的时候为一个div，然后用jquery动态生成黑白格子
开始暂停按钮一栏
游戏结束时候显示的模态框
下面是代码部分
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="https://www.jb51.net/css/game.css" type="text/css"> </head> <body> <div> <h3>Score:<span>0</span></h3> <div> <div></div> </div> <div> <div> <button>开始</button> <button>暂停</button> </div> </div> <div></div> <div> <div> <img src="https://www.jb51.net/pic/gg.jpg"> </div> <div> <button>重新开始</button> <button>返回</button> </div> </div> </div> <script src="https://www.jb51.net/js/jquery-1.12.4.js"></script> <script src="https://www.jb51.net/js/game.js"></script> </body> </html>
二、css布局
写完了html然后就是css，这里主要用到 absolute布局，然后需要注意的是就是游戏过程由于需要不停的生成一栏新div，所以div容器要设置overflow: hidden，这一点需要注意下，然后其他的知识点也就是absolute，relative如何布局，模态框如何实现并居中，都不难，下面看下代码就好
*{ margin: 0; padding: 0; } .main{ width: 808px; margin: 50px auto; background: gray; min-height: 544px; position: relative; } .content{ width: 408px; margin: 0 auto; height:408px; border: 2px solid green; background-color: white; position: relative; top:0; overflow: hidden; } #inner{ position: relative; top:-102px; } .item{ height: 102px; } .item *{ float: left; height: 100px; width: 100px; background-color: white; border: 1px solid black; } .black{ background-color: black; } h3{ text-align: center; padding-top: 20px; padding-bottom: 20px; } h3 span{ color:brown; } .hide{ display: none; } .shadow{ position: absolute; left: 0; bottom: 0; right: 0; top: 0; background-color: gray; opacity: 0.6; } .alert-box{ position: absolute; width: 300px; height: 300px; left: 50%; top:50%; margin-left: -150px; margin-top: -150px; background-color: white; } .alert-box .game-over{ margin-left: 20px; margin-top: 30px; } .alert-box .btn{ width: 150px; position: relative; margin-left: auto; margin-right: auto; margin-top: 20px; } .main .btn .container{ width: 150px; margin: 20px auto; } button{ cursor: pointer; border: 0; display: inline-block; width: 70px; height: 30px; line-height: 30px; text-align: center; background-color: cyan; }
三、jquery实现
游戏最核心的部分就是jquery实现了，主要的功能如下
•游戏的初始化
•如何动态插入一行div和删除一行div
•开始暂停按钮的事件绑定
•游戏过程中点击百块和黑快的事件委托
•游戏如何移动以及如何得分
•如何自动增加白块下落速度
•如何判定游戏结束
下面来看一下初始化代码的实现，初始化之前写了个函数，自动插入一行，并且在这一行4个div中某一个为随机的黑块供游戏中点击，剩下3个白块，怎么随机生成，怎么动态创建div这里需要点小技巧，具体看下面。生成一行div的函数完成后只需在初始化函数里面调用4次即可