JS实现扫雷游戏（源代码带注释）
运行结果：
超级简单，下面直接下面贴上源代码，一共两个文件 扫雷.html 和 saolei.js
扫雷.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>扫雷</title><style>body {margin: 0;}#map {width: 500px;height: 500px;background-color: aquamarine;/* 设置居中1 *//* position: absolute;left: calc(50% - 250px); *//* 设置居中2，与width搭配使用 */margin: 20px auto;}/* #map button 选择所有子孙*//* 只选第一层 */#map>button {width: 50px;height: 50px;background-color: pink;color: aliceblue;float: left;border: 1px solid white;}#bulei {width: 100px;height: 50px;background-color:blueviolet;position: relative;left: calc(50% - 50px);}#center {width: 1200px;margin: 0 auto;}#tnum>span{width: 100px;/* margin: 10px auto; */position: relative;left: calc(50% - 50px);color: rgb(46, 95, 78);}</style>
</head>
<body><div id="center"><div id="map"></div><div id="tnum"><span>通过数✅：0</span></div><button id="bulei" onclick="bulei()">Start</button><!-- <button id="restart" onclick="restart()">Restart</button> --></div><!-- js文件应引入在body下方 --><script src="./saolei.js"></script>
</body>
</html>saolei.js
// 9 代表未点击
// 0-8 代表周围雷数
// * 代表雷
// 返回一个二维数组
function getMap (row,col){var mapArray = [];for( let hang = 1 ; hang <= row ; hang++){let smallArray = [];for( lie = 1 ; lie <= col ; lie++){smallArray.push("9")}mapArray.push(smallArray);}// console.log(mapArray);return mapArray;
}
var gameMap = getMap(10,10);// 初始化————生成一个10x10的还未布雷的地图
var tnum = 0; // 正确数。正确数 = 用户已点击的非炸弹方块数
var leinum = 0; // 雷数
// 当tnum=100-leinum 便可以判定用户通关// 展示已经布雷的地图
function showMap(tempMapArr){var domStr = `` ;for(let i = 0; i <= tempMapArr.length-1 ; i++){for(let j = 0; j <= tempMapArr[i].length-1 ;j++){// 对于初始的方块我们都选择隐藏其真正的值if(tempMapArr[i][j]=="9" || tempMapArr[i][j]=="*"){ domStr += `<button onclick = "game(${i},${j})">
JS实现扫雷游戏（源代码带注释）相关推荐
- Python扫雷游戏源代码及图片素材
Python扫雷游戏源代码.源程序共有两个文件及一个资源包:main.py及mineblock.py,资源包请前往百度网盘下载, https://pan.baidu.com/s/1u-qsJhAaCJ ...
- c语言扫雷源代码简单版,C语言扫雷游戏源代码
C语言扫雷游戏源代码 /* 模拟扫雷游戏 */ #include #include #include #include #include #include #include union REGS re ...
- 原生js实现扫雷游戏
展示页面:https://shalltears.github.io/sweep-Mine/ : 源码下载页面:https://download.csdn.net/download/zmdmwh/108 ...
- java版扫雷游戏源代码
package com.bomb.UI; import javax.swing.JButton; import java.awt.*; import javax.swing.*; import jav ...
- html扫雷源码原理,js实现扫雷源代码
经过一段时间学习,对javascript有了一个初步的了解自己制作了一个扫雷,源代码+详细注释放在后面,先看下效果图. 初始化界面: 游戏界面: 难易程度切换: 游戏结束: 思路 采用构造函数的形式进 ...
- C语言入门项目——扫雷游戏（ege图形库+codeblocks）
扫雷游戏适合C练手,会C基本语法就可以尝试.需要导入ege图形库(文章后半部分写了ege如何导入codeblocks,以及我用到的ege函数) 一.先介绍如何将ege图形库导入codeblocks: ...
- java扫雷具有win7_Win7系统自带扫雷游戏打不开的解决方法
现如今很多游戏玩机都喜欢玩英雄联盟等这些大型网络游戏,但是win7 64位系统自带扫雷游戏也是有人玩的,在空闲无聊或无网络的时候偶尔玩玩该游戏还是不错的选择.细心的用户发现Win7系统自带扫雷游戏打不 ...
- VC系统扫雷游戏外挂源代码程序下载（转帖
VC系统扫雷游戏外挂源代码程序下载(转帖) 2008-03-04 10:25 经过了多次测试写出了历史上第一个有点意义的MFC程序.效果差强人意.^_^ CODE: // CrackWinmineDl ...
- c语言编写数据存储的游戏,c语言经典小程序和c语言编写的小游戏带注释(自动保存的).doc...
c语言经典小程序和c语言编写的小游戏带注释(自动保存的) 1.写一个定时?关机的小程?序,可以立即关?闭计算机,也可以一段?时间后关闭?计算机. #inclu?de #inclu?de #inclu? ...
最新文章
- 华为副总裁因家庭原因提出辞职…… 任正非：你可以离婚啊！
- python3爬虫入门教程-Python3爬虫学习入门教程
- 步步为营-77-Ajax简介
- 一文读懂服务器centos7.0安装指导指南（详细）
- vs2015 vs2017 编译zlib库
- 从王者荣耀里我学会的前端新手指引
- linux关于子网掩码函数,Linux 子网掩码计算, 二进制十进制互相转换
- 如何将散乱的css代码规范化、格式化
- Xshell 5 免费版本安装过程
- 国科大学习资料--机器人学导论（张正涛）--2014年期末考试试卷(含答案)
- matlab 动态面板数据分析,MATLAB空间面板数据模型操作简介 空间面板数据模型
- Nginx配置防盗链和内核参数优化
- E20-591考试必备资料分享
- SpringCloud-Netflix-04-Eureka 注册中心
- 2021年中式面点师（中级）及中式面点师（中级）实操考试视频
- 怎么在笔记中加入音频文件？
- 怎样进行两台电脑之间的数据传输？
- 微生物组-宏基因组分析(线上/线下同时开课，2021.11)
- 惊奇的发现，毕加索会是个好的程序员
- .bxl文件导入Altium Designer的方法，及错误解决
热门文章