网页版扫雷小游戏

最新推荐文章于 2024-05-09 14:17:00 发布
最新推荐文章于 2024-05-09 14:17:00 发布
阅读量2.7w 收藏 37
点赞数 14
分类专栏： 学习记录 文章标签： 前端 扫雷 原生js 游戏
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/justBeHerHero/article/details/89917613
版权

扫雷小游戏（原生js）

实验介绍

  1. 实验简介
    先上一张效果图
    效果图
  2. 源代码获取（非本文章中代码）
$ git clone https://github.com/shiyanlou/js-minesweeper
  1. 学习网页
    实验楼-网页版扫雷

实现原理

扫雷游戏的规则:

游戏面板上有一些格子，每个格子中有一个数字（空白表示数字为 0）或是地雷，格子中的数字表示格子周围格子中地雷的数量。玩家要做的就是把数字格子找出来，时间花的越少越好。

除边界上的格子外，每个格子周围有 8 个格子：上、下、左、右、4 个斜角。所以数字范围是 0~8。
所以我们的算法如下:

根据用户选择的难易程度（有初、中、高三个级别，级别越高地雷和格子数量越多），随机产生一定个数的地雷并随机放在格子中。然后遍历格子，计算每个格子中的数字，标记在格子上。玩家左键点击格子时显示格子内容（如果遇到地雷则挑战失败，游戏结束），右键点击格子时标记格子为地雷，真到正确标记所有地雷并打开所有非地雷格子，挑战成功，游戏结束。

目录结构：
目录结构

实验步骤

  1. 页面布局

<body>
<div id="box">
    <table id="game"></table>
    <div id="control">
        <div id="restMine">剩余雷数: <span id="restMineCount" style="font-size: 18px;color: red;"> 0 </span>个</div>
        <div id="useTime">持续时间: <span id="useTimeSecond" style="font-size: 18px;color: red;"> 0 </span>秒</div>
        <form>
            <fieldset>
                <legend>难度选择：</legend>
                <input type="radio" name="difficultLevel" id="hard1" checked/><label for="hard1"> 初级(10*10)</label><br>
                <input type="radio" name="difficultLevel" id="hard2"/><label for="hard2"> 中级(15*15)</label><br>
                <input type="radio" name="difficultLevel" id="hard3"/><label for="hard3"> 高级(20*20)</label><br>
            </fieldset>
        </form>
        <button id="startGame">开始新游戏</button>
        <div id="info">
            <h5>提示：</h5>
            <ul>
                <li>点击“开始新游戏”开始计时</li>
                <li>游戏过程中点击“开始新游戏”则重新开始</li>
            </ul>
        </div>
    </div>
</div>

  1. css布局

*{
    padding:0px;
    margin: 0px;
}

#box{
    width: auto;
    height: auto;
    float: left;
    border: 1px solid indianred;
    margin: 100px auto;
}

#game{
    float: left;
    background:#CCC;
}

#game td{
    width: 32px;
    height:32px;
    border:2px outset #EEE;
    text-align:center;
    cursor:pointer;
    font-size: 25px;
    line-height: 32px;
}

#game td:hover{
    background-color:#AAA;
}

/*  为雷区  */
.landMine{
    background-image:url('http://labfile.oss.aliyuncs.com/courses/144/mine.png');
    background-position:center;
    background-repeat:no-repeat;
}

/*   鼠标右键点击标志 */
.flag{
    background-image:url('http://labfile.oss.aliyuncs.com/courses/144/flag.png');
    background-position:center;
    background-repeat:no-repeat;
}

/*  不是雷区，普通区  */
#game td.normal{
    border:2px solid #EEE;
    background-color:#AAA;
}

#control{
    display: inline;
    float: left;
    margin-left: 30px;
    width: 200px;
    height: auto;
    text-align: center;
}

#restMine{
    margin-top: 10%;
    font-size: 16px;
}

#control form{
    margin-top:10%;
}

#control fieldset{
    height: 100px;
}

#control form legend{
    text-align:left;
    margin-left: 10px;
}

#control label{
    font-size: 14px;
    padding: 10px;
}

#useTime{
    margin-top: 10%;
    font-size:16px;
}

#startGame {
    margin-top: 20px;
    padding: 0.5em;
    width: 100px;
}

#info{
    text-align: left;
    margin-top: 20px;
}

#info ul{
    text-indent: 10px;
    font-size: 13px;
}

  1. 创建表格

function $(id) {
    return typeof id==="string"?document.getElementById(id):null;
}
 //作为全局的函数

传入行数，列数来创建表格

//创建表格函数
function createTable(rowCount,colCount){
    var table=$('game');
    empty(table);			//每次创建都要先清空表格
    for(var i=0;i<rowCount;i++){
        var tr=document.createElement('tr');
        for(var j=0;j<colCount;j++) {
            var td = document.createElement('td');
            td.id = 'm_' + i + '_' + j;     //绑定一个id
            tr.appendChild(td);
        }
        table.appendChild(tr);
    }
};

//清空子节点
function empty(node){
    while(node.hasChildNodes()) {
        node.removeChild(node.firstChild);
    }
};

  1. 扫雷.js

//初始化表格并监听难度点击事件
var jms=new JMS('game');
function initTable() {
    var hardList=document.getElementsByName("difficultLevel");
    var tdCountArr=[10,15,20];//难度的数组
    var flag=true;
    //监听难度点击事件
    for(var i=0;i<hardList.length;i++){
        (function(j){
            hardList[j].addEventListener('click',function(){
                if(jms!=null&&jms.rowCount!=tdCountArr[j]) {
                    if(jms.mineCount!==0){
                        //确认改变
                        if(window.confirm("确认改变难度等级吗？")) {
                            flag=true;
                            //更新数据
                            jms.colCount = tdCountArr[j];
                            jms.rowCount = tdCountArr[j];

                            jms.end();//之前的游戏结束
                            clearInterval(timer);//清除计时器
                            jms. initGame();//初始化游戏数据
                            
                            //重建表
                             createTable(jms.rowCount,jms.colCount);
                        }
                        else{
                            flag=false;
                        }

                    }
                }
                if(!flag){
                    return false;
                }
            })

        })(i);
    }
}

//标记时的回调函数，更新雷数
jms.markCallback=function (count) {
    return $('restMineCount').innerHTML=count;
}

//结束的回调函数，计时，雷数显示清零
jms.endCallback=function () {
    $('restMineCount').innerHTML=0;
    $('useTimeSecond').innerHTML=0;
}

//全局计时
var timer=null;
//开始游戏
initTable();					//监听点击改变难度事件
function startGame() {
    createTable(10,10);				//初始创建一个10*10表

    //点击开始新游戏
    $('startGame').addEventListener('click',function () {
    
        jms.play();				//游戏开始接口
        jms.begin();				//游戏正式开始
        $('restMineCount').innerHTML=jms.mineCount-jms.remarkedMine;					//显示雷的数目
        
        //计时开始
        timer=setInterval(function (){
            $('useTimeSecond').innerHTML=parseInt((new Date()-jms.startTime)/1000);			//更新显示的时间
            if(!jms.status){//表示已经停止
                clearInterval(timer);
                $('useTimeSecond').innerHTML=parseInt((jms.endTime-jms.startTime)/1000);		//不能让alert阻止进程，导致计时不停止
            }
        },1000);
    });
}
startGame();
  1. jms.js代码
(function(){
    function $(id) {
        return typeof id==="string"?document.getElementById(id):null;
    }
    var JMS=function (id,rowCount,colCount) {
        if(!(this instanceof JMS)) {
            return new JMS();
        }
        this.startTime=null;//开始时间
        this.endTime=null;//结束时间
        this.rowCount=rowCount||10;//行数，默认为10
        this.colCount=colCount||10;//列数
        this.table=$(id);//表格区
        this.tdArr=this.table.getElementsByTagName('td');//一个个的小块
        this.status=false;//游戏的状态，true为开始，false为结束
        this.arr=[];//td对应的数值数组
        this.remarkedMine=0;//标记的雷数
        this.mineCount=10;//雷数
        this.currentStepCount=0;//步数，包括自动打开的空白区域和点击的非0区域
        this.markCallback=null;//标记的回调函数，用于实时更新雷数
        this.endCallback=null;//结束的回调函数
        this.doc=document;//当前文档的引用
        this.doc.oncontextmenu=function () {	//右键禁止默认行为
           return false;
        }
    }
    JMS.prototype={

        //初始化数组，全部为0
        initGame:function () {
            //td对应的数值数组，全为0
            for(var i=0;i<this.rowCount;i++){
                this.arr[i]=[];
                for(var j=0;j<this.colCount;j++){
                    this.arr[i][j]=0;
                }
            }
            //产生随机雷数
            this.mineCount=parseInt(Math.random()*5)+this.rowCount*4;      	//可以根据自己选择调试
            this.startTime=new Date();
            this.endTime=null;
            this.currentStepCount=0;
            this.remarkedMine=0;
            this.status=true;
        },
        
        //数组更新为雷区，用 9 表示
        landMine:function(){
            var tempArr=[],allCount=this.colCount*this.rowCount-1;
            for(var i=0;i<this.mineCount;i++){
                var randomNum=this.getRandom(0,allCount);
                var colsRows=this.getColRow(randomNum);
                if(colsRows in tempArr){//在数组中，跳走
                    i--;、
                    continue;
                }
                tempArr[tempArr.length]=randomNum;
                this.arr[colsRows.rows][colsRows.cols]=9;
            }
        },
        //产生一个随机数
        getRandom:function(begin,end){
            return parseInt(Math.random()*(end-begin))+begin;
        },
        //得到行列，用% / 得到
        getColRow:function(allCount){
            return {
                cols:allCount%this.colCount,
                rows:parseInt(allCount/this.rowCount)
            }
        },
        
        
        //遍历表格，得到数组
        calculateNoLandMineCount:function () {
            for(var i=0;i<this.rowCount;i++) {
                for (var j = 0; j < this.colCount; j++) {
                    if (this.arr[i][j] == 9) {
                        continue;
                    }
                    if (i > 0 && j > 0) {
                        if (this.arr[i - 1][j - 1] == 9) {
                            this.arr[i][j]++;
                        }
                    }
                    if (i > 0) {
                        if (this.arr[i - 1][j] == 9) {
                            this.arr[i][j]++;
                        }
                    }
                    if (i > 0 && j < this.colCount - 1) {
                        if (this.arr[i - 1][j + 1] == 9)
                            this.arr[i][j]++;
                    }
                    if (j > 0) {
                        if (this.arr[i][j - 1] == 9) {
                            this.arr[i][j]++;
                        }
                    }
                    if (j < this.rowCount - 1) {
                        if (this.arr[i][j + 1] == 9) {
                            this.arr[i][j]++;
                        }
                    }
                    if (i < this.rowCount - 1 && j > 0) {
                        if (this.arr[i + 1][j - 1] == 9)
                            this.arr[i][j]++;
                    }
                    if (i < this.rowCount - 1) {
                        if (this.arr[i + 1][j] == 9)
                            this.arr[i][j]++;
                    }
                    if (i < this.rowCount - 1 && j < this.colCount - 1) {
                        if (this.arr[i + 1][j + 1] == 9)
                            this.arr[i][j]++;
                    }
                }
            }
        },
        
        //绑定事件
        bindCells:function(){
    	   //保留全局的this，到绑定事件时this会更改
            var self=this;
           for(var i=0;i<this.rowCount;i++) {
               for (var j = 0; j < this.colCount; j++) {
                   //闭包绑定事件
                   (function (i, j) {
                       $('m_' + i + '_' + j).onmousedown=function (event) {
                           var btn = event.button;     
                           var className = this.className;
                           if (btn == 2) {
                               //    标记，前面阻止右键默认行为，btn为2表示点击鼠标右键，为1表示左键
                               if (className !== 'flag') {
                                   this.className = 'flag';
                                   self.remarkedMine++;
                               } else {
                                   this.className = '';
                                   self.remarkedMine--;
                               }
                               //调用标记回调函数，在扫雷.js中定义的回调函数
                               if(self.markCallback){
                                   self.markCallback(self.mineCount-self.remarkedMine);
                               }
                           } else {
                               //   打开
                               self.OpenItem.call(self, this, i, j);
                           }
                       }
                   })(i, j);
               }
           }
        },
        
        //打开，
        OpenItem:function (obj,row,col) {
            if(this.arr[row][col]!==9){
                this.currentStepCount++;
                if(this.arr[row][col]!==0){
                    obj.innerHTML=this.arr[row][col];
                }
               obj.className='normal';
                if(this.currentStepCount+this.remarkedMine==this.colCount*this.rowCount-1){  //成功
                    this.success();
                }
                obj.onmousedown=null;
                if (this.arr[row][col] == 0) {
                    this.showNoLandMine.call(this, row, col);
                }
            }
            else{
                this.fail();
            }
        },
        
        //显示无雷区
        showNoLandMine:function (x,y){
            for(var i=x-1;i<x+2;i++){
                for(var j=y-1;j<y+2;j++){
                    if(!(i==x&&y==j)){
                        var ele=$('m_'+i+'_'+j);
                        if(ele&&ele.className==''){
                            this.OpenItem.call(this, ele, i, j);
                        }
                    }
                }
            }
        },
        
        //显示雷区方块
        showLandMine:function () {
            for(var i=0;i<this.rowCount;i++){
                for(var j=0;j<this.colCount;j++){
                    //为雷区
                    if(this.arr[i][j]==9){
                        $('m_'+i+"_"+j).className='landMine';
                    }
                }
            }
        },
        
        //显示所有的方块
        showAll:function () {
            for(var i=0;i<this.rowCount;i++){
                for(var j=0;j<this.colCount;j++){
                    if(this.arr[i][j]==9){
                        $('m_'+i+"_"+j).className='landMine';
                    }
                    else{
                        if(this.arr[i][j]!=0){
                            $('m_'+i+"_"+j).innerHTML=this.arr[i][j];
                        }
                        $('m_'+i+"_"+j).className='normal';
                    }
                }
            }
        },
        
        //清除信息，
        clearIfo:function () {
            for(var i=0;i<this.rowCount;i++){
                for(var j=0;j<this.colCount;j++){
                    $('m_'+i+'_'+j).innerHTML='';
                    $('m_'+i+'_'+j).className='';
                }
            }
        },
        
        //清除绑定
        clearBind:function(){
                for(var i=0;i<this.rowCount;i++){
                    for(var j=0;j<this.colCount;j++){
                        $('m_'+i+'_'+j).onmousedown=null;
                    }
                }
        },

	//游戏成功
        success:function () {
            this.end();
            this.clearBind();
            this.showAll();
            setTimeout(function (){alert("Congratulation!")},100);
            this.clearIfo();

        },

	//游戏失败，结束->显示所有->清除绑定->显示结束（js单线程，有一定的时间延迟，设置一个定时器)
        fail:function () {
            this.end();
            this.showAll();
            this.clearBind();
            setTimeout(function (){alert("GAME OVER")},100);
        },

	//开始游戏接口 ,初始化游戏->生成雷区数组->计算非雷数
        play:function () {
            this.initGame();
            this.landMine();
            this.calculateNoLandMineCount();
        },

	//游戏开始 ，步数、标记雷数为0->
        begin:function () {
            this.currentStepCount=0;
            this.remarkedMine=0;
            this.clearIfo();
            this.bindCells();
        },

	//游戏结束，结束时间->状态更改->结束回调函数
        end:function () {
            this.endTime=new Date();
            this.status=false;
            if(this.endCallback){
                this.endCallback();
            }
        }
    }


    window.JMS=JMS;			//对象全局化
})();

总结

主要使用 JavaScript 实现了网页版的经典小游戏扫雷，代码有一些冗余，根据网上提供的思路自己写的，代码有一些小BUG，是单选点击BUG。仅保存，具体学习案例和代码开头已经给出。读者可以根据自己的需要选择。本文只作为学习笔记

羊飘
关注
  • 14
    点赞
  • 踩
  • 37
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
网页版扫雷（HTML/CSS/JS实践）
alllliy的博客
10-09 5496
html JavaScript版扫雷 剩余雷数：0 个 持续时间: 0 秒 难度选择： 初级（10*10） 中级（15*15） 高级（20*20）
扫雷小游戏-纯网页版
weixin_30768661的博客
06-14 2891
这两天在恶补前端的相关知识，看到JQuery的动画部分时，突然心血来潮想做一个扫雷的网页版，于是花了差不多一天的时间完成了一个初始版本，权当对这几天学习成果的一个回顾，若某处功能有更好实现方式欢迎留言一起讨论。 ========== 原创作品，未经本人允许，请勿转载，谢谢！ ========== ========== 作者：Yokeqi 出处：博客园 原文链接 =====...
扫雷游戏网页版_做游戏，单人行动可行吗（3.让我试试扫雷）
weixin_39682560的博客
12-17 612
17年底，三国依然在线稳定运行。一个偶然的机会发现了一个网页的扫雷游戏（mienfield），是一个无限边界的扫雷游戏，全世界所有人玩一盘没有边界的扫雷。看着非常酷，我搜索了一下各大手机平台，没有同款（其实至今的2019年底也没有同款）。这款页游在18年的时候不明原因下线了。目前如果你可以上youtube，搜索mienfield可以看到游戏一些视频。实现方式最终确定为Creator和Golang来...
网页版扫雷游戏
最新发布
2301_80293394的博客
05-09 1545
2.//定义行列，方便修改好啦，以上就是今天的全部分享了，如有不足欢迎家人们评论区批评指正，如果这篇文章对你有用的话，可以给我来个一键三连嘛（写了一天了，求赞求支持/(ㄒoㄒ)/~~）
扫雷游戏网页版.zip
05-24
扫雷游戏js网页版。
C语言 | 扫雷小游戏（可自动展开）
Nice_W的博客
10-25 1万+
在我小时候的记忆里，每台电脑总会有那么几款经典的游戏，今天给大家带来实现的这款游戏相信大家会油然而生出一种熟悉感，这款游戏叫扫雷，相信大家大部分都有接触过这款游戏，今天我就给大家带来该游戏的实现和代码。
C语言实现网页版扫雷
m0_74316391的博客
05-09 9352
C语言实现扫雷
扫雷游戏（实现了网页版的扫雷游戏的所有逻辑）
fight_p的博客
05-08 9272
实现了扫雷的全部逻辑
扫雷游戏
Rookie Maker的博客
12-16 3540
c语言，大家三连哦！
扫雷小游戏
weixin_50394543的博客
01-01 2086
此代码在课堂老师所讲述的基础之上添加了搜寻周围是否有雷的递归算法。 #include"function.h" int main() { int loop = 1; while (loop) { int choose = Menu(); switch (choose) { case 1:Game(); break; case 2:printf("欢迎下次再玩，再见。\n"); loop = 0; break; case 3:printf("你要个锤子的说明，自己.
jQuery网页版扫雷小游戏特效代码
03-20
【jQuery网页版扫雷小游戏特效代码】是一款利用jQuery库实现的经典扫雷游戏的网页版本。该版本基于jQuery 1.10.2.min.js这一高效轻量级的JavaScript库进行开发，为玩家提供了计时功能，增加了游戏的挑战性和趣味性。...
扫雷网页版
06-05
JavaScript+CSS 写的扫雷，只有一个html文件
jQuery网页版扫雷小游戏.zip
05-27
【jQuery网页版扫雷小游戏】是一款使用jQuery技术开发的在线扫雷游戏，它结合了HTML、CSS和JavaScript，为用户提供了类似经典Windows操作系统中的扫雷体验。jQuery库的使用简化了DOM操作，使得游戏界面的交互更加...
jquery实现的网页版扫雷小游戏源码.zip
11-15
《jQuery实现的网页版扫雷小游戏详解》 在IT领域，JavaScript库如jQuery极大地简化了网页开发中的DOM操作，事件处理以及动画效果等任务。本篇文章将深入探讨一个使用jQuery实现的网页版扫雷小游戏的源码分析，帮助...
基于HTML+CSS+Javascript编写的网页版扫雷小游戏源码(附demo预览地址).zip
01-11
基于HTML+CSS+Javascript编写的网页版扫雷小游戏源码(附demo预览地址).zip基于HTML+CSS+Javascript编写的网页版扫雷小游戏源码(附demo预览地址).zip基于HTML+CSS+Javascript编写的网页版扫雷小游戏源码(附demo预览...
网页扫雷（简易版）（一）
magic_wings的专栏
10-24 5168
网页版扫雷说明：主要是做做玩玩的，先把主要功能实现。
servlet实现网页版的猜数字_前端经典练手项目用 JavaScript 实现网页版扫雷
weixin_39548805的博客
11-21 461
相信大家都玩过扫雷这个经典的小游戏，它规则简单但耐玩。你有没有想过自己动手开发一个呢？今天我们就教你做一个网页版的扫雷，先上一张效果截图：知识点javascriptcss3扫雷原理实验原理在开始开发之前，我们先来设计一下游戏算法。扫雷游戏的规则很简单：游戏面板上有一些格子，每个格子中有一个数字(空白表示数字为 0)或是地雷，格子中的数字表示格子周围格子中地雷的数量。玩家要做的就是把数字格...
python3-扫雷网页版
The research on computer technolog
11-27 1382
button_text参数：当读取一个窗口时，返回的就是这个文本参数，该参数将告诉您单击了哪个按钮；在按钮调用中更改button_text参数，可更改所有按钮的文本。在单个行中指定一个以上的元素时，需要使用Column Element。纽扣是最重要的元素，它们接收用户点击，激活大部分程序功能。想要定义自己的按钮，通常可以使用button Element button来实现。也可使用key参数，这样，在如下的layout中，当单击按钮时，从Window.read()调用返回的事件是key的值"
扫雷游戏网页版_经典 Windows 扫雷游戏使用浏览器就可以玩啦
热门推荐
weixin_39517797的博客
12-17 13万+
什么样的游戏好玩在每个人心里的标准是不一样的，作为 90 后的我童年中记忆的游戏无非就是 FC 上的《魂斗罗》、《双截龙》或者《超级玛丽》等等。虽然都是满满的像素风，但却也是我的最爱。时间总是很快的就过去，长大的人想回到小时候的单纯，而还小的人却总想装着变得成熟。我们在得到的同时也在不断的失去，问问现在的你过的是你想要的生活吗？不好意思，话题跑偏了...扫雷游戏我想很多人都不陌生，尤其是...
sockdt扫雷小游戏
05-23
好的，我可以帮你实现一个简单的socket扫雷小游戏。这个游戏将会有一个服务端和多个客户端，服务端将会生成一个扫雷棋盘，然后将这个棋盘的状态发送给所有连接到它的客户端。每个客户端将会显示这个棋盘，并且允许玩家进行点击操作。 首先，我们需要定义一些游戏的规则。在扫雷中，玩家需要点击方块来揭示它们的内容。方块可以包含一个地雷、数字或者空白。如果玩家点击了一个地雷，游戏就结束了。如果玩家点击了一个数字，那么这个数字会告诉玩家周围有多少个地雷。如果玩家点击了一个空白，那么这个空白将会自动扩展，揭示周围的方块。 接下来，我们需要定义一些通信协议。我们将使用TCP协议来进行通信。客户端将会发送一个请求给服务端，请求服务端发送当前的游戏状态。服务端将会在接收到请求后，将当前的游戏状态发送回客户端。客户端将会解析游戏状态，并且将其显示在屏幕上。玩家可以通过点击屏幕来告诉客户端他们的下一步操作。 最后，我们需要实现一些代码。我们将使用Python来实现这个游戏。我们需要使用socket库来实现网络通信，使用random库来生成随机的扫雷棋盘，使用tkinter库来实现游戏界面。 以下是代码示例：
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值