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（扫雷）♦</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 扫雷游戏
"); for (var i = 0; i "); for(var j = 0; j "); buffer.append(" "); } buffer.append(" "); var workarea = document.getElementById("workarea"); workarea.innerHTML = buffer.toString(); mine(); // lay mines at the
-
js实现扫雷小程序的示例代码
初学javascript,写了一个扫雷程序练练手! 扫雷规则及功能 扫雷想必大家都不陌生,就是windows上点击排雷的小游戏,它的主要规则有 1.左键点击显示当前格子是否为雷,如果为雷的话,GameOver啦,如果不是雷的话,这个格子会显示周围八个格子内的雷数量. 2.鼠标右键标记,标记可能的雷,标记了之后取消需要再次右键点击该格子,左键无效果. 3.鼠标中键(滚轮)按下后,快捷扫雷(如果周围雷数和未被标记且未被翻开的格子相等,会将这些格子一并翻开) 主要功能基本完全复刻了windows7扫雷
-
使用纯javascript实现经典扫雷游戏
很久以前写的 当时都没写注释的 刚加上了 (尼玛,好多自己都不认识了 ... ) 不足的地方就是本来想写个游戏排名的统计的,等有空了再加上(好像每次都这么说 然后就等好久好久...) 还有就是没有实现:点击第一个格子不能是雷的功能 <style> ul{padding:0;list-style:none;} #mine{overflow:hidden;width:30px;height:30px;border:1px solid #966;} #mine li{float:left;width
-
JavaScript制作windows经典扫雷小游戏
代码其实很简单,这里就不多废话了 <html> <head> <meta http-equiv="Content-Language" content="zh-cn"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>扫雷-JavaScript Mine Sweeper
-
JavaScript版经典游戏之扫雷游戏完整示例【附demo源码下载】
本文实例讲述了JavaScript扫雷游戏.分享给大家供大家参考,具体如下: 翻出年初写的游戏贴上来,扫雷相信大家都玩过,先上图: 源码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.or
-
js版扫雷实现代码 原理不错
效果图:以下代码复制粘贴到记事本后保存为.html文件,打开后会出现提示,右击允许即可: 寻雷-----by 魅月 var data=new Array( [0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0
-
分享自己用JS做的扫雷小游戏
引用了jQuery,节省了很多鼠标点击上的判断.界面显然都是照搬Windows的扫雷啦,详细的内容注释里都有,我就不啰嗦啦~ 先上截图~ 引用了jQuery,节省了很多鼠标点击上的判断 界面显然都是照搬Windows的扫雷啦 详细的内容注释里都有,我就不啰嗦啦~ JS部分 var mineArray, //地雷数组 lastNum, //剩余雷数 countNum, //未被揭开的方块数 inGame = 0, //游戏状态,0为结束,1为进行中,2为初始化完毕但未开始 startTime; /
-
HTML+JavaScript实现扫雷小游戏
本文实例为大家分享了JavaScript实现扫雷小游戏的具体代码,供大家参考,具体内容如下 工具:Sublime Text / Dreamweaver /Hbuilder <!doctype html> <html> <head> <meta charset="utf-8"> <title>SaoLei</title> <style type="text/css"> table {
-
JavaScript实现扫雷小游戏
本文实例为大家分享了JavaScript实现扫雷小游戏的具体代码,供大家参考,具体内容如下 先说大体思路,下面放代码 思路: 1产生指定数量的地雷2计算方块周围的地雷3点击地雷结束4点击地雷周边显示地雷个数5点击空白块,消除所有相连的空白块6游戏主体已经完成了.剩下就是完善一些小细节,例如胜利判断 ,失败露出苦瓜脸 ,难度切换,新游戏按钮 等等… 首先是html+css的代码 <!DOCTYPE html> <html> <head> <meta charse
-
C语言实现扫雷小游戏（适合初学者）
扫雷小游戏作为初学c语言的小白有很大的帮助,其中用到了函数的定义,函数的声明,循环语句,数组思想等等知识,对于代码理解和设计代码思路有很大的帮助,本文就详细介绍了代码的各个步骤和运行结果.希望给到和我一样的小白一点帮助. //game.h头文件 #include<stdio.h> #include<stdlib.h> #include<time.h> #define ROW 9//定义了界面的长宽,可以直更改ROW,COL的值,避免了程序中数字重复出现 #define
-
C语言实现简易版扫雷小游戏
本文实例为大家分享了C语言实现简易版扫雷的具体代码,供大家参考,具体内容如下 声明 本次扫雷小游戏用多文件来编写.首先,要自定义的一个头文件 mine.h,里面有扫雷程序里面所需要的头文件.常量和所有函数的声明.其次,创建主函数 test.c,用自己喜欢的方式构建一个游戏的框架,最后,创建自定义函数 mine.c,编写各项功能. 设计思路 1.先写主函数,理清整个游戏流程. int main() { int quit = 0; do{ int select = 0; Menu(); scanf(
-
C语言简单实现扫雷小游戏
本文实例为大家分享了C语言简单实现扫雷小游戏 的具体代码,供大家参考,具体内容如下 游戏规则: 以9*9棋盘为例,棋盘上随机分布着10个地雷,玩家在棋盘上进行点击,如果被点击的格子是地雷,则玩家被炸"死",游戏结束:如果被点击的格子上没有地雷,与被点击的格子相邻的格子(被点击格子的上下左右还有斜向,共八个格子)有地雷,则在被点击的格子上显示这些地雷的总数,如果与被点击的格子相邻的八个格子都没有地雷,则棋盘自动展开,直到与展开的格子相邻的格子有地雷才停止.此时最后被展开的格子显示其相邻格
-
C++实现简单扫雷小游戏
本文实例为大家分享了C++实现简单扫雷小游戏的具体代码,供大家参考,具体内容如下 头文件Mine_Sweep.h #include <iostream> #include <ctime> #include <cstdlib> #include <algorithm> #include <queue> #include <Windows.h> using namespace std; typedef pair<int, int&g
-
C语言实现简单的扫雷小游戏
本文实例为大家分享了C语言实现扫雷小游戏的具体代码,供大家参考,具体内容如下 在编写扫雷小游戏之前,第一,我们应该列出我们想要实现的扫雷小游戏的功能: 1.显示选中的坐标周围的雷的个数. 2.保证第一次选中的坐标不是雷. 3.选中的坐标周围8个格子中没有雷,则展开. 第二,我们应该明白我们需要两个棋盘来实现扫雷游戏:一个棋盘用来展示给玩家,初始界面全为" * " (未翻开的格子),这个页面就是我们常见的扫雷页面.另一个棋盘用来给编写者看,棋盘内只有字符'1'和字符'0' .'1'代表雷
-
C语言实现控制台扫雷小游戏
C语言实现控制台"扫雷"小游戏 根据以往的游戏经验,我们能首先可以确定扫雷游戏胜利的规则是:翻开所有不是雷的区域才能算是胜利. 接下来我们需要确定整个程序的设计思路: 1.首先,我们定义两个9*9的二维数还是未翻开的状态组.第一个数组用来表示雷区地图的展开情况,即每个素组元素的位置的状态是处于展开状态还是未展开状态,我们命名为showMap().第二个数组我们用来表示地雷的分布情况,素组中的每个元素位置都被标记为是否为地雷,我们命名为minMap(). 2.初始化两个地图,并将地图打印
-
Android实现扫雷小游戏
本文实例为大家分享了Android实现扫雷小游戏的具体代码,供大家参考,具体内容如下 先看效果图: 初始游戏界面: 翻开块和标记块界面: 游戏结束界面: 菜单界面: 更换难度界面: 查看游戏记录界面: 代码分析 Block.java 这部分代码实现的是游戏界面的板块 设置四个变量来记录当前块是否被翻开,当前块是否是地雷,是否把当前快标记为地雷(也就是插旗子),当前块周围的地雷数量. 关键部分代码: //设置翻开状态 public void setNumberOfSurroundingMines(