也分享自己做的JS扫雷小游戏
看了草根程序猿分享的JS扫雷小游戏
想起去年的时候自己也做了一个
于是也拿出来分享之
先上截图~
引用了jQuery,节省了很多鼠标点击上的判断
界面显然都是照搬Windows的扫雷啦
详细的内容注释里都有,我就不啰嗦啦~
【JS部分】
var mineArray, //地雷数组lastNum, //剩余雷数countNum, //未被揭开的方块数inGame = 0, //游戏状态,0为结束,1为进行中,2为初始化完毕但未开始startTime; //开始时间//以下操作1表示揭开一个方块,操作2表示标记一个小旗,操作3表示标记一个问号,操作4表示若某个方块周围的地雷全都标记完,买QQ平台则将其周围剩下的方块挖开 $(function(){$('#main').mouseup(function(e) {var clicked = $(e.target),id = clicked.attr('id'),cX = parseInt(id.substring(1, id.indexOf('-'))), //所点击方格的X坐标cY = parseInt(id.substring(id.indexOf('-') + 1)); //所点击方格的Y坐标if(inGame == 1) {if(e.which == 1) {if(clicked.hasClass('hidden') && !clicked.hasClass('flag')) {openBlock(cX,cY); //左键点击未揭开且未插旗方块即执行操作1} else if(!clicked.hasClass('hidden')) {openNearBlock(cX,cY); //由于同时点击左右键实现起来比较麻烦,所以改成用点击左键实现操作4}} else if(e.which == 3 && clicked.hasClass('hidden')) { //右键点击操作2,如果允许使用问号标记,则可执行操作3if(clicked.hasClass('flag')) {clicked.removeClass('flag');if($('#check').attr('checked')) clicked.addClass('check');lastNum ++;countNum ++;} else if(clicked.hasClass('check')) {clicked.removeClass('check');} else {clicked.addClass('flag');lastNum --;countNum --;}$('#lastnum').text(lastNum);}if(lastNum == countNum) endGame(1); //因为最后剩下的方块均为雷时应直接结束游戏,因此设置为剩余雷数和未被揭开的方块数相等的时候结束游戏} else if(inGame == 2) {if(e.which == 1) { //初始化完毕后只允许点击左键开始游戏openBlock(cX,cY);inGame = 1;var now = new Date();startTime = now.getTime();timer();}}});$('#main').bind('contextmenu', function(){ return false; }); //阻止默认右击事件 }); //初始化 function init(x, y, mine) {countNum = x * y;inGame = 2;lastNum = mine;mineArray = new Array(y + 2);$.each(mineArray, function(key) {mineArray[key] = new Array(x + 2);});for(var i = 1; i <= y; i ++) {for(var j = 1; j <= x; j ++) {mineArray[i][j] = 0;}}while(mine > 0) { //随机布雷,-1为有雷var i = Math.ceil(Math.random() * y);var j = Math.ceil(Math.random() * x);if(mineArray[i][j] != -1) {mineArray[i][j] = -1;mine --;}}for(var i = 1; i <= y; i ++) { //遍历地雷数组,统计每个格子四周地雷的数量for(var j = 1; j <= x; j ++) {if(mineArray[i][j] != -1) {if(i > 1 && j > 1 && mineArray[i - 1][j - 1] == -1) mineArray[i][j] ++;if(i > 1 && mineArray[i - 1][j] == -1) mineArray[i][j] ++;if(i > 1 && j < x && mineArray[i - 1][j + 1] == -1) mineArray[i][j] ++;if(j < x && mineArray[i][j + 1] == -1) mineArray[i][j] ++;if(i < y && j < x && mineArray[i + 1][j + 1] == -1) mineArray[i][j] ++;if(i < y && mineArray[i + 1][j] == -1) mineArray[i][j] ++;if(i < y && j > 1 && mineArray[i + 1][j - 1] == -1) mineArray[i][j] ++;if(j > 1 && mineArray[i][j - 1] == -1) mineArray[i][j] ++;}}}var block = '';for(var i = 1, row = mineArray.length - 1; i < row; i ++) {for(var j = 1, col = mineArray[0].length - 1; j < col; j ++) {block += '<div id="b' + i + '-' + j + '" style="left:' + (j - 1) * 20 + 'px;top:' + (i - 1) * 20 + 'px;" class="hidden"></div>';}}$('#main').html(block).width(x * 20 + 1).height(y * 20 + 1).show(); //绘图$('#warning').html('');$('#submenu').show();$('#lastnum').text(lastNum); } //揭开方块 function openBlock(x, y) {var current = $('#b' + x + '-' + y);if(mineArray[x][y] == -1) {if(inGame == 1) { //触雷时如游戏进行中,则失败结束游戏current.addClass('cbomb');endGame();} else if(inGame == 2) { //如游戏初始化后还未开始,则重新初始化地雷阵,再揭开此方块,以保证第一次点击不触雷init(mineArray[0].length - 2, mineArray.length - 2, lastNum);openBlock(x, y);} else { //游戏结束时需揭开全部方块,标记地雷位置if(!current.hasClass('flag')) current.addClass('bomb');}} else if(mineArray[x][y] > 0) {if(current.hasClass('flag')) { //若在无雷的方块上标记了小旗,如果周围的广场执行操作4时波及到此方块,则触发失败结束游戏current.addClass('wrong');if(inGame) endGame();} else {current.html(mineArray[x][y]).addClass('num' + mineArray[x][y]).removeClass('hidden'); //显示周边的地雷数量if(current.hasClass('check')) current.removeClass('check');if(inGame) countNum --;}} else {if(current.hasClass('flag')) { //同上current.addClass('wrong');if(inGame) endGame();} else {current.removeClass('hidden');if(current.hasClass('check')) current.removeClass('check');if(inGame) { //点击到周边无雷的方块时,自动揭开周围方块countNum --;var row = mineArray.length - 2, col = mineArray[0].length - 2;if(x > 1 && y > 1 && $('#b' + (x - 1) + '-' + (y - 1)).hasClass('hidden')) openBlock(x - 1, y - 1);if(x > 1 && $('#b' + (x - 1) + '-' + y).hasClass('hidden')) openBlock(x - 1, y);if(x > 1 && y < col && $('#b' + (x - 1) + '-' + (y + 1)).hasClass('hidden')) openBlock(x - 1, y + 1);if(y < col && $('#b' + x + '-' + (y + 1)).hasClass('hidden')) openBlock(x, y + 1);if(x < row && y < col && $('#b' + (x + 1) + '-' + (y + 1)).hasClass('hidden')) openBlock(x + 1, y + 1);if(x < row && $('#b' + (x + 1) + '-' + y).hasClass('hidden')) openBlock(x + 1, y);if(x < row && y > 1 && $('#b' + (x + 1) + '-' + (y - 1)).hasClass('hidden')) openBlock(x + 1, y - 1);if(y > 1 && $('#b' + x + '-' + (y - 1)).hasClass('hidden')) openBlock(x, y - 1);}}} } //揭开格子邻近确认无雷的方块 function openNearBlock(x, y) {var flagNum = 0, hiddenNum = 0;for(i = x - 1; i < x + 2; i ++) {for(j = y - 1; j < y + 2; j ++) {if(mineArray[i][j] != undefined) {if($('#b' + i + '-' + j).hasClass('flag')) flagNum ++; //统计方块周围的旗帜数和未揭开的方块数if($('#b' + i + '-' + j).hasClass('hidden')) hiddenNum ++;}}}if(flagNum == mineArray[x][y] && hiddenNum > flagNum) { //旗帜数和雷数相等且有未揭开方块且未插旗的方块时,则揭开它for(i = x - 1; i < x + 2; i ++) {for(j = y - 1; j < y + 2; j ++) {if(mineArray[i][j] >= 0 && $('#b' + i + '-' + j).hasClass('hidden')) openBlock(i, j);}}} } //计时 function timer(){if(inGame == 1) { //只在游戏进行中计时var now = new Date(),ms = now.getTime();$('#time').text(Math.ceil((ms - startTime) / 1000));if(inGame == 1) setTimeout(function() { timer(); }, 500);} else if(inGame == 2) {$('#time').text('0');} } //结束游戏 function endGame(isWin) {inGame = 0;for(var i = 1, row = mineArray.length - 1; i < row; i ++) {for(var j = 1, col = mineArray[0].length - 1; j < col; j ++) {if(isWin) {if($('#b' + i + '-' + j).hasClass('hidden') && !$('#b' + i + '-' + j).hasClass('flag')) $('#b' + i + '-' + j).addClass('flag');lastNum = 0;$('#lastnum').text(lastNum);} else {openBlock(i, j);}}}$('#warning').text(isWin ? 'You Win!' : 'You Lose!'); }
【HTML部分】
<div id="menu"><a href="javascript:;" οnclick="init(10,10,10);">初级</a><a href="javascript:;" οnclick="init(16,16,40);">中级</a><a href="javascript:;" οnclick="init(30,16,99);">高级</a><input type="checkbox" id="check" /><label for="check">是否使用标记(?)</label> </div> <div id="submenu">剩余雷数:<span id="lastnum"></span>时间:<span id="time"></span>秒<span id="warning"></span> </div> <div id="main"></div>
【CSS部分】
body{background:#fff;font-size:14px;} #submenu{display:none;} #warning{color:#ff0000;} #main{background:#ddd;border:1px solid #888;display:none;position:relative;} #main div{border:1px solid #888;font-weight:bold;height:19px;height:21px\9;line-height:18px;cursor:default;position:absolute;text-align:center;width:19px;width:21px\9;} .hidden{background:url(mine.gif) 0 0;} .flag{background:url(mine.gif) -19px 0;} .check{background:url(mine.gif) -38px 0;} .bomb{background:url(mine.gif) -57px 0;} .cbomb{background:url(mine.gif) -57px 0 #ff0000;} .wrong{background:url(mine.gif) -76px 0;} .num1{color:#0000ff;} .num2{color:#008000;} .num3{color:#ff0000;} .num4{color:#000080;} .num5{color:#800000;} .num6{color:#008080;} .num7{color:#000000;} .num8{color:#808080;}
最后是运行效果,点击下边的不同难度等级就可以开始游戏了~
因为和博客园网页代码冲突的原因,做了些小改动……
也分享自己做的JS扫雷小游戏相关推荐
- JS扫雷小游戏(DOM (html+css+js))
一:效果图: 二:资源 js扫雷小游戏源代码下载地址 js贪吃蛇小游戏链接 python小黄脸大战小游戏链接 vue高仿网易云音乐app 三:源代码: html部分: <!DOCTYPE htm ...
- c语言字符游动程序,C语言实现扫雷小游戏详解
本文实例为大家分享了C语言实现扫雷小游戏的具体代码,供大家参考,具体内容如下 一.实现功能 首先显示一个小菜单,选择是否玩游戏.当用户选择退出时,程序运行结束,当用户选择玩游戏时,将提示用户输入扫雷位 ...
- JAVA简单实现扫雷小游戏
JAVA简单实现扫雷小游戏 这两天学校外面来人教java基础,学习一下,自己试着做了一个扫雷小游戏,记录一下子学习过程.(我觉得自己不是很懂类和对象,基础没怎么看),敲出来的代码结构混乱,希望路过的大 ...
- 只用c语言不用图片的游戏,使用C语言实现扫雷小游戏
本文实例为大家分享了C语言实现扫雷小游戏的具体代码,供大家参考,具体内容如下 游戏规则 在一个9*9的地图上一共有十个雷,翻开所有不是雷的位置 游戏即为胜利, 如果踩到雷,游戏结束 设计思路 1.创建 ...
- 扫雷html5简单初级,纯原生JS用面向对象class方法实现简易扫雷小游戏
Demo介绍 纯原生js 实现 且用ES6语法class写的扫雷小游戏:布局为10*10的网格,随机生成10-20个雷. 左键点击扫雷.右键标记该地方有雷.该demo下载下来复制到html文件中直接可 ...
- 分享自己做的一个词典小软件
分享自己做的一个词典小软件 查词功能 词库管理 单词记忆学习 查词功能 模糊查询 历史查询记录 词库管理 分为单词和百科,单词未普通的单词,百科是可以自己任意调整格式的记录数据,如下面的静夜思 单词记 ...
- 纯原生JS用面向对象class方法实现简易扫雷小游戏
Demo介绍 纯原生js 实现 且用ES6语法class写的扫雷小游戏:布局为10*10的网格,随机生成10-20个雷. 左键点击扫雷.右键标记该地方有雷.该demo下载下来复制到html文件中直接可 ...
- html小游戏代码_研发实践:Mozilla分享如何开发一款WebVR小游戏
文章相关引用及参考:mozvr 本文来自Mozilla的Josh Marinacci (映维网 2019年02月06日)在倡导新技术时,我总是尝试采用现实世界开发者的方式,而对于WebVR,开发一款游 ...
- python玩扫雷_python实现扫雷小游戏
前面我们用python实现了贪吃蛇.坦克大战.飞船大战.五子棋等游戏 今天我们用python来实现一下扫雷游戏 本游戏代码量和源文件较多 可以从我的GitHub地址中获取 构建地雷区import ra ...
最新文章
- AngularJS中选择样式
- C# Keycode对照表
- 【Clion+Pycharm 网络编程】C++实现服务端,Python实现客户端
- php操作kafka
- PyTorch 多目标跟踪
- Springboot2Web原生组件注入
- nginx lnmp之nginx+php
- 互联网大佬打脸啪啪啪啪史
- 新办的卡为什么显示无服务器,为什么插入卡后显示无服务,有时有有时又没有?...
- [渝粤教育] 西南科技大学 现代数字系统设计 在线考试复习资料2021版
- python安装 Autodesk FBX 包
- 松鼠Ai辅助公校教育,开启智慧教育3.0
- VBoxGuestAdditions下载地址
- 零输入响应,零状态响应和完全响应
- 从Internet时间服务器获取标准格林尼治时间
- 减肥(2014.6.28 22:48)
- Python爬虫 - wallhaven任意页面下的壁纸批量下载
- mysql用int做时间戳存储,最大2147483647, 大限2038年
- ShardingSphere分库分表实战与核心原理
- 网站自动弹出QQ对话框
热门文章
- php7.0 cli,PHP-7.1 源代码学习:php-cli 启动流程
- java executebatch_JDBC批量执行executeBatch
- 粗虚线和细虚线_建筑图纸的细线,粗线,虚线表示什么
- 老手机能升级华为鸿蒙,华为正式发布鸿蒙2.0!实现手机、平板等多平台共用一套代码!...
- lesson2-python3数据类型
- 螺旋矩阵O(1)根据坐标求值
- 树分治树链剖分相关题目讨论
- ios系统中各种设置项的url链接
- 和菜鸟一起学c++之虚函数
- qt for 3520a