JavaScript
搜索
分类

HTML+JavaScript实现扫雷小游戏

作者：_干柿鬼鲛 时间：2024-04-17 10:03:58　

本文实例为大家分享了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（扫雷）&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>

来源：https://blog.csdn.net/Guan_Java/article/details/86527060

标签：HTML,js,扫雷
0
投稿

猜你喜欢

  • Python Web开发模板引擎优缺点总结

    2023-08-02 22:36:29

  • Python二进制数据结构Struct的具体使用

    2022-07-10 00:01:59

  • Python3爬虫中关于中文分词的详解

    2023-08-12 23:10:28

  • Python中常用的内置函数

    2023-01-06 08:15:30

  • 在Python函数中输入任意数量参数的实例

    2022-07-09 04:58:08

  • Python运行出现DeprecationWarning的问题及解决

    2022-01-14 05:26:23

  • Python 使用csv库处理CSV文件的方法

    2023-03-16 21:37:24

  • 在Django中管理Users和Permissions以及Groups的方法

    2023-11-03 03:10:21

  • 使用Python绘制三种概率曲线详解

    2022-07-27 00:21:01

  • SQL执行步骤的具体分析

    2024-01-17 15:47:54

  • python实现差分隐私Laplace机制详解

    2022-01-08 16:37:41

  • Django框架安装及项目创建过程解析

    2022-09-20 12:55:45

  • python检测空间储存剩余大小和指定文件夹内存占用的实例

    2022-10-30 06:52:51

  • 如何在页面中对不同的数据进行相同的处理？

    2010-06-26 12:30:00

  • ajax取消挂起请求的处理方法

    2023-11-20 23:41:53

  • SQL语句导入导出大全

    2024-01-25 10:37:39

  • python 爬虫 实现增量去重和定时爬取实例

    2022-01-26 01:01:37

  • 详解python如何通过numpy数组处理图像

    2023-04-07 03:53:20

  • ajax+node+request爬取网络图片的实例(宅男福利)

    2024-05-05 09:21:11

  • python pycharm最新版本激活码(永久有效)附python安装教程

    2022-08-16 14:08:56
    • asp之家 网络编程 m.aspxhome.com