HTML+JavaScript实现扫雷小游戏


Posted in Javascript onSeptember 30, 2019

本文实例为大家分享了JavaScript实现扫雷小游戏的具体代码,供大家参考,具体内容如下

工具:Sublime Text / Dreamweaver /Hbuilder

HTML+JavaScript实现扫雷小游戏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>SaoLei</title>
<style type="text/css">
table
{
-webkit-touch-callout: none; /* iOS Safari */

-webkit-user-select: none; /* Chrome/Safari/Opera */

-khtml-user-select: none; /* Konqueror */

-moz-user-select: none; /* Firefox */

-ms-user-select: none; /* Internet Explorer/Edge */

user-select: none; /* Non-prefixed version, currently not supported by any browser */
}
</style>
</head>

<body>
<center style="margin:150px auto;">
<h2 style="font-family:Comic Sans Ms;">Mine Clearance(扫雷)♦</h2>
<p>请设置行和列开始游戏</p>
<p>游戏难度:<select id="level" onchange="changelevel()"><option>小白级</option><option>大神级</option></select></p>
<p id="select_level"></p>
行: <input type="text" id="rows"> 
列: <input type="text" id="cols"> 
<button id="add" onClick="add()">PlayGame</button>
<br>
<p id="tips"></p>
<p id="leiNum"></p>
<table border="2" id="tab" ></table>
<p id="GScore"></p>

</center>

<script type="text/javascript">

 var lei =new Array("♥","0","♥","♥","♥","♥");
 var tab =$("tab");
 var GScore=$("GScore");
 var score=0;
 var tip=$("tips");
 var time;
 var i=3;
 var row =$("rows");
 var col =$("cols");
 var Total=0;
 var lei_count =0;
 var levels= $("level");
 var select_level=$("select_level");

 function add()
 {
 clear();
 tip.innerHTML="游戏开始";
 score=0;
 GScore.innerHTML="当前得分:"+score;
 lei_count=0;
 tab.innerHTML="";
 Total=0;
 Total=parseInt(row.value)*parseInt(col.value);
 for(var i=0;i<row.value;i++)
 {
 var newTr =document.createElement("tr");
 newTr.id=i;//
 newTr.style.background="black";
 for(var j=0;j<col.value;j++)
 {//
 var rand=parseInt(Math.random()*lei.length);
 newTr.innerHTML+="<td ><button id='"+i+","+j+"' style ='width:25px;height:25px;background:green; color:green; border:1px blue solid' οnclick='myclick(this)' οnmοuseοver='changecolor(this)' οnmοuseοut='resetcolor(this)'>"+lei[rand]+"</button></td>";
 if(lei[rand]=="0")
 {
 lei_count++;
 }
 }
 tab.appendChild(newTr);
 }
 Total=Total-lei_count;
 var leinum =$("leiNum");
 leinum.innerHTML="本局雷数:"+lei_count;
 }
 
 function $(id)
 {
 return document.getElementById(id);
 }
 
 function change(obj)
 {
 
 if(obj.innerHTML=="0")
 {
 time=setInterval(times,1000);
 obj.style.backgroundColor="red";
 obj.innerHTML="?";
 alert("Game Over!");
 
 }else
 {
 obj.style.backgroundColor="white";
 score=score+1;
 }
 GScore.innerHTML="当前得分:"+score;
 }
 
 function myclick(obj)
 {
 if(obj.style.background!="white")
 {
 change(obj);
 check(obj);
 Total--;
 if(Total==0)
 {
 alert("你赢了!总分:"+score);
 }
 
 }
 }
 
 
 function changecolor(obj)
 {
 obj.style.border="1px red solid ";
 }
 function resetcolor(obj)
 {
 obj.style.border="1px blue solid";
 }
 function times()
 {
 
 tip.innerHTML="游戏结束,"+i+"秒后重新开始游戏";
 if(i==0)
 {
 add();
 }
 i--;
 }
 function clear()
 {
 clearInterval(time);
 i=3;
 }
 
 function check(obj)
 {
 var index=0;
 var len =obj.id.split(",");
 index=Number(len[1]);//下标
 var boom =0;

 //左节点
 if(index-1>=0)
 {
 if(obj.parentNode.previousSibling.childNodes[0].innerHTML=="0")
 {
 boom++;
 if(levels.value=="小白级")
 obj.parentNode.previousSibling.childNodes[0].style.background="black";
 }
 }
 //右节点
 if(index!=Number(col.value)-1){
 if(obj.parentNode.nextSibling.childNodes[0].innerHTML=="0")
 {
 boom++;
 if(levels.value=="小白级")
 obj.parentNode.nextSibling.childNodes[0].style.background="black";
 }
 }
 //上节点
 if(obj.parentNode.parentNode.id!="0"){
 if(obj.parentNode.parentNode.previousSibling.childNodes[index].childNodes[0].innerHTML=="0")
 {
 boom++;
 if(levels.value=="小白级")
 obj.parentNode.parentNode.previousSibling.childNodes[index].childNodes[0].style.background="black";
 }
 }
 //下节点
 if(obj.parentNode.parentNode.id!=Number(row.value)-1){
 if(obj.parentNode.parentNode.nextSibling.childNodes[index].childNodes[0].innerHTML=="0")
 {
 boom++;
 if(levels.value=="小白级")
 obj.parentNode.parentNode.nextSibling.childNodes[index].childNodes[0].style.background="black";
 }
 }
 
 //左上节点
 if(index-1>=0 && obj.parentNode.parentNode.id!="0"){
 if(obj.parentNode.parentNode.previousSibling.childNodes[index-1].childNodes[0].innerHTML=="0")
 {
 boom++;
 if(levels.value=="小白级")
 obj.parentNode.parentNode.previousSibling.childNodes[index-1].childNodes[0].style.background="black";
 }
 }
 
 //右上节点
 if(index!=Number(col.value)-1 && obj.parentNode.parentNode.id!="0"){
 if(obj.parentNode.parentNode.previousSibling.childNodes[index+1].childNodes[0].innerHTML=="0")
 {
 boom++;
 if(levels.value=="小白级")
 obj.parentNode.parentNode.previousSibling.childNodes[index+1].childNodes[0].style.background="black";
 }
 }
 //左下节点
 if(index-1>=0 && obj.parentNode.parentNode.id!=Number(row.value)-1){
 if(obj.parentNode.parentNode.nextSibling.childNodes[index-1].childNodes[0].innerHTML=="0")
 {
 boom++;
 if(levels.value=="小白级")
 obj.parentNode.parentNode.nextSibling.childNodes[index-1].childNodes[0].style.background="black";
 }
 }
 //右下节点
 if(index!=Number(col.value)-1 && obj.parentNode.parentNode.id!=Number(row.value)-1){
 if(obj.parentNode.parentNode.nextSibling.childNodes[index+1].childNodes[0].innerHTML=="0")
 {
 boom++;
 if(levels.value=="小白级")
 obj.parentNode.parentNode.nextSibling.childNodes[index+1].childNodes[0].style.background="black";
 }
 }
 
 if(boom>0)
 obj.innerHTML=boom;
else
obj.innerHTML=" ";


 }
 
 
 function changelevel()
 {
 var info=levels.value;
 if(levels.value=="小白级")
 {
 info+=" (自动排雷)"+"?";
 }
 else
 {
 info+="???";
 }

 select_level.innerHTML="你已选择:"+info;
 }
 
 window.onload=changelevel;

 </script>
 }
 
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery 1.42 checkbox 全选和反选代码
Mar 27 Javascript
Jquery 切换不同图片示例代码
Dec 05 Javascript
jQuery中parent()方法用法实例
Jan 07 Javascript
jquery获取文档高度和窗口高度汇总
Jan 25 Javascript
js实现上传图片及时预览
May 07 Javascript
微信小程序 this和that详解及简单实例
Feb 13 Javascript
浅谈Node框架接入ELK实践总结
Feb 22 Javascript
基于JavaScript伪随机正态分布代码实例
Nov 07 Javascript
JS co 函数库的含义和用法实例总结
Apr 08 Javascript
uniapp微信小程序:key失效的解决方法
Jan 20 Javascript
js正则匹配markdown里的图片标签的实现
Mar 24 Javascript
vue+element ui实现锚点定位
Jun 29 Vue.js
React+Redux实现简单的待办事项列表ToDoList
Sep 29 #Javascript
JS回调函数简单易懂的入门实例分析
Sep 29 #Javascript
在vue中根据光标的显示与消失实现下拉列表
Sep 29 #Javascript
js 下拉菜单点击旁边收起实现(踩坑记)
Sep 29 #Javascript
微信小程序 行的删除和增加操作实现详解
Sep 29 #Javascript
微信小程序 轮播图实现原理及优化详解
Sep 29 #Javascript
为nuxt项目写一个面包屑cli工具实现自动生成页面与面包屑配置
Sep 29 #Javascript
You might like
那些年一起学习的PHP(二)
2012/03/21 PHP
PHP中OpenSSL加密问题整理
2017/12/14 PHP
jQuery对表单的操作代码集合
2011/04/06 Javascript
jQuery.clean使用方法及思路分析
2013/01/07 Javascript
js操作iframe兼容各种主流浏览器示例代码
2013/07/22 Javascript
从jquery的过滤器.filter()方法想到的
2013/09/29 Javascript
解析JavaScript中的不可见数据类型
2013/12/02 Javascript
jquery查找tr td 示例模拟
2014/05/08 Javascript
node.js中使用node-schedule实现定时任务实例
2014/06/03 Javascript
深入浅出分析javaScript中this用法
2015/05/09 Javascript
不能不知道的10个angularjs英文学习网站
2016/03/23 Javascript
URL的参数中有加号传值变为空格的问题(URL特殊字符)
2016/11/04 Javascript
JavaScript构建自己的对象示例
2016/11/29 Javascript
bootstrap laydate日期组件使用详解
2017/01/04 Javascript
详解Jquery EasyUI tree 的异步加载(遍历指定文件夹,根据文件夹内的文件生成tree)
2017/02/11 Javascript
深入研究jQuery图片懒加载 lazyload.js使用方法
2017/08/16 jQuery
Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法
2017/10/24 Javascript
vue router动态路由下让每个子路由都是独立组件的解决方案
2018/04/24 Javascript
通过实例学习React中事件节流防抖
2019/06/17 Javascript
vue使用axios实现excel文件下载的功能
2020/07/16 Javascript
js实现3D粒子酷炫动态旋转特效
2020/09/13 Javascript
[06:21]2014DOTA2国际邀请赛 庆祝VG首阶段领跑;B叔为挣牛排半夜整理情报
2014/07/13 DOTA
浅谈Python实现2种文件复制的方法
2018/01/19 Python
Python之lambda匿名函数及map和filter的用法
2019/03/05 Python
如何利用pygame实现简单的五子棋游戏
2019/12/29 Python
HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能
2018/01/03 HTML / CSS
美国在线纱线商店:Darn Good Yarn
2019/03/20 全球购物
财务会计专业推荐信
2013/11/30 职场文书
运动会广播稿300字
2014/01/10 职场文书
生物科学专业职业规划书范文
2014/02/11 职场文书
三好学生演讲稿范文
2014/04/26 职场文书
党支部工作总结2015
2015/04/01 职场文书
小学生光盘行动倡议书
2015/04/28 职场文书
保险公司反洗钱宣传活动总结
2015/05/08 职场文书
英语专业毕业论文答辩开场白
2015/05/27 职场文书
2015年党建工作汇报材料
2015/06/25 职场文书