一步步教你使用JavaScript打造一个扫雷游戏

2024-10-03 03:22:25

前言

扫雷大家都玩过，今天我们就是用JavaScript来打造扫雷游戏。废话不多说，直接看下效果;

上图是失败后的结果。

一、思路分析

我们新建一个首页,在首页放置一个点击开始游戏的按钮，动态生成100个小格，即100div;然后通过点击div进行扫雷操作，然后扫雷成功或者失败显示对应的结果;

二、静态页面搭建

2.1 结构层

<body>
    <div class="wrapper">
        <div class="btn" id="btn"></div>  <!-- 开始游戏按钮-->
        <div class="box" id="box"></div>  <!-- 存放小雷的div-->
        <div class="flagBox" id="flagBox"> <!-- 游戏结束才显示的当前雷数的div-->
            当前剩余雷数：
            <span id="score">10</span>
        </div>
        <div class="alertBox" id="alertBox">  <!-- Game over弹出的框（窗口）-->
            <div class="alertImg" id="alertImg">
                <div class="close" id="close"></div>
            </div>
        </div>
    </div>
</body>

2.2 样式层

清楚默认边距

*{
    margin:0;
    padding:0;
}

页面最大div

.wrapper {
    width:100%;
    height:1000px;
    position: fixed;
    top:0;
    left:0;
    background-image: url('img/bg.jpg');
    background-size: 100% 100%;
}

效果如下：

开始游戏按钮

.btn{
    height:140px;
    width:170px;
    position:absolute;
    left:50px;
    background-image: url('img/startGame.png');
    background-size: 100% 100%;
    cursor: pointer;
}

储存雷的大div

.box{
    height:500px;
    width:500px;
    transform: perspective(800px) rotateX(45deg);
    margin:20px auto;
    border-top:1px solid #B25F27;
    border-left:1px solid #B25F27;
    box-shadow:  5px 5px 5px rgba(0,0,0,0.3);
    display:none; /* 先设置为none,开始游戏后显示block */
}

每一个方块的小div(一共100个)

.block{
    width:49px;
    height:49px;
    border-right:1px solid #B25F27;
    border-bottom:1px solid #B25F27;
    box-shadow: 0 0 4px #333 inset;
    background-image: url('img/cao.jpg');
    float: left;
}

当前所剩雷数

.flagBox{
    position:absolute;
    top:50px;
    left:50%;
    width:200px;
    height:50px;
    margin-left:-100px;
    color:#333;
    font-size:20px;
    font-weight: bolder;
    display:none; /* 先设置为none,开始游戏后显示block */
}

Game Over

.alertBox{
    display:none; /* 先设置为none,开始结束显示block */
    position:absolute;
    width:100%;
    height:100%;
    left:0;
    top:0;
    background-color: rgba(0,0,0,0.2);
}

游戏结束弹出窗口右上角的X

.close{
    position:absolute;
    right:0;
    top:0;
    height:40px;
    width:40px;
    background-image: url('img/closeBtn.png');
    background-size: 100% 100%;
    cursor: pointer;
}

三、js页面交互

3.1 获取元素及变量初始化

var startBtn = document.getElementById('btn');
var box = document.getElementById('box');
var flagBox = document.getElementById('flagBox');
var alertBox = document.getElementById('alertBox');
var alertImg = document.getElementById('alertImg');
var closeBtn = document.getElementById('close');
var score = document.getElementById('score');
// 先声明变量，但是不初始化
var minesNum;
var mineOver;
var block;
var mineMap = [];
var startGameBool = true;

3.2 10个雷的初始化设置

function init() {
    minesNum = 10;
    mineOver = 10;
    score.innerHTML = mineOver;

    for (var i = 0; i < 10; i++) { // 双层循环 10 * 10 个div
        for (var j = 0; j < 10; j++) {
            var con = document.createElement('div');
            con.classList.add('block'); // 给创建出来的div添加类名 block
            con.setAttribute('id', i + '-' + j);
            box.appendChild(con);
            mineMap.push({ mine: 0 });
        }
    }
    block = document.getElementsByClassName('block');
    while (minesNum) { // 创建一个10次的循环，即设置10个雷
        var mineIndex = Math.floor(Math.random() * 100);
        if (mineMap[mineIndex].mine === 0) {
            mineMap[mineIndex].mine = 1;
            block[mineIndex].classList.add('isLei'); // 10个雷有小div的block类属性，还有自己的属性，isLei
            minesNum--;
        }
    }
}

3.3 游戏开始事件封装

function bindEvent() {
    startBtn.onclick = function () { // 开始按钮点击事件
        if(startGameBool){
            box.style.display = 'block';
            flagBox.style.display = 'block';
            init();
            startGameBool = false;
        }
    }
    box.oncontextmenu = function () {
        return false;
    }
    box.onmousedown = function (e) { // 小div鼠标按下事件封装
        var event = e.target;
        if (e.which == 1) { //Netscape/Firefox/Opera中不支持 window.event.keyCode,需要用event.which代替
            leftClick(event);
        } else if (e.which == 3) {
            rightClick(event);
        }
    }
    closeBtn.onclick = function () { // 游戏结束，弹出game over窗口的关闭按钮事件封装
        alertBox.style.display = 'none';
        flagBox.style.display = 'none';
        box.style.display = 'none';
        box.innerHTML = '';
        startGameBool = true;
    }
}

3.4 核心事件函数封装

leftClick 没有雷 --> 显示数字(代表以当前小格为中心周围8个格的雷数)扩散(当前周围八个格没有雷) 有雷 --> game Over

function leftClick(dom) {
    if(dom.classList.contains('flag')){
        return;
    }
    var isLei = document.getElementsByClassName('isLei'); // 获得前面的10个雷的div
    if (dom && dom.classList.contains('isLei')) { // 判断是不是雷块
        for (var i = 0; i < isLei.length; i++) {
            isLei[i].classList.add('show'); // 显示地雷背景图
        }
        setTimeout(function () {
            alertBox.style.display = 'block';
            alertImg.style.backgroundImage = 'url("img/over.jpg")';  // 上面显示雷，标志游戏结束
        }, 800)
    } else { // 否则继续扫雷
        var n = 0;
        var posArr = dom && dom.getAttribute('id').split('-');
        var posX = posArr && +posArr[0];
        var posY = posArr && +posArr[1];
        dom && dom.classList.add('num');
        for (var i = posX - 1; i <= posX + 1; i++) {
            for (var j = posY - 1; j <= posY + 1; j++) {
                var aroundBox = document.getElementById(i + '-' + j);
                if (aroundBox && aroundBox.classList.contains('isLei')) {
                    n++;
                }
            }
        }
        dom && (dom.innerHTML = n);
        if (n == 0) {
            for (var i = posX - 1; i <= posX + 1; i++) {
                for (var j = posY - 1; j <= posY + 1; j++) {
                    var nearBox = document.getElementById(i + '-' + j);
                    if (nearBox && nearBox.length != 0) {
                        if (!nearBox.classList.contains('check')) {
                            nearBox.classList.add('check');
                            leftClick(nearBox);
                        }
                    }
                }
            }
        }
    }
}

rightClick 没有标记并且没有数字 --> 进行标记;

有标记 --> 取消标记 --> 标记是否正确，10个都正确标记，提示成功;

如果已经出现，则点击无效果;

function rightClick(dom){
    if(dom.classList.contains('num')){ // 如果已经出现，则点击无效果
        return;
    }
    dom.classList.toggle('flag'); // 在元素中切换类名，切换为flag类名，显示红旗背景图；此处的雷被扫除了
    if(dom.classList.contains('isLei') && dom.classList.contains('flag')){
        mineOver --; // 雷数减一
    }
    if(dom.classList.contains('isLei') && !dom.classList.contains('flag')){
        mineOver ++;
    }

    score.innerHTML = mineOver;
    if(mineOver == 0){ // 扫完雷，标志雷数量为0
        alertBox.style.display = 'block';
        alertImg.style.backgroundImage = 'url("img/success.png")'; // 游戏胜利
    }
}

3.5 游戏开始

bindEvent()

四、总结

本文我们通过JavaScript打造了简单的扫雷游戏，首先是设计下简单的界面样式，然后通过扫雷的逻辑动态构建雷块的位置，通过点击小方块进行扫雷，感兴趣的小伙伴可以去试一下。

到此这篇关于如何使用JavaScript打造一个扫雷游戏的文章就介绍到这了,更多相关JavaScript打造扫雷游戏内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

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
js+canvas实现简单扫雷小游戏

扫雷小游戏作为windows自带的一个小游戏,受到很多人的喜爱,今天我们就来尝试使用h5的canvas结合js来实现这个小游戏. 要写游戏,首先要明确游戏的规则,扫雷游戏是一个用鼠标操作的游戏,通过点击方块,根据方块的数字推算雷的位置,标记出所有的雷,打开所有的方块,即游戏成功,若点错雷的位置或标记雷错误,则游戏失败. 具体的游戏操作如下 1.可以通过鼠标左键打开隐藏的方块,打开后若不是雷,则会向四个方向扩展 2.可以通过鼠标右键点击未打开的方块来标记雷,第二次点击取消标记 3.可以通过鼠标右键
使用纯javascript实现经典扫雷游戏

很久以前写的当时都没写注释的刚加上了 (尼玛,好多自己都不认识了 ... ) 不足的地方就是本来想写个游戏排名的统计的,等有空了再加上(好像每次都这么说然后就等好久好久...) 还有就是没有实现:点击第一个格子不能是雷的功能 <style> ul{padding:0;list-style:none;} #mine{overflow:hidden;width:30px;height:30px;border:1px solid #966;} #mine li{float:left;width
分享自己用JS做的扫雷小游戏

引用了jQuery,节省了很多鼠标点击上的判断.界面显然都是照搬Windows的扫雷啦,详细的内容注释里都有,我就不啰嗦啦~ 先上截图~ 引用了jQuery,节省了很多鼠标点击上的判断界面显然都是照搬Windows的扫雷啦详细的内容注释里都有,我就不啰嗦啦~ JS部分 var mineArray, //地雷数组 lastNum, //剩余雷数 countNum, //未被揭开的方块数 inGame = 0, //游戏状态,0为结束,1为进行中,2为初始化完毕但未开始 startTime; /
通过javascript实现扫雷游戏代码实例

这篇文章主要介绍了通过javascript实现扫雷游戏代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 html代码: <div id="mine"> <div class="level"> <button type="button">初级</button> <button type="button">中级&l
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
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
HTML+JavaScript实现扫雷小游戏

本文实例为大家分享了JavaScript实现扫雷小游戏的具体代码,供大家参考,具体内容如下工具:Sublime Text / Dreamweaver /Hbuilder <!doctype html> <html> <head> <meta charset="utf-8"> <title>SaoLei</title> <style type="text/css"> table {
js实现经典扫雷游戏

本文实例为大家分享了js实现经典扫雷游戏的具体代码,供大家参考,具体内容如下项目结构实现效果思路流程 1.写出基本的布局 2.利用js生成扫雷的table表格 3.利用随机数来做地雷在表格中的索引 4.初始化table表格 5.根据地雷的坐标生成地雷周围的数字 6.点击事件分成鼠标左键点击和右键点击 7.左键点击情况下又分为点到的是地雷和非地雷两种情况 8.点到的是地雷情况下,则将全部地雷显示,其他样式不变,并且不能再进行任意表格内的点击事件(左键右键都不行) 9.点到的是非地雷情况下又分
一步步教你使用JavaScript打造一个扫雷游戏

目录前言一.思路分析二.静态页面搭建 2.1 结构层 2.2 样式层三.js页面交互 3.1 获取元素及变量初始化 3.2 10个雷的初始化设置 3.3 游戏开始事件封装 3.4 核心事件函数封装 3.5 游戏开始四.总结前言扫雷大家都玩过,今天我们就是用JavaScript来打造扫雷游戏.废话不多说,直接看下效果; 上图是失败后的结果. 一.思路分析我们新建一个首页,在首页放置一个点击开始游戏的按钮,动态生成100个小格,即100div;然后通过点击div进行扫雷操作,然后扫雷
基于JavaScript制作一个骰子游戏

目录知识点 HTML 部分 CSS 部分 JavaScript 部分总结游戏可以通过这个链接进入完整源码我已经放在GitHub上了这节实验我们将使用 HTML.CSS 和 JavaScript 构建一个骰子游戏.设置两名玩家(一个人玩也行)然后掷骰子,获得更高点数的玩家将赢得游戏. 知识点 :hover 选择器 querySelector() 方法 setAttribute() 方法骰子 1-6 点的图片都放在这里了,大家可以将这些图片保存在本地的文件夹中然后用相对地址引用,或者也可
教你怎么用Java开发扫雷游戏

一.效果图二.实现思路 1.界面上可以点开的各种实际都是按钮,创建9行9列的二维数组,然后根据这个数组来创建JButton. 2.对应创建二维数组data,用来存取数据,0表示周围无雷,-1表示当前是雷,其他数字表示周围雷的数量. 3.对应创建二维数组state,用来存取按钮状态,0未打开,1 打开 2旗子 3 未知(控制显示对应的图标) 4.设置雷:随机行数 i 和列数 j,根据随机到 i.j 从二维数组data中取出对应的元素值,若值不为-1(不是雷),则将此元素data
基于JavaScript实现简单扫雷游戏

对于10年前的人来说,扫雷肯定是家喻户晓,由于当时的科技并不是很发达,大家对于电脑游戏的了解,可能都是从扫雷开始的,今天就交大家一种用js原生代码写一个简单的扫雷游戏,话不多说,直接上干货: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="wid
一步步教你用Python实现2048小游戏

前言 2048游戏规则:简单的移动方向键让数字叠加,并且获得这些数字每次叠加后的得分,当出现2048这个数字时游戏胜利.同时每次移动方向键时,都会在这个4*4的方格矩阵的空白区域随机产生一个数字2或者4,如果方格被数字填满了,那么就GameOver了. 主逻辑图逻辑图解:黑色是逻辑层,蓝色是外部方法,红色是类内方法,稍后即可知道~ 下面容我逐行解释主逻辑main()函数,并且在其中穿叉外部定义的函数与类. 主逻辑代码解读(完整代码见文末) 主逻辑main如下,之后的是对主函数中的一些方法的解读
用javascript做一个小游戏平台 (二) 游戏选择器

今天先预览一下今晚的成果,如下(挫了点,别扔砖头):今天主要设计了下选择器,就是进入游戏时展现游戏列表,然后用来选择游戏的一个白痴的功能. 选择器建立在昨天的游戏类基础上,针对昨天的代码我作了部分修改: 复制代码代码如下: //5.游戏类:名称,逻辑方法,键盘方法,开始方法,开始关卡方法,结束方法 var Game = function(name, logicalFn, keyFn, startFn, loadFn, endFn) { //游戏名 this._name = name || "未
使用Python写一个小游戏

引言最近python语言大火,除了在科学计算领域python有用武之地之外,在游戏.后台等方面,python也大放异彩,本篇博文将按照正规的项目开发流程,手把手教大家写个python小游戏,来感受下其中的有趣之处.本次开发的游戏叫做alien invasion. 安装pygame并创建能左右移动的飞船安装pygame 本人电脑是windows 10.python3.6,pygame下载地址: 传送门请自行下载对应python版本的pygame 运行以下命令 $ pip install wh
如何使用 Rails 和七牛云存储，在 15 分钟内打造一个图片分享社交应用原型

十年前,Web 应用框架 Rails 创始人 David Heinemeier Hansson 曾录制视频,向我们演示如何使用 Ruby on Rails 在 15 分钟内创作一个 blog 引擎.这个视频通过 Rails 优秀的 MVC .习惯优于配置(Convention over Configuration)等设计,以及强大的代码生成.scaffold 等功能,成功展示了 Ruby on Rails 编写 Web 应用核心功能的高效简洁.Ruby on Rails 这门技术也在 Web 2
教你用javascript实现随机标签云效果_附代码

标签云是一套相关的标签以及与此相应的权重.典型的标签云有30至150个标签.权重影响使用的字体大小或其他视觉效果.同时,直方图或饼图表是最常用的代表约12种不同的权数.因此,标签云彩能代表更多的权,尽管不那么准确.此外,标签云通常是可以交互的:标签是典型的超链接,让用户可以仔细了解他们的内容. 大概可以理解为一堆相关或者不相关的标签混到一块,根据不同的重要程度,或者其他维度的不同来为每个标签设置不同的样式已凸显他们的不同,这样的一堆标签在一起就是我们通常说的标签云了. 下面我们大概说一下