通过javascript实现扫雷游戏代码实例

这篇文章主要介绍了通过javascript实现扫雷游戏代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

html代码：

<div id="mine">
      <div class="level">
        <button type="button">初级</button>
        <button type="button">中级</button>
        <button type="button">高级</button>
        <button type="button">重新开始</button>
      </div>
      <div class="gameBox"></div>
      <div class="info">
        剩余雷数：<span class="mineNum"></span>
      </div>
    </div>

css代码：

#mine {
  margin: 50px auto;
}
.level {
  text-align: center;
  margin-bottom: 10px;
}
.level button {
  padding: 5px 15px;
  background-color: cornflowerblue;
  border: none;
  color: #fff;
  border-radius: 3px;
  outline: none;
  cursor: pointer;
}
.level button.active {
  background-color: #00abff;
}
.info {
  margin-top: 10px;
  text-align: center;
}
table {
  border-spacing: 1px;
  background: #929196;
  margin: 0 auto;
}
td {
  padding: 0;
  width: 20px;
  height: 20px;
  background: #ccc;
  border: 2px solid;
  border-color: #fff #a1a1a1 #a1a1a1 #fff;

  text-align: center;
  line-height: 20px;
  font-weight: bold;
}
td.zero {
  border-color: #D9D9D9;
  background: #D9D9D9;
}
td.one {
  border-color: #D9D9D9;
  background: #D9D9D9;
  color: #0332fe;
}
td.two {
  border-color: #D9D9D9;
  background: #D9D9D9;
  color: #019f02;
}
td.three {
  border-color: #D9D9D9;
  background: #D9D9D9;
  color: #ff2600;
}
td.four {
  border-color: #D9D9D9;
  background: #D9D9D9;
  color: #93208f;
}
td.five {
  border-color: #D9D9D9;
  background: #D9D9D9;
  color: #019f02;
}
td.six {
  border-color: #D9D9D9;
  background: #D9D9D9;
  color: #ff3fff;
}
td.seven {
  border-color: #D9D9D9;
  background: #D9D9D9;
  color: #3fffbf;
}
td.eight {
  border-color: #D9D9D9;
  background: #D9D9D9;
  color: #22ee0f;
}
.mine {
  background: #d9d9d9 url(./mine.png) no-repeat center;
  background-size: cover;
}
.flag {
  background: #ccc url(./flag.png) no-repeat center;
  background-size: cover;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JavaScript版经典游戏之扫雷游戏完整示例【附demo源码下载】

    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

  • 使用纯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版扫雷实现代码 原理不错

    js版扫雷实现代码 原理不错

    效果图:以下代码复制粘贴到记事本后保存为.html文件,打开后会出现提示,右击允许即可: 寻雷-----by 魅月 var data=new Array( [0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0

  • js实现扫雷小程序的示例代码

    初学javascript,写了一个扫雷程序练练手! 扫雷规则及功能 扫雷想必大家都不陌生,就是windows上点击排雷的小游戏,它的主要规则有 1.左键点击显示当前格子是否为雷,如果为雷的话,GameOver啦,如果不是雷的话,这个格子会显示周围八个格子内的雷数量. 2.鼠标右键标记,标记可能的雷,标记了之后取消需要再次右键点击该格子,左键无效果. 3.鼠标中键(滚轮)按下后,快捷扫雷(如果周围雷数和未被标记且未被翻开的格子相等,会将这些格子一并翻开) 主要功能基本完全复刻了windows7扫雷

  • 分享自己用JS做的扫雷小游戏

    分享自己用JS做的扫雷小游戏

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

  • 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制作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

  • HTML+JavaScript实现扫雷小游戏

    HTML+JavaScript实现扫雷小游戏

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

  • 通过javascript实现扫雷游戏代码实例

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

  • 基于C语言实现的扫雷游戏代码

    本文详细讲述了基于C语言实现的扫雷游戏代码,代码中备有比较详细的注释,便于读者阅读和理解.希望对学习游戏开发的朋友能有一点借鉴价值. 完整的实例代码如下: /* 模拟扫雷游戏 */ #include <graphics.h> #include <math.h> #include <stdio.h> #include <dos.h> #include <stdlib.h> #include <conio.h> #include <

  • 基于JavaScript伪随机正态分布代码实例

    这篇文章主要介绍了基于JavaScript伪随机正态分布代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 在游戏开发中经常遇到随机奖励的情况,一般会采取先生成数组,再一个一个取的方式发随机奖励. 下面是js测试正态分布代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

  • 原生JavaScript实现日历功能代码实例(无引用Jq)

    原生JavaScript实现日历功能代码实例(无引用Jq)

    这篇文章主要介绍了原生JavaScript实现日历功能代码实例(无引用Jq),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 成品显示,可左右切换月份 html 代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=devi

  • Javascript Worker子线程代码实例

    这篇文章主要介绍了Javascript Worker子线程代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 main.js code: //创建 var worker = new Worker("./worker.js"); //发送 worker.postMessage(1); //接收 worker.onmessage = (e)=>{ console.log("main.js:"); consol

  • Javascript原生ajax请求代码实例

    这篇文章主要介绍了Javascript原生ajax请求代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 代码如下 class Ajax{ constructor(url, method, data, callback_suc, callback_err, callback_run){ this.RT = true;//默认为异步请求 this.url = url; this.method = method || "POST";

  • javascript里使用php代码实例

    本文实例讲述了javascript里使用php代码的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <script type="text/javascript" > <?php if (!empty($searchResult)):?> $.searchModule.init({display:<?php echo MAX_KEYWORDS_DISPLAY_COUNT; ?>, mode:<?php echo $searc

  • JavaScript实现身份证验证代码实例

    这篇文章主要介绍了JavaScript实现身法证验证代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 function isIdCardNo(num) { num = num.toUpperCase(); //身份证号码为15位或者18位,15位时全为数字,18位前17位为数字,最后一位是校验位,可能为数字或字符X. if (!(/(^\d{15}$)|(^\d{17}([0-9]|X)$)/.test(num))) { //alert(

  • Python实现打砖块小游戏代码实例

    这次用Python实现的是一个接球打砖块的小游戏,需要导入pygame模块,有以下两条经验总结: 1.多父类的继承2.碰撞检测的数学模型 知识点稍后再说,我们先看看游戏的效果和实现: 一.游戏效果 二.游戏代码 #导入模块 import pygame from pygame.locals import * import sys,random,time,math class GameWindow(object): '''创建游戏窗口类''' def __init__(self,*args,**kw

  • 基于JavaScript实现猜数字游戏代码实例

    环境 vscode 1.46 Microsoft Edge 83 示例 以下内容为了解和熟悉 JavaScript,不需要理解,能够复制粘贴并正确运行即可. 新建网页模板 在 vscode 中新建一个 index.html 文件,然后输入以下内容. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>猜数字游戏</title> <style&

随机推荐