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 相关文章推荐
一个JS函数搞定网页标题(title)闪动效果
May 13 Javascript
js实现iframe跨页面调用函数的方法
Dec 13 Javascript
jQuery 3.0中存在问题及解决办法
Jul 15 Javascript
BootStrap日期控件在模态框中选择时间下拉菜单无效的原因及解决办法(火狐下不能点击)
Aug 18 Javascript
一篇看懂vuejs的状态管理神器 vuex状态管理模式
Apr 20 Javascript
JS实现非首屏图片延迟加载的示例
Jan 06 Javascript
vue-cli3.0 环境变量与模式配置方法
Nov 08 Javascript
常见的浏览器存储方式(cookie、localStorage、sessionStorage)
May 07 Javascript
JS代码简洁方式之函数方法详解
Jul 28 Javascript
Vue插槽_特殊特性slot,slot-scope与指令v-slot说明
Sep 04 Javascript
vant-ui组件调用Dialog弹窗异步关闭操作
Nov 04 Javascript
vue 实现click同时传入事件对象和自定义参数
Jan 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编写PDF文档生成器
2006/10/09 PHP
PHP JSON格式数据交互实例代码详解
2011/01/13 PHP
图片自动更新(说明)
2006/10/02 Javascript
js 编写规范
2010/03/03 Javascript
最短的IE判断代码
2011/03/13 Javascript
JS扩展类,克隆对象与混合类实例分析
2016/11/26 Javascript
wap手机端解决返回上一页的js实例
2016/12/08 Javascript
JS实现向iframe中表单传值的方法
2017/03/24 Javascript
详解nodejs express下使用redis管理session
2017/04/24 NodeJs
React进阶学习之组件的解耦之道
2017/08/07 Javascript
浅谈React中组件间抽象
2018/01/27 Javascript
Vue父子组件传值的一些坑
2020/09/16 Javascript
Openlayers绘制聚合标注
2020/09/28 Javascript
[01:15:45]DOTA2上海特级锦标赛B组小组赛#1 Alliance VS Spirit第一局
2016/02/26 DOTA
解决谷歌搜索技术文章时打不开网页问题的python脚本
2013/02/10 Python
python选择排序算法的实现代码
2013/11/21 Python
Python实现压缩与解压gzip大文件的方法
2016/09/18 Python
Python获取SQLite查询结果表列名的方法
2017/06/21 Python
Python使用pip安装pySerial串口通讯模块
2018/04/20 Python
TensorFlow用expand_dim()来增加维度的方法
2018/07/26 Python
如何在Python中实现goto语句的方法
2019/05/18 Python
Python 实现还原已撤回的微信消息
2019/06/18 Python
Pandas之ReIndex重新索引的实现
2019/06/25 Python
Django  ORM 练习题及答案
2019/07/19 Python
Cpython解释器中的GIL全局解释器锁
2020/11/09 Python
python读写数据读写csv文件(pandas用法)
2020/12/14 Python
英国皇家造币厂:The Royal Mint
2018/10/05 全球购物
机械电子工程专业推荐信范文
2013/11/20 职场文书
任命书格式
2014/06/05 职场文书
酒店辞职信怎么写
2015/02/27 职场文书
关于召开会议的通知
2015/04/15 职场文书
中小学教师继续教育心得体会
2016/01/19 职场文书
python opencv常用图形绘制方法(线段、矩形、圆形、椭圆、文本)
2021/04/12 Python
MySQL系列之十 MySQL事务隔离实现并发控制
2021/07/02 MySQL
Java 垃圾回收超详细讲解记忆集和卡表
2022/04/08 Java/Android
排查并解决MySQL生产库内存使用率高的报警
2022/04/11 MySQL