网页版扫雷小游戏

最新推荐文章于 2024-05-09 14:17:00 发布
最新推荐文章于 2024-05-09 14:17:00 发布
阅读量2.6w 收藏 38
点赞数 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
    点赞
  • 踩
  • 38
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery网页版扫雷小游戏.zip
05-27
jQuery网页版扫雷小游戏基于jquery.1.10.2.min.js制作，计时，有十面红旗标注雷区。
扫雷网页版
06-05
JavaScript+CSS 写的扫雷，只有一个html文件
网页版扫雷游戏
最新发布
2301_80293394的博客
05-09 1451
2.//定义行列，方便修改好啦，以上就是今天的全部分享了，如有不足欢迎家人们评论区批评指正，如果这篇文章对你有用的话，可以给我来个一键三连嘛（写了一天了，求赞求支持/(ㄒoㄒ)/~~）
扫雷游戏网页版_佛性扫雷 炸不炸随缘
weixin_39967670的博客
12-17 2003
好玩扫雷一款简单而又复杂的逻辑推理游戏.说其简单是因为上手容易，原理简单。说其复杂是因为简单的推理可以叠加组合成各种复杂有趣的形状。扫雷就象走迷宫，各有巧妙不同，或箭步如梭，或如履薄冰，或彷徨其中无疾而终。|　今天给大家介绍的是| 在线扫雷 |https://m.saolei.org.cn/扫雷可以说它是全世界最多人玩过的游戏之一，对很多人来说甚至是他们在电脑上接触的第一款游戏。游...
C语言 | 扫雷小游戏（可自动展开）
Nice_W的博客
10-25 1万+
在我小时候的记忆里，每台电脑总会有那么几款经典的游戏，今天给大家带来实现的这款游戏相信大家会油然而生出一种熟悉感，这款游戏叫扫雷，相信大家大部分都有接触过这款游戏，今天我就给大家带来该游戏的实现和代码。
扫雷游戏
Rookie Maker的博客
12-16 3158
c语言，大家三连哦！
扫雷游戏网页版.zip
05-24
扫雷游戏js网页版。
C语言实现网页版扫雷
m0_74316391的博客
05-09 9317
C语言实现扫雷
扫雷游戏（实现了网页版的扫雷游戏的所有逻辑）
fight_p的博客
05-08 9208
实现了扫雷的全部逻辑
网页版扫雷（HTML/CSS/JS实践）
alllliy的博客
10-09 5453
html JavaScript版扫雷 剩余雷数：0 个 持续时间: 0 秒 难度选择： 初级（10*10） 中级（15*15） 高级（20*20）
网页扫雷（简易版）（一）
magic_wings的专栏
10-24 5119
网页版扫雷说明：主要是做做玩玩的，先把主要功能实现。
jQuery网页版扫雷小游戏特效代码
03-20
【jQuery网页版扫雷小游戏特效代码】是一款利用jQuery库实现的经典扫雷游戏的网页版本。该版本基于jQuery 1.10.2.min.js这一高效轻量级的JavaScript库进行开发，为玩家提供了计时功能，增加了游戏的挑战性和趣味性。...
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预览...
servlet实现网页版的猜数字_前端经典练手项目用 JavaScript 实现网页版扫雷
weixin_39548805的博客
11-21 459
相信大家都玩过扫雷这个经典的小游戏，它规则简单但耐玩。你有没有想过自己动手开发一个呢？今天我们就教你做一个网页版的扫雷，先上一张效果截图：知识点javascriptcss3扫雷原理实验原理在开始开发之前，我们先来设计一下游戏算法。扫雷游戏的规则很简单：游戏面板上有一些格子，每个格子中有一个数字(空白表示数字为 0)或是地雷，格子中的数字表示格子周围格子中地雷的数量。玩家要做的就是把数字格...
python3-扫雷网页版
The research on computer technolog
11-27 1370
button_text参数：当读取一个窗口时，返回的就是这个文本参数，该参数将告诉您单击了哪个按钮；在按钮调用中更改button_text参数，可更改所有按钮的文本。在单个行中指定一个以上的元素时，需要使用Column Element。纽扣是最重要的元素，它们接收用户点击，激活大部分程序功能。想要定义自己的按钮，通常可以使用button Element button来实现。也可使用key参数，这样，在如下的layout中，当单击按钮时，从Window.read()调用返回的事件是key的值"
扫雷游戏网页版_经典 Windows 扫雷游戏使用浏览器就可以玩啦
热门推荐
weixin_39517797的博客
12-17 13万+
什么样的游戏好玩在每个人心里的标准是不一样的，作为 90 后的我童年中记忆的游戏无非就是 FC 上的《魂斗罗》、《双截龙》或者《超级玛丽》等等。虽然都是满满的像素风，但却也是我的最爱。时间总是很快的就过去，长大的人想回到小时候的单纯，而还小的人却总想装着变得成熟。我们在得到的同时也在不断的失去，问问现在的你过的是你想要的生活吗？不好意思，话题跑偏了...扫雷游戏我想很多人都不陌生，尤其是...
网页版扫雷
daodfs1的博客
11-28 7121
新建一个空html文件，粘贴下面的代码，保存后，用浏览器打开就可以玩了（兼容IE10） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>扫雷</title> <style> .container {margin: auto;width: 960px;} .panel {posit
扫雷游戏网页版_两个在线版复古小游戏，嗯还是熟悉的味道！
weixin_39895486的博客
12-16 3032
今天给大家推荐两个轻松的网站，其实是两个在线的小游戏网站，分分钟让你找回许久之前的回忆，我们一起来看看吧。01、在线俄罗斯方块网址：http://www.webgame.org.cn看到上图的画面，已经无需多说什么了，“上了年纪”的小伙伴肯定都玩过这个吧，经典中的经典。这个网页的还原度也很高，可以通过键盘控制，老Y也就玩了两个小时而已~02、在线扫雷网址：http://www.saolei.org...
sockdt扫雷小游戏
05-23
好的，我可以帮你实现一个简单的socket扫雷小游戏。这个游戏将会有一个服务端和多个客户端，服务端将会生成一个扫雷棋盘，然后将这个棋盘的状态发送给所有连接到它的客户端。每个客户端将会显示这个棋盘，并且允许玩家进行点击操作。 首先，我们需要定义一些游戏的规则。在扫雷中，玩家需要点击方块来揭示它们的内容。方块可以包含一个地雷、数字或者空白。如果玩家点击了一个地雷，游戏就结束了。如果玩家点击了一个数字，那么这个数字会告诉玩家周围有多少个地雷。如果玩家点击了一个空白，那么这个空白将会自动扩展，揭示周围的方块。 接下来，我们需要定义一些通信协议。我们将使用TCP协议来进行通信。客户端将会发送一个请求给服务端，请求服务端发送当前的游戏状态。服务端将会在接收到请求后，将当前的游戏状态发送回客户端。客户端将会解析游戏状态，并且将其显示在屏幕上。玩家可以通过点击屏幕来告诉客户端他们的下一步操作。 最后，我们需要实现一些代码。我们将使用Python来实现这个游戏。我们需要使用socket库来实现网络通信，使用random库来生成随机的扫雷棋盘，使用tkinter库来实现游戏界面。 以下是代码示例：

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值