通过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 相关文章推荐
jquery简单体验
Jan 10 Javascript
js 覆盖和重载 函数
Sep 25 Javascript
JS获取当前日期时间并定时刷新示例
Mar 04 Javascript
JS获取随机数和时间转换的简单实例
Jul 10 Javascript
ES6中的数组扩展方法
Aug 26 Javascript
jquery对Json的各种遍历方法总结(必看篇)
Sep 29 Javascript
原生js实现吸顶效果
Mar 13 Javascript
详谈for循环里面的break和continue语句
Jul 20 Javascript
jQuery实现table中两列CheckBox只能选中一个的示例
Sep 22 jQuery
JavaScript实现数值自动增加动画
Dec 28 Javascript
在vue-cli3中使用axios获取本地json操作
Jul 30 Javascript
Vue项目打包编译优化方案
Sep 16 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小经验:解析preg_match与preg_match_all 函数
2013/06/29 PHP
用PHP来计算某个目录大小的方法
2014/04/01 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(四)
2014/06/23 PHP
Win7下手动安装apache2.2、php5.4笔记
2015/04/03 PHP
Yii2 RESTful中api的使用及开发实例详解
2016/07/06 PHP
php微信公众号开发之秒杀
2018/10/20 PHP
php curl发送请求实例方法
2019/08/01 PHP
jQueryUI的Dialog的简单封装
2010/06/07 Javascript
js获取url参数代码实例分享(JS操作URL)
2013/12/13 Javascript
jquery实现全选、不选、反选的两种方法
2016/09/06 Javascript
javascript使用闭包模拟对象的私有属性和方法
2016/10/05 Javascript
JS制作适用于手机和电脑的通知信息效果
2016/10/28 Javascript
教大家轻松制作Bootstrap漂亮表格(table)
2016/12/13 Javascript
JS常见算法详解
2017/02/28 Javascript
AngularJS的脏检查深入分析
2017/04/22 Javascript
jQuery中的deferred对象和extend方法详解
2017/05/08 jQuery
layui+SSM的数据表的增删改实例(利用弹框添加、修改)
2019/09/27 Javascript
vue+elementUi 实现密码显示/隐藏+小图标变化功能
2020/01/18 Javascript
详解ES6实现类的私有变量的几种写法
2021/02/10 Javascript
python中查看变量内存地址的方法
2015/05/05 Python
对pandas的dataframe绘图并保存的实现方法
2017/08/05 Python
利用python实现汉字转拼音的2种方法
2019/08/12 Python
Python实现FLV视频拼接功能
2020/01/21 Python
Python字符串函数strip()原理及用法详解
2020/07/23 Python
如何用python实现一个HTTP连接池
2021/01/14 Python
HTML5图片层叠的实现示例
2020/07/07 HTML / CSS
Dr. Martens马汀博士澳大利亚官网:马丁靴鼻祖
2019/07/02 全球购物
优秀老员工获奖感言
2014/02/15 职场文书
法制报告会主持词
2014/04/02 职场文书
生产文员岗位职责
2014/04/05 职场文书
《风筝》教学反思
2014/04/10 职场文书
设计专业自荐信
2014/06/19 职场文书
献爱心标语
2014/06/21 职场文书
四年级数学上册教学计划
2015/01/20 职场文书
商标侵权律师函
2015/05/27 职场文书
关于军训的感想
2015/08/07 职场文书