脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js扫雷游戏

HTML+JavaScript实现扫雷小游戏

 更新时间：2019年09月30日 07:26:37   作者：_干柿鬼鲛  
这篇文章主要为大家详细介绍了HTML+JavaScript实现扫雷小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

工具：Sublime Text / Dreamweaver /Hbuilder

<!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（扫雷）&diams;</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("&hearts;","0","&hearts;","&hearts;","&hearts;","&hearts;");
 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="&nbsp;";


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

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • ES11屡试不爽的新特性,你用上了几个

    ES11屡试不爽的新特性,你用上了几个

    这篇文章主要介绍了ES11屡试不爽的新特性,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-10-10
  • javascript实现时间日期的格式化的方法汇总

    javascript实现时间日期的格式化的方法汇总

    这篇文章主要介绍了javascript实现时间日期的格式化的方法汇总，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-08-08
  • vue(javaScript)操作字符串的一些常用方法总结

    vue(javaScript)操作字符串的一些常用方法总结

    在平时前端开发中,我们不难发现经常会用到字符串操作,这篇文章主要给大家介绍了关于vue(javaScript)操作字符串的一些常用方法的相关资料,需要的朋友可以参考下
    2024-01-01
  • JavaScript实现点击切换验证码及校验

    JavaScript实现点击切换验证码及校验

    这篇文章主要为大家详细介绍了JavaScript实现点击切换验证码及校验，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-01-01
  • ztree加载完成后显示勾选节点的实现代码

    ztree加载完成后显示勾选节点的实现代码

    zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。这篇文章主要介绍了ztree加载完成后显示勾选节点的实现代码 ,需要的朋友可以参考下
    2018-10-10
  • 微信小程序实现授权登录之获取用户信息

    微信小程序实现授权登录之获取用户信息

    这篇文章主要介绍了微信小程序实现授权登录之获取用户信息，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-05-05
  • 获取当前点击按钮的id用this.id实现

    获取当前点击按钮的id用this.id实现

    这篇文章主要介绍了获取当前点击按钮的id的方法，,需要的朋友可以参考下
    2014-03-03
  • Bootstrap所支持的表单控件实例详解

    Bootstrap所支持的表单控件实例详解

    Bootstrap 支持最常见的表单控件，主要是 input、textarea、checkbox、radio 和 select。本文通过实例代码给大家讲解Bootstrap所支持的表单控件，感兴趣的朋友一起学习吧
    2016-05-05
  • js实现简单鼠标跟随效果的方法

    js实现简单鼠标跟随效果的方法

    这篇文章主要介绍了js实现简单鼠标跟随效果的方法,涉及javascript鼠标事件与坐标获取等相关技巧,非常具有实用价值,需要的朋友可以参考下
    2015-04-04
  • AlertBox 弹出层信息提示框效果实现步骤

    AlertBox 弹出层信息提示框效果实现步骤

    弹出层就是相对文档或窗口定位的一个层，一般用来显示提示信息、广告等内容，还可以配合覆盖层来锁定页面。
    2010-10-10

最新评论