现在位置首页 / 项目实战 /正文

jquery版网页扫雷游戏源代码分析及Demo下载

作者: IT小兵 | 2014年5月14日| 热度:℃ | 评论: |参与:

今天分享的文章和demo是由博主同事,空闲时间开发的jquery版网页扫雷游戏。

网上也有很多web版本的扫雷游戏,这个有什么区别?

先上图看看

1、自定义难度:默认支持4个难度。支持自定义难度

2、进入游戏后,可以有透明提示,就是给我这样的小白用的。。。

3、下一步争取支持手机触摸处理。

Demo预览地址: 

扫雷(Jquery + html)

http://bbbzd.com/code/bomb/ 

Demo 下载地址 1:

http://pan.baidu.com/s/1eSNo5s2

Demo 下载地址2:

链接:http://pan.baidu.com/s/1qYznAjy 密码:wssf



一下为我同事完成开发的思路: 


1、【说明】 jquery + html +css 编写,我是在 vs 2013 里编写的。

  如何玩:下载后,解压,使用 IE9|10|firefox 打开 default.html,允许其网页运行脚本;或者 创建IIS站点的方法也行; 或者 放到一个Visual Studio项目中,设置启动项运行。聪明的你一定会玩。


2、【开发】高频方法

var arrBomb=newArray();

arrBomb.push("1_1");

arrBomb.splice(0,1);


setTimeout()\bind()\unbind()\inArray()



3、【开发】核心代码

 function getAroundDivByMiddle("4_7") //计算周边的布局

包含的所有文件有:back.png|back2.png|bomb.png|cancel.png|default.html|jquery-1.10.2.min.js|main.js|mark1.png|mark2.png|style.css


4、【开发】思路

  1 根据设置(行、列、雷数),校验成功后,生成雷坐标,例如:"1_1、2_3、4_5",存入 定义好的全局数组变量 arrBomb(=new Array()) 中。

  2 生成Div布局,并计算雷坐标周边的内容,并将得到的空格或数字存在全局数组变量。所有空格存入:arrBlank;数字存入:arrNumber;arrNumberContent;

  3 给div添加鼠标事件(左键事件、中键滚轮事件、右键事件)和键盘事件。

   

    左键事件:如果div是雷,直接爆炸,gameOver;如果是数字,显示数字;如果是空格,递归出连续空格并显示空白,一直到第一位数字为止。

    中键滚轮事件:快速开启雷区。当明确周边雷时,快速开启周边非雷的内容(包含空格递归)。如果标记的雷错误,就爆炸,gameOver。

    右键事件:点击一下,标记为雷,再一下,取消雷标记,标记为问号。仅当标记为雷时,左键和中键事件失效。


    键盘事件:数字键“1”相当为鼠标左键,数字键“2”相当为鼠标中键,数字键“3”相当为鼠标右键,数字键“4”为提示键;以上数字键大小键盘均可。

    方向键上下左右调整雷区内焦点移动。


5、【对比】与window7扫雷游戏异同

  1、没它绚丽,思路完全来自它,我是盗版。 

  2、背景图(back.png|back2.png)和标记雷图(mark1.png)截取自window7扫雷游戏  

  3、添加了“帮我扫雷”功能,在有帮助次数的情况下,点击数字键4,帮你焦点周边扫干净。

  4、添加了“透视雷区”,直接作弊。


6、【免责】与我无关奥

   仅供玩耍和学习和交流(2.soho@163.com)之用,请不要用到商业用途,如果否,产生后果与开发者无关奥~~怕怕滴。


7、【目的】 编写目的

   写这个是给自己留个念想,现学现用。同时,也期盼我孩子顺利出生。(顺祝~)


下一篇,将会详细讲解关键的代码和算法等,并提供demo下载

下一篇地址:

jquery版网页扫雷游戏源代码详细分析及Demo下载 


http://www.suchso.com/projecteactual/jquery-web-saolei-game-demo-down2.html 


点击阅读本文所属分类的更多文章: 项目实战 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

抢天猫双11红包
推荐使用阿里云服务器
echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询