扫雷游戏javascript版

最新推荐文章于 2024-07-30 10:56:44 发布
最新推荐文章于 2024-07-30 10:56:44 发布
阅读量977 收藏
点赞数
文章标签： javascript 游戏 function input timer up
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Linyufa/article/details/4141586
版权

最近心血来潮，用JavaScript实现了Windows自带的扫雷游戏，在IE 9，Firefox 14，Chrome 9测试通过，。以下是源代码:

 

<script type="text/javascript">

 function StringBuffer(){

   this._strings = new Array();

 }

 StringBuffer.prototype.append = function(str) {

   this._strings.push(str);

 }

 StringBuffer.prototype.toString = function() {

   return this._strings.join("");

 }

 

 var rownum; //row number

 var colnum;//column number

 var minenum;//mine number

 var totalCellNum;// total number of cell

 var elapseTime;//elapse time for mine sweeping

 varstatedNum; // swept cell number

 var elapseSpan;// for display elapse time

 var tick;// timer for mine sweeping

 var isover= false;

 

 //generating mine area

 function init(){

   rownum =parseInt(document.mineform.rownum.value);

   colnum = parseInt(document.mineform.colnum.value);

   minenum = parseInt(document.mineform.minenum.value);

   totalCellNum = rownum * colnum;

 

   var buffer= new StringBuffer();

   buffer.append("<tablecellspacing=\"0\" cellpadding=\"0\" >");

   for (var i = 0; i < rownum;i++) {

      buffer.append("<tr>");

     for(var j = 0; j < colnum;j++)

        buffer.append("<td bgcolor='#AAA898' id=\"" +i + "_" +j +

                "\" name='cell' />&nbsp;</td>");

     buffer.append("</tr>");

   }

   buffer.append("</table>");

   var workarea= document.getElementById("workarea");

   workarea.innerHTML = buffer.toString();

   mine(); // lay mines at the work area

   startTick(); // starting time

   isover = false;

 }

 

 // periodically update the elapsed time

 function displayelapsedTime(){

   elapseSpan.innerHTML = elapseTime++;

   if (elapseTime> 999)

     stopTick();

 }

 

 // start up the timer for sweeping mine

 function startTick(){

   if (tick) stopTick();

   elapseTime = 0;

   statedNum = 0;

   elapseSpan = document.getElementById("elapse");

   document.getElementById("message").innerHTML = "";

   tick = setInterval(displayelapsedTime, 1000); // start tick

 }

 

 // stop the timer

 function stopTick(){

   clearInterval(tick);

   tick = null;

 }

 

 // lay mines at the work area

 function mine(){

   var arr = new Array(totalCellNum);

 

   for(var i = 0; i <totalCellNum; i++)

     arr[i] = i;

 

   for(var i = 0; i < minenum;i++) {

      var suffix= Math.floor(arr.length * Math.random());

     var rnd= arr[suffix];

     var row= Math.floor(rnd / colnum);

     var col= rnd % colnum;

     var cell= document.getElementById(row + "_" + col);

     cell.mine = "●";

     arr.splice(suffix, 1);

   }

   calcMineForAll();

 }

 

 // calculating mine number for each cell

 function calcMineForAll(){

   for(var i = 0; i < rownum; i++) {

      for(var j = 0; j < colnum;j++) {

        calcMine(i,j);

     }

   }

 }

 

 // calculating mine number for given cell

 function calcMine(row,col) {

   var cell = document.getElementById(row + "_" + col);

   var nums= 0;

 

   if(row > 0) {

      if(col> 0) {

        if(document.getElementById((row- 1) + "_" +(col - 1)).mine) //top left

          nums++;

     }

      if(col< colnum - 1) {

        if(document.getElementById((row- 1) + "_" +(col + 1)).mine) //top right

          nums++;

     }

      if(document.getElementById((row- 1) + "_" +col).mine) // top

        nums++;         

   }

   if(row < rownum - 1) {

      if(col> 0) {

        if(document.getElementById((row+ 1) + "_" +(col - 1)).mine) //bottom left

          nums++;

     }

      if(col< colnum - 1) {

        if(document.getElementById((row+ 1) + "_" +(col + 1)).mine) //bottom right

          nums++;

     }

      if(document.getElementById((row+ 1) + "_" +col).mine) // bottom

        nums++;

   }

   if(col > 0)

     if(document.getElementById(row+ "_" +(col - 1)).mine) //left

        nums++;

   if(col < colnum- 1)

     if(document.getElementById(row+ "_" +(col + 1)).mine) //right

        nums++;

   //if(typeof(cell.mine) =="undefined")

   cell.nums = nums;

 }

 

 // count number of marked cell around givencoordinate

 function countMarkNum(row,col) {

   var nums = 0;

   if(row > 0) {

      if(col> 0) {//top left

        if(document.getElementById((row - 1) + "_" + (col -1)).state == "mark")

          nums++;

     }

      if(col< colnum - 1) { //top right

        if(document.getElementById((row - 1) + "_" + (col +1)).state == "mark")

          nums++;

     }

      if(document.getElementById((row- 1) + "_" +col).state == "mark")// top

        nums++;         

   }

   if(row < rownum -1) {

      if(col> 0) { //bottom left

        if(document.getElementById((row + 1) + "_" + (col -1)).state == "mark")

          nums++;

     }

      if(col< colnum - 1) { //bottom right

        if(document.getElementById((row + 1) + "_" + (col +1)).state == "mark")

          nums++;

     }

      if(document.getElementById((row+ 1) + "_" +col).state == "mark")// bottom

        nums++;

   }

   if(col > 0)

     if(document.getElementById(row+ "_" +(col - 1)).state == "mark") //left

        nums++;

   if(col < colnum- 1)

     if(document.getElementById(row+ "_" +(col + 1)).state == "mark") //right

        nums++;

   return nums;

 }

 

 // click the cell

 function clickMe(cell){

   if (!cell.state && !cell.getAttribute("state")){

      // if incautiontouch the mine, game over immediately

     if (cell.mine== "●" ||cell.getAttribute("mine") == "●"){

        gameover(cell);

        return;

     }

      if (cell.nums> 0) {

        cell.state= "up";

        statedNum++;

        cell.className = "up";

        cell.innerHTML =getColoredNum(cell.nums);

       

     } else {

        var a= cell.id.split("_");

        var row = parseInt(a[0]);

        var col = parseInt(a[1]);

        disclose(row, col);

     }

      isWin();

   }

 }

 

 // touch the mine, game over

 function gameover(element){

   for(var i = 0; i < rownum; i++) {

      for(var j = 0; j < colnum;j++) {

        var cell= document.getElementById(i + "_" + j);

        if (cell.state == "up" || cell.getAttribute("state")== "up")continue;

        if (cell.mine || cell.getAttribute("mine")) {

          if (!cell.state&& !cell.getAttribute("state")) {

            cell.innerHTML= "●";

            cell.style.cssText = "font-family:宋体";

          }

        }

      }

   }

   isover = true;

   element.state = "up";

   element.innerHTML = "●";

   element.style.cssText = "color:#AA0000;font-family:宋体;font-size:14px";

   stopTick();

   document.getElementById("message").innerHTML =

     "<font color='#DD0000'>Sorry,you lost the game!</font>";

 }

 

 // get colored number, difference numberwill be colored difference color

 function getColoredNum(nums){

   var color;

   switch(nums){

      case 1:color = "#0000EE";break;

     case 2:color = "#00AA00";break;

     case 3:color = "#990000";break;

     case 4:color = "#FF0000";break;

     case 5:color = "#550000";break;

     case 6:color = "#550055";break;

     case 7:color = "#223366";break;

     default:color = "#000000";

   }

   return "<font color=" + color + ">" + nums + "</font>";

 }

 

 

 function disclose(row, col) {

   var cell = document.getElementById(row + "_" + col);

   if(cell &&!cell.mine && !cell.getAttribute("mine") && !cell.state&& !cell.getAttribute("cell")) {

      cell.state = "up";

     cell.className = "up";

     statedNum++;

     if (cell.nums== 0) {

        if(row> 0) {

          disclose(row- 1, col);

          if(col > 0) // top left

            disclose(row- 1, col - 1);

          if(col < colnum -1) // top right

            disclose(row- 1, col + 1);         

        }

        if(row< rownum - 1) {

            disclose(row+ 1, col);

          if(col > 0) // bottom left

            disclose(row+ 1, col - 1);

          if(col < colnum -1) // bottom right

            disclose(row+ 1, col + 1);         

        }

        if(col> 0)

          disclose(row, col - 1); // left

        if(col < colnum -1)

          disclose(row, col + 1);  // right   

      } else {

        cell.innerHTML= getColoredNum(cell.nums);

     }

   }

 }

 

 // mark or unmark a cell

 function markMe(cell){

   if (cell.state == "mark" || cell.getAttribute("state")== "mark"){

      cell.innerHTML = "&nbsp;";

     cell.state = undefined;

     statedNum--;

   } else if (!cell.state&& !cell.getAttribute("state")) {

      cell.innerHTML = "F";

     cell.state = "mark";

     statedNum++;

     isWin();

   }

 }

 

 // determine the game is win

 function isWin(){

   if (statedNum == totalCellNum) {

      document.getElementById("message").innerHTML=

        "<font color='#008800'>Congratulations, you won thegame!</font>";

     stopTick();

   }

 }

 

 // when left and right key down

 function doubleClick(cell){

   if(!cell.state && !cell.getAttribute("state")){

      clickMe(cell);

     return;

   }

   

   var a = cell.id.split("_");

   var row= parseInt(a[0]);

   var col= parseInt(a[1]);

   if (cell.innerHTML.indexOf(">" +countMarkNum(row, col) + "</") > -1) {

      if(row> 0) {

        clickMe(document.getElementById((row- 1) + "_" +col));

        if(col > 0) // top left

          clickMe(document.getElementById((row- 1) + "_" +(col - 1)));

        if(col < colnum -1) // top right

          clickMe(document.getElementById((row- 1) + "_" +(col + 1)));         

     }

      if(row< rownum - 1) {

        clickMe(document.getElementById((row+ 1) + "_" +col));

        if(col > 0) // bottom left

          clickMe(document.getElementById((row+ 1) + "_"+ (col - 1)));

        if(col < colnum -1) // bottom right

          clickMe(document.getElementById((row+ 1) + "_" +(col + 1)));         

     }

      if(col> 0)

        clickMe(document.getElementById(row + "_" + (col - 1))); // left

      if(col < colnum -1)

        clickMe(document.getElementById(row + "_" + (col +1)));  // right

   }

 }

 

 // process all mouse key down event

 function mouseKeyPress(evt){

   var e = window.event || evt;

   var cell= e.srcElement ? e.srcElement : e.target;

   if(cell.parentNode.name== "cell" ||cell.parentNode.getAttribute("name") == "cell")

     cell = cell.parentNode;

   var cellName= cell.name ? cell.name : cell.getAttribute("name");

   if(cellName == "cell" &&!isover) {

      var retVal =mouse_up(e);

     if (retVal== 1) //left click

        clickMe(cell);

     else if (retVal== 2) //right click

        markMe(cell);

     else if (retVal== 3) //left and right click

        doubleClick(cell);

   }

   return false;

 }

 

 var clickValue = 0;

 var isFirstUP= false;

 function mouse_up(event){

    varretVal;

   if (clickValue== 1) {

      if (event.button== 1 || event.button == 0) {

        retVal= 1;

     } else if (event.button== 2) {

        retVal= 2;

     }

      clickValue = 0;

   } else if (clickValue== 2 && !isFirstUp) {

      clickValue = 0;

     retVal = 3;

   }

   isFirstUp = false;

    return retVal;

 }

 

 function mouse_down(event) {

   isFirstUp = false;

   clickValue++;

    return false;

 }

 

 function textmenuClick(event) {

    event = window.event || event;

   event.returnValue = false;

   event.cancelValue = true;

    return false;

 }

</script>

 

<style type="text/css">

body{

  font-size:14px; font-family: verdana;

}

input{

  font-size:12px; padding: 0px; margin: 0px;

}

table{border:2px solid #6E6560;}

td{

  height:19px; width:20px;

  font-family: Arial Black;

  text-align: center;

  padding-top:3px;

  font-size: 12px;

  cursor:default;

  border-left: 2px solid #D5D3D0;

  border-top: 2px solid #D5D3D0;

  border-right: 2px solid #6E6560;

  border-bottom: 2px solid #6E6560;

}

.up{

  border-right: 2px solid #F6F3F0; border-bottom: 2px solid #F6F3F0; background:#F6F3F0;

}

</style>

 

<html>

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

<body>

<div align="center">

<form name="mineform">

 Row: <input type="text" name="rownum"size="5" value="15"/>

 Column: <input type="text" name="colnum"size="5" value="20"/>

 Mine Number: <input type="text" name="minenum"size="5" value="50"/>

   <input type="button" value=" Start" name="start" onclick="init()"/>

 Elapsed Time: <span id="elapse" style="width:30px;font-family:ArialBlack" align="right"></span>

</form>

 

<p></p>

<div id="workarea" oncontextmenu="return textmenuClick(event)"

    onmouseup="return mouseKeyPress(event)" onmousedown="return mouse_down(event)"></div>

<p></p>

<p></p>

<div id="message" style="font-family:ArialBlack;font-size:16px"></div>

</div>

</body>

</html>

 

Linyufa
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端技术搭建扫雷小游戏（内含源码）
官方推荐
06-01 3万+
六一儿童节了，为你的小朋友来实现一个扫雷游戏吧！通过扫雷游戏也能让你更进一步的感受前端基础三件套的作用及搭配
基于javascript扫雷小游戏，以前上学经常玩
编程界明世隐的博客
05-05 7469
引言： 扫雷是系统自带的经典小游戏，以前上学那会上机的时候就经常玩这个，趁着五一假期的最后一天，用canvas编写了这个小游戏，看着还行，不知道会不会有什么我没发现的bug，难度目前是设置成简易的，如果要改难度，代码稍做修改即可。 效果图 实现思路 1.创建9行9列的二维数组。 2.设置雷：随机行数 i 和列数 j，根据随机到 i、j 从二维数组中取出对应的元素，将取到的元素设置一个属性type等于1，表示当前元素已经是雷，并且递增雷计数器，然后递归调用；如果取到的元素已经是雷了，则跳过继续执
javaScript开发扫雷游戏
oldfish_的博客
11-19 1810
扫雷是windows自带的游戏，本文讲解如何通过JavaScript制作扫雷游戏。
Javascript实现扫雷游戏
weixin_42533717的博客
11-21 5603
文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 本文是一篇关于如何用Javascript实现扫雷的博客，文章末尾有作者自己编写的扫雷程序， 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码如下（示例）： import numpy as np import pandas as pd import matplotlib.pyplo
js扫雷游戏
qq_45921597的博客
09-14 987
【代码】js扫雷游戏。
JavaScript扫雷最终版
2201_75650672的博客
05-17 1145
图片全体替换成立base64格式，视图大小调整成了自适应，新增了拖动菜单，左键单击可以重新开始上一次游戏，右键隐藏菜单，以下代码全部复制粘贴进一个空白的html文件里就能玩了。
JavaScript实现扫雷游戏(附完整源码)
希望我的博客，能帮上你解决学习中工作中所遇到的问题
10-25 138
JavaScript实现扫雷游戏(附完整源码)
网页版扫雷小游戏
热门推荐
justBeHerHero
05-07 2万+
扫雷小游戏（原生js） 实验介绍 实验简介 先上一张效果图 源代码获取（非本文章中代码） $ git clone https://github.com/shiyanlou/js-minesweeper 学习网页 实验楼-网页版扫雷 实现原理 扫雷游戏的规则: 游戏面板上有一些格子，每个格子中有一个数字（空白表示数字为 0）或是地雷，格子中的数字表示格子周围格子中地雷的数量。玩家要做的...
JavaScript网页特效-“扫雷”游戏随机布雷功能
weixin_43396749的博客
11-25 910
JavaScript网页特效-“扫雷”游戏随机布雷功能
javascript 扫雷游戏
10-29
最近心血来潮，用JavaScript实现了Windows自带的扫雷游戏。当前只实现了基本功能，还有一个缺点就是只能在IE上正常运行，估计是事件没有处理好。
JavaScript实现的扫雷游戏
08-10
JavaScript 实现的扫雷游戏
使用纯javascript实现经典扫雷游戏
10-24
在本文中，我们将探讨如何使用纯JavaScript实现经典的扫雷游戏。扫雷游戏是一个深受用户喜爱的益智游戏，它挑战玩家的空间认知和逻辑推理能力。本文作者分享了他在初次学习JavaScript时编写的代码，旨在帮助其他...
基于原生JavaScript实现的扫雷小游戏.zip
10-23
基于原生JavaScript实现的扫雷小游戏 基于原生JavaScript实现的扫雷小游戏 基于原生JavaScript实现的扫雷小游戏 基于原生JavaScript实现的扫雷小游戏 基于原生JavaScript实现的扫雷小游戏 基于原生JavaScript实现的...
JavaScript青少年简明教程：函数及其相关知识（下）
cnds123的专栏
07-26 652
JavaScript青少年简明教程：函数及其相关知识（下）
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 440
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
VUE3自定义指令防止重复点击多次提交
最新发布
MadSnail00的博客
07-30 83
vue3连续点击按钮重复提交，vue3自定义指令防止重复提交
已解决：vue-office/excel 多个sheet点击切换，滚动条高度不重置，表格视图位置不正确
weixin_42289080的博客
07-26 268
解决 @vue-office/excel 多个sheet切换，内容以及滚动条展示不正确的问题
扫雷游戏网页版html
03-13
扫雷游戏是一种经典的单人益智游戏，它的目＊＊＊。下面是一个简单的扫雷游戏网页版的HTML代码示例： ```html <!DOCTYPE html> <html> <head> <title>扫雷游戏</title> <style> .cell { width: 20px; height: 20px; border: 1px solid #000; display: inline-block; text-align: center; vertical-align: middle; font-size: 14px; cursor: pointer; } </style> </head> <body> <h1>扫雷游戏</h1> <div id=&quot;gameBoard&quot;></div> <script> // 游戏逻辑代码 // ... </script> </body> </html> ``` 在上面的示例中，我们使用了HTML、CSS和JavaScript来创建一个简单的扫雷游戏网页版。其中，`<div id=&quot;gameBoard&quot;></div>`用于显示游戏的方格矩阵，通过JavaScript代码来实现游戏的逻辑。 请注意，上述代码只是一个简单的示例，实际的扫雷游戏网页版可能需要更多的HTML、CSS和JavaScript代码来实现完整的功能，如生成地雷、计算周围地雷数量等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值