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 相关文章推荐
cnblogs csdn 代码运行框实现代码
Nov 02 Javascript
jquery插件制作 自增长输入框实现代码
Aug 17 jQuery
JS获取后台Cookies值的小例子
Mar 04 Javascript
node.js中的querystring.parse方法使用说明
Dec 10 Javascript
在IE8上JS实现combobox支持拼音检索功能
May 23 Javascript
通过网页查看JS源码中汉字显示乱码的解决方法
Oct 26 Javascript
Bootstrap简单表单显示学习笔记
Nov 15 Javascript
动手写一个angular版本的Message组件的方法
Dec 16 Javascript
详解jQuery中的isPlainObject()使用方法
Feb 27 jQuery
jQuery实现的点击按钮改变样式功能示例
Jul 21 jQuery
开源一个微信小程序仪表盘组件过程解析
Jul 30 Javascript
JavaScript实现串行请求的示例代码
Sep 14 Javascript
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脚本的10个技巧(5)
2006/10/09 PHP
关于使用coreseek并为其做分页的介绍
2013/06/21 PHP
浅析php学习的路线图
2013/07/10 PHP
php中使用base HTTP验证的方法
2015/04/20 PHP
Thinkphp单字母函数使用指南
2016/05/08 PHP
PDO::setAttribute讲解
2019/01/29 PHP
IE与Firefox下javascript getyear年份的兼容性写法
2007/12/20 Javascript
JavaScript与Div对层定位和移动获得坐标的实现代码
2010/09/08 Javascript
jQuery中使用了document和window哪些属性和方法小结
2011/09/13 Javascript
原生javascript实现获取指定元素下所有后代元素的方法
2014/10/28 Javascript
JS中的THIS和WINDOW.EVENT.SRCELEMENT详解
2015/05/25 Javascript
JS实现的点击表头排序功能示例
2017/03/27 Javascript
实例解析Vue.js下载方式及基本概念
2018/05/11 Javascript
让webpack+vue-cil项目不再自动打开浏览器的方法
2018/09/27 Javascript
说说如何利用 Node.js 代理解决跨域问题
2019/04/22 Javascript
10种JavaScript最常见的错误(小结)
2019/06/21 Javascript
JS性能优化实现方法及优点进行
2020/08/30 Javascript
Python中集合类型(set)学习小结
2015/01/28 Python
浅析python中的分片与截断序列
2016/08/09 Python
Python爬虫包BeautifulSoup实例(三)
2018/06/17 Python
selenium使用chrome浏览器测试(附chromedriver与chrome的对应关系表)
2018/11/29 Python
Python Pywavelet 小波阈值实例
2019/01/09 Python
python求最大值,不使用内置函数的实现方法
2019/07/09 Python
python+logging+yaml实现日志分割
2019/07/22 Python
wxpython绘制音频效果
2019/11/18 Python
Tensorflow与Keras自适应使用显存方式
2020/06/22 Python
详解CSS3弹性伸缩盒
2020/09/21 HTML / CSS
Timberland美国官网:全球领先的户外品牌
2016/08/15 全球购物
LN-CC英国:伦敦时尚生活的缩影
2019/09/01 全球购物
EJB与JAVA BEAN的区别
2016/08/29 面试题
小组合作学习反思
2014/02/18 职场文书
群众路线表态发言材料
2014/10/17 职场文书
王兆力在市委党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
幼师求职自荐信
2015/03/26 职场文书
毕业生爱心捐书倡议书
2015/04/27 职场文书
学校百日安全活动总结
2015/05/07 职场文书