经典游戏扫雷之js版

最新推荐文章于 2024-07-27 10:49:41 发布
最新推荐文章于 2024-07-27 10:49:41 发布
阅读量923 收藏 1
点赞数
文章标签： 游戏 function table class null xhtml
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kevinwon1985/article/details/5684401
版权

闲来无事，js写个扫雷玩玩。兼容IE6,7,8,FF,CHROME。

<!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.org/1999/xhtml">

<head>

<title> 扫雷 </title>

<meta http-equiv="Content-Type" content="text/html;charset=gb2312"  />

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

</head>

<style>

td{cursor: pointer; text-align: center;}

.table1{border:1px solid #ffffff;}

.table1 td{background-color: #F9DAB0; width:20px; height:20px;}

.table1 .td_hover{background-color: #F5C481;}

.table1 .td_checked{background-color: #CCFFFF;}

.lvl{cursor:pointer;}

#leishu, #shijian{background-color:#000000;color:#ffffff;width:30px;height:20px;text-align:center;}

</style>

<SCRIPT LANGUAGE="JavaScript">

<!--

function $(id){

    return document.getElementById(id);

}

function startWithLv(lvl){

    window.clearInterval(saolei.timeId);

    switch(lvl){

        case 1:

            saolei.instance(9,9,10);

            break;

        case 2:

            saolei.instance(16,16,40);

            break;

        case 3:

            saolei.instance(16,30,99);

            break;

    }

}

window.onload = function(){

    saolei.instance(9,9,10);

}

 

var saolei = {};

/*

* 函数说明：实例化对象

* 参数：rowLen:地图行数,colLen

* 返回值：

*

*/

saolei.instance = function(rowLen,colLen,bombNum){

    this.arrBombs = new Array();   //

    this.tableRows = rowLen;                //地图行数

    this.tableCols = colLen;                //地图列数

    this.BombNum = bombNum;                 //地雷个数

    this.BombLeft = bombNum;                //剩余雷数

    this.iCellIsConfirm = 0;                //被玩家确定无雷的或有雷的格子数

    this.firstClick = true;                 //记录是否的一次点击,的一次点的时候开始记时

    this.curT = 0;                          //当前时间

    this.timeId = 0;                        //计时器

    this.loadMap();

}

/*

* 函数说明：初始化地图

* 参数：a:地图行数,b:地图列数

* 返回值：

*

*/

saolei.loadMap = function(){

    var thisobj = this;

    var cellIndex = 0;                  //单元格索引

    var divObj = $("div1");

    if(divObj == null){

        divObj = document.createElmentById("div");

        document.body.appendChild(divObj);

    }

    divObj.innerHTML = "<table id='table1' class='table1'><tbody></tbody></table>";

    var tbody = divObj.getElementsByTagName("tbody")[0];

    for(var j = 0 ; j < this.tableRows ; j++){

        var tr = document.createElement("tr");

        tbody.appendChild(tr);

        for( k = 0 ; k < this.tableCols ; k++){

            var td = document.createElement("td");

            td.id="td_" + j + "_" + k;

            td.row = j;

            td.col = k;

            td.innerHTML = "&nbsp;";

            td.hasBomb = false;                     //单元格是否有雷,false-无地雷,true-有地雷

            td.state = "0";  //单元格被玩家点击状态,0-无标记 1-标记有雷，显示*,2-无雷，显示数字或空白，3-可能有雷，显示？

            td.onmousedown = function(event){

                var e = event ? event : (window.event ? window.event : null);

                thisobj.tdonclick(this, e.button);

            }

            td.onmouseover = function(event){

                if(this.state != 2){

                    this.className = "td_hover";

                }

            }

            td.onmouseout = function(event){

                if(this.state != 2){

                    this.className = "";

                }

            }

            tr.appendChild(td);

            cellIndex = cellIndex + 1;

        }

    }

    var spanTime = $("shijian");

    spanTime.innerHTML = "000";

    this.showleishu();

    this.init();

}

saolei.init = function(){

    var rowIndex = 0;

    var colIndex = 0;

    var tdobjs = $("table1").getElementsByTagName("td");

    var arrIndex = 1;

    for(var i = 0 ; i < this.tableRows*this.tableCols ; i++){

        this.arrBombs[i] = i;

    }

    for(i = 0 ; i < this.BombNum ; i++){

        arrIndex = parseInt(this.arrBombs.length * Math.random());

        tdobjs[this.arrBombs[arrIndex]].hasBomb = true;

        this.arrBombs.splice(arrIndex,1);

    }

}

saolei.reload = function(){

    this.instance(this.tableRows, this.tableCols, this.BombNum);

}

saolei.tdonclick = function(cellobj, btState){

    if(this.firstClick == true){

        this.firstClick = false;

        this.timeId = window.setInterval("saolei.jishi()",1000);

    }

    //鼠标右键点击

    if(btState == 2){

        if(cellobj.state == 0 && this.BombLeft > 0){

            cellobj.state = 1;

            cellobj.innerHTML = "*";

            this.iCellIsConfirm++;

            this.BombLeft = this.BombLeft - 1;

            this.showleishu();

        }

        else if(cellobj.state == 1){

            cellobj.state = 3;

            cellobj.innerHTML = "?";

            this.iCellIsConfirm--;

            this.BombLeft = this.BombLeft + 1;

            this.showleishu();

        }

        else if(cellobj.state == 3){

            cellobj.state = 0;

            this.iCellIsConfirm++;

            cellobj.innerHTML = "&nbsp;";

        }

        else if(cellobj.state != 2){

            alert("标志牌用完了!");

        }

    }

    //鼠标左键点击

    else if(btState == 1 || btState == 0){

        if(cellobj.state == 0){

            if(cellobj.hasBomb == false){

                cellobj.className = "td_checked";

                cellobj.state = 2;

                this.iCellIsConfirm = this.iCellIsConfirm + 1;

 

                this.showBombCountAround(cellobj);

            }

            else if(cellobj.hasBomb == true){

                var tdobjs = $("table1").getElementsByTagName("td");

                window.clearInterval(this.timeId);

                for(var i = 0 ; i < this.tableRows*this.tableCols ; i++){

                    tdobjs[i].innerHTML = (tdobjs[i].hasBomb==true?"雷":tdobjs[i].innerHTML);

                    tdobjs[i].onmousedown = function(){}

                }

                if(window.confirm("真遗憾，您输了！再接再厉！/n 再玩一局？")){

                    saolei.instance(saolei.tableRows, saolei.tableCols, saolei.BombNum);

                }else{

                    window.close();

                }

            }

        }

    }

    //玩家判断玩所有的格子,系统开始判断玩家是否过关

    if(this.iCellIsConfirm == this.tableRows*this.tableCols){

        this.isWin();

    }

}

//判断是否通关

saolei.isWin = function(){

    var tdobjs = $("table1").getElementsByTagName("td");

    for(var i = 0 ; i < this.tableRows*this.tableCols ; i++){

        if(tdobjs[i].hasBomb == false){

            if(tdobjs[i].state != 2){

                return;

            }

        }else{

            if(tdobjs[i].state != 1){

                return;

            }

        }

    }

    window.clearInterval(this.timeId);

    if(window.confirm("你真棒!共用时“"+this.curT+"”")){

        saolei.instance(saolei.tableRows, saolei.tableCols, saolei.BombNum);

    }else{

        window.close();

    }

}

//判断并显示周围的雷数

saolei.showBombCountAround = function(cellobj){

    var bombCountAround = 0;

    var row = cellobj.row;

    var col = cellobj.col;

    for(var i = row - 1 ; i <= row + 1 ; i++){

        for(var j = col - 1 ; j <= col + 1 ; j++){

            var id = "td_" + i + "_" + j;

            var obj = $(id);

            if(obj != null){

                if(obj.hasBomb == true){

                    bombCountAround = bombCountAround + 1;

                }

            }

        }

    }

    if(bombCountAround != 0){

        cellobj.innerHTML = bombCountAround;

    }

    else{

        for(var i = row - 1 ; i <= row + 1 ; i++){

            for(var j = col - 1 ; j <= col + 1 ; j++){

                var id = "td_" + i + "_" + j;

                var obj = $(id);

                if(obj != null){

                    this.tdonclick(obj, 1);

                }

            }

        }

    }

}

saolei.showleishu = function(){

    var leishu = $("leishu");

    var strBombNum = "";

    if(this.BombLeft >= 0 && this.BombLeft < 10){

        strBombNum = "00" + this.BombLeft;

    }

    else if(this.BombLeft >= 10 && this.BombLeft <100){

        strBombNum = "0" + this.BombLeft;

    }

    leishu.innerHTML = strBombNum;

}

saolei.jishi = function(){

    var spanTime = $("shijian");

    this.curT = this.curT + 1;

    var curT = "";

    if(this.curT >= 0 && this.curT < 10){

        curT = "00" + this.curT;

    }

    else if(this.curT >= 10 && this.curT <100){

        curT = "0" + this.curT;

    }

    else if(this.curT >= 100 && this.curT < 1000){

        curT = this.curT.toString();

    }

    else{

        window.clearInterval(this.timeId);

        if(window.confirm("很遗憾,你超时了!/n 重新开始？")){

            saolei.instance(saolei.tableRows, saolei.tableCols, saolei.BombNum);

        }else{

            window.close();

        }

    }

    spanTime.innerHTML = curT;

}

//显示格子里是否有雷

saolei.showBomb = function(){

    var tdobjs = $("table1").getElementsByTagName("td");

    for(var i = 0 ; i < this.tableRows*this.tableCols ; i++){

        tdobjs[i].innerHTML = (tdobjs[i].hasBomb==true?"雷":"&nbsp;");

    }

    return "启用秘笈成功";

}

//-->

</SCRIPT>

</HEAD>

<BODY οncοntextmenu="return false">

<div>

  <span>难度:</span>

  <span class="lvl" οnclick="startWithLv(1)">低</span>

  <span class="lvl" οnclick="startWithLv(2)">中</span>

  <span class="lvl" οnclick="startWithLv(3)">高</span>

</div>

<div>

  <span>剩余地雷数</span>

  <span id="leishu">000</span>

  <span>时间</span>

  <span id="shijian">000</span>

</div>

<div id="div1"></div>

</BODY>

</HTML>

地狱羔羊
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端技术搭建扫雷小游戏（内含源码）
官方推荐
06-01 3万+
六一儿童节了，为你的小朋友来实现一个扫雷游戏吧！通过扫雷游戏也能让你更进一步的感受前端基础三件套的作用及搭配
基于javascript扫雷小游戏，以前上学经常玩
编程界明世隐的博客
05-05 7468
引言： 扫雷是系统自带的经典小游戏，以前上学那会上机的时候就经常玩这个，趁着五一假期的最后一天，用canvas编写了这个小游戏，看着还行，不知道会不会有什么我没发现的bug，难度目前是设置成简易的，如果要改难度，代码稍做修改即可。 效果图 实现思路 1.创建9行9列的二维数组。 2.设置雷：随机行数 i 和列数 j，根据随机到 i、j 从二维数组中取出对应的元素，将取到的元素设置一个属性type等于1，表示当前元素已经是雷，并且递增雷计数器，然后递归调用；如果取到的元素已经是雷了，则跳过继续执
javaScript开发扫雷游戏
oldfish_的博客
11-19 1807
扫雷是windows自带的游戏，本文讲解如何通过JavaScript制作扫雷游戏。
js扫雷游戏
qq_45921597的博客
09-14 986
【代码】js扫雷游戏。
网页版扫雷小游戏
热门推荐
justBeHerHero
05-07 2万+
扫雷小游戏（原生js） 实验介绍 实验简介 先上一张效果图 源代码获取（非本文章中代码） $ git clone https://github.com/shiyanlou/js-minesweeper 学习网页 实验楼-网页版扫雷 实现原理 扫雷游戏的规则: 游戏面板上有一些格子，每个格子中有一个数字（空白表示数字为 0）或是地雷，格子中的数字表示格子周围格子中地雷的数量。玩家要做的...
扫雷小游戏制作教程：用HTML5和JavaScript打造经典游戏
interest_ing_的博客
03-11 2056
在这篇文章中，我们将一起学习如何使用HTML5和JavaScript来制作一个经典的扫雷小游戏。通过这个教程，你将了解如何创建游戏界面、处理用户交互以及实现游戏逻辑。即使你是编程新手，也能跟随步骤完成这个项目。
JS实现扫雷游戏（源代码带注释）
weixin_46019681的博客
10-04 3028
JS实现简单的扫雷游戏（源代码带注释）可以直接运行
纯js实现简单的扫雷小游戏
毕业作品网站
05-19 287
sweep-mine 纯js实现简单的扫雷小游戏 注意逻辑上：每次生成10 * 10的格子，随机生成10个雷，左键点击：如果是雷，10个雷全部显示出来，即给10个雷的格子背景换成“雷”的图片，如果不是雷，该给子周围的8个格子，是雷的数量，会显示在该格子上，如果该数字是0，即周围8个格子都不是雷，那么进行递归运算，周围8个格子，每个格子载进行一次“左键点击”事件，形成递归。 只有当含有雷的格子都被右键旗子标记，同时，雷的剩余数量是0时，即成功的找出了所有的雷 注意逻辑上：每次生成10 * 10的格子，随机生成
Javascript实现扫雷游戏
weixin_42533717的博客
11-21 5599
文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 本文是一篇关于如何用Javascript实现扫雷的博客，文章末尾有作者自己编写的扫雷程序， 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码如下（示例）： import numpy as np import pandas as pd import matplotlib.pyplo
使用纯javascript实现经典扫雷游戏
10-24
在本文中，我们将探讨如何使用纯JavaScript实现经典的扫雷游戏。扫雷游戏是一个深受用户喜爱的益智游戏，它挑战玩家的空间认知和逻辑推理能力。本文作者分享了他在初次学习JavaScript时编写的代码，旨在帮助其他...
JavaScript制作windows经典扫雷小游戏
10-24
扫雷是一款相当大众的小游戏,游戏目标是在最短的时间内根据点击格子出现的数字找出所有非雷格子,同时避免踩雷。今天我们来看看如何使用javascript来实现这款小游戏
原生JS网页版的扫雷小游戏代码源码.rar
01-27
原生JS网页版的扫雷小游戏代码源码
JavaScript版经典游戏之扫雷游戏完整示例【附demo源码下载】
10-20
主要介绍了JavaScript版经典游戏之扫雷游戏实现方法,结合完整实例形式分析了扫雷游戏的原理与具体实现流程,并附带demo源码供读者下载参考,需要的朋友可以参考下
Unity 物理动画：利用物理引擎创造逼真动作
最新发布
UnityBoy的博客
07-27 516
在Unity中，物理动画是一种利用物理引擎来模拟真实世界物理效果的动画技术。通过物理动画，开发者可以创造出更加逼真和自然的动画效果，如重力、碰撞、布料摆动等。本文将介绍Unity物理动画的基本概念、实现方法以及一些实用的技巧。
Unity Animator: 角色动画的得力助手
UnityBoy的博客
07-27 250
在Unity游戏开发中，Animator组件是实现角色动画的关键工具。它提供了一个强大而灵活的系统，用于控制角色的动作和表情，以及它们在不同状态之间的过渡。本文将深入探讨Unity Animator的基本概念、功能和使用技巧。
【Unity实战】yield return null还是WaitForEndOfFrame
u012587406的博客
07-24 402
yield return null会在下一帧继续执行，用于在每一帧之间进行操作。yield return new WaitForEndOfFrame()会等待当前帧渲染完成后再执行，用于在渲染操作完成后执行特定操作。
「Unity3D」场景中的距离单位Unit与相关设置PixelsToUnits、PixelsPerUnit
scott.cgi
07-25 392
这就涉及到一个问题，即如何按照比例显示像素？或说如何显示2D图片的大小？
扫雷游戏网页版html
03-13
扫雷游戏是一种经典的单人益智游戏，它的目＊＊＊。下面是一个简单的扫雷游戏网页版的HTML代码示例： ```html <!DOCTYPE html> 扫雷游戏 .cell { width: 20px; height: 20px; border: 1px solid #000; ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值