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


Posted in Javascript onFebruary 09, 2020

这篇文章主要介绍了通过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;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript写了一个清除“logo1_.exe”的杀毒工具(可扫描目录)
Feb 09 Javascript
javascript 必知必会之closure
Sep 21 Javascript
jquery更换文章内容与改变字体大小代码
Sep 30 Javascript
jquery中live()方法和bind()方法区别分析
Jun 23 Javascript
仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件
Jul 01 Javascript
js中的eval()函数把含有转义字符的字符串转换成Object对象的方法
Dec 02 Javascript
js判断iframe中元素是否存在的实现代码
Dec 24 Javascript
Bootstrap datepicker日期选择器插件使用详解
Jul 26 Javascript
结合mint-ui移动端下拉加载实践方法总结
Nov 08 Javascript
利用JS实现一个同Excel表现的智能填充算法
Aug 13 Javascript
微信小程序日历/日期选择插件使用方法详解
Dec 28 Javascript
javaScript Array api梳理
Mar 31 Javascript
jQuery实现简单聊天室
Feb 08 #jQuery
jquery实现点击弹出对话框
Feb 08 #jQuery
jQuery实现简易聊天框
Feb 08 #jQuery
jquery添加div实现消息聊天框
Feb 08 #jQuery
js实现聊天对话框
Feb 08 #Javascript
jQuery实现聊天对话框
Feb 08 #jQuery
jquery实现聊天机器人
Feb 08 #jQuery
You might like
php中禁止单个IP与ip段访问的代码小结
2012/07/04 PHP
php开启openssl的方法
2014/05/15 PHP
php读取torrent种子文件内容的方法(测试可用)
2016/05/03 PHP
PHP性能分析工具xhprof的安装使用与注意事项
2017/12/19 PHP
用PHP做了一个领取优惠券活动的示例代码
2019/07/05 PHP
非常不错的一个javascript 类
2006/11/07 Javascript
JavaScript中this关键字使用方法详解
2007/03/08 Javascript
获取客户端电脑日期时间js代码(jquery)
2012/09/12 Javascript
jquery获取iframe中的dom对象(两种方法)
2013/07/02 Javascript
JavaScript中pop()方法的使用教程
2015/06/09 Javascript
基于jquery实现智能表单验证操作
2016/05/09 Javascript
JS传值出现中文参数乱码的解决方法
2016/06/30 Javascript
Canvas 绘制粒子动画背景
2017/02/15 Javascript
JavaScript校验Number(4,1)格式的数字实例代码
2017/03/13 Javascript
jQuery用noConflict代替$的实现方法
2017/04/12 jQuery
p5.js入门教程和基本形状绘制
2018/03/15 Javascript
详解JS函数stack size计算方法
2018/06/18 Javascript
Javascript读取上传文件内容/类型/字节数
2019/04/30 Javascript
小程序绑定用户方案优化小结
2019/05/15 Javascript
测试、预发布后用python检测网页是否有日常链接
2014/06/03 Python
跟老齐学Python之集合的关系
2014/09/24 Python
python 根据正则表达式提取指定的内容实例详解
2016/12/04 Python
python使用opencv进行人脸识别
2017/04/07 Python
基于Pandas读取csv文件Error的总结
2018/06/15 Python
pygame游戏之旅 添加游戏介绍
2018/11/20 Python
python实现微信每日一句自动发送给喜欢的人
2019/04/29 Python
Pytorch提取模型特征向量保存至csv的例子
2020/01/03 Python
python“静态”变量、实例变量与本地变量的声明示例
2020/11/13 Python
python 制作磁力搜索工具
2021/03/04 Python
触发器(trigger)的功能都有哪些?写出一个触发器的例子
2012/09/17 面试题
银行出纳岗位职责
2013/11/25 职场文书
历史系自荐信范文
2013/12/24 职场文书
公司领导九九重阳节发言稿2014
2014/09/25 职场文书
Nginx搭建rtmp直播服务器实现代码
2021/03/31 Servers
MySQL查询学习之基础查询操作
2021/05/08 MySQL
Pygame Event事件模块的详细示例
2021/11/17 Python