扫雷小游戏-网页版
这两天在恶补前端的相关知识,看到JQuery的动画部分时,突然心血来潮想做一个扫雷的网页版,于是花了一整天的时间完成了一个初始版本,很多算法赶时间,JS数据结构还不熟练,所以代码还比较粗糙,权当对这几天学习成果的一个回顾,若有更好实现方式可留言一起讨论。 先看看最后实现的效果: 一、知识点介绍 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 ][