这两天在恶补前端的相关知识,看到JQuery的动画部分时,突然心血来潮想做一个扫雷的网页版,于是花了差不多一天的时间完成了一个初始版本,权当对这几天学习成果的一个回顾,若某处功能有更好实现方式欢迎留言一起讨论。
========== 原创作品,未经本人允许,请勿转载,谢谢! ==========
========== 作者:Yokeqi 出处:博客园 原文链接 ==========
先看看最后实现的效果:如何内嵌一个页面?
一、知识点介绍
1. Html + CSS + JQuery库
- 要创建界面UI,所以需要用到各类Html标签还有CSS的布局美化。
- 要实现各类逻辑功能,所以需要用到JQuery的选择器、事件等知识。
2. 扫雷游戏的玩法
- 翻开某个格子,如果是雷,那么就会Boom,游戏结束。
- 如果是空白,则代表以这个格子为中心的九宫格范围内没有雷。
- 如果是数字,则根据数字代表这个格子为中心的九宫格范围内存在多少颗雷。
- 正确标记出所有的雷,并翻开多余的格子,则游戏胜利。
二、关键代码说明
1. 创建数据地图,接下来只需要根据数据地图创建对应UI就可以了。
function createMap() { //初始化为0 for (var i = 0; i < num; i++) { map[i] = new Array(); mark[i] = new Array(); for (var j = 0; j < num; j++) { map[i][j] = 0; mark[i][j] = 0; } } var count = 0; // 生成雷 while (count < boomNum) { var row = Math.floor(Math.random() * (num - 1)); var col = Math.floor(Math.random() * (num - 1)); if (isMine(row, col)) { // 这个位置已经有雷,重新生成位置 continue</