通过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 toggle使用分析
Nov 16 Javascript
JQuery index()方法使用代码
Jun 02 Javascript
jQuery实现动画效果的实例代码
May 07 Javascript
Jquery把获取到的input值转换成json
May 15 jQuery
微信小程序实现全国机场索引列表
Jan 31 Javascript
微信小程序scroll-view组件实现滚动动画
Jan 31 Javascript
JS实现中英文混合文字溢出友好截取功能
Aug 06 Javascript
微信小程序picker组件关于objectArray数据类型的绑定方法
Mar 13 Javascript
微信小程序request请求封装,验签代码实例
Dec 04 Javascript
浅谈vue项目,访问路径#号的问题
Aug 14 Javascript
浅析JavaScript预编译和暗示全局变量
Sep 03 Javascript
JavaScript继承的三种方法实例
May 12 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网页显示各种语法错误
2013/09/23 PHP
php二维码生成
2015/10/19 PHP
java微信开发之上传下载多媒体文件
2016/06/24 PHP
PHP简单获取随机数的常用方法小结
2017/06/07 PHP
脚本吧 - 幻宇工作室用到js,超强推荐expand.js
2006/12/23 Javascript
jquery animate 动画效果使用说明
2009/11/04 Javascript
利用jQuary实现文字浮动提示效果示例代码
2013/12/26 Javascript
Angular 根据 service 的状态更新 directive
2016/04/03 Javascript
用js动态添加html元素,以及属性的简单实例
2016/07/19 Javascript
Jquery Easyui搜索框组件SearchBox使用详解(19)
2016/12/17 Javascript
ionic grid(栅格)九宫格制作详解
2018/06/30 Javascript
Vuex的初探与实战小结
2018/11/26 Javascript
命令行批量截图Node脚本示例代码
2019/01/25 Javascript
JSONP解决JS跨域问题的实现
2020/05/25 Javascript
JavaScript实现手机号码 3-4-4格式并控制新增和删除时光标的位置
2020/06/02 Javascript
Vue切换div显示隐藏,多选,单选代码解析
2020/07/14 Javascript
详解Python中映射类型(字典)操作符的概念和使用
2015/08/19 Python
Python中static相关知识小结
2018/01/02 Python
利用pandas读取中文数据集的方法
2018/07/25 Python
使用numba对Python运算加速的方法
2018/10/15 Python
Python Matplotlib实现三维数据的散点图绘制
2019/03/19 Python
如何使用python3获取当前路径及os.path.dirname的使用
2019/12/13 Python
Pandas实现一列数据分隔为两列
2020/05/18 Python
Anaconda+vscode+pytorch环境搭建过程详解
2020/05/25 Python
Python实现一个简单的递归下降分析器
2020/08/01 Python
python爬虫调度器用法及实例代码
2020/11/30 Python
html5实现移动端适配完美写法
2017/11/16 HTML / CSS
女士和男士时尚鞋在线购物:Shoespie
2019/02/28 全球购物
DC Shoes俄罗斯官网:美国滑板鞋和服饰品牌
2020/08/19 全球购物
企业为何需要商业计划书
2013/12/26 职场文书
函授教育个人学习的自我评价
2013/12/31 职场文书
领导视察欢迎词
2014/01/15 职场文书
劲霸男装广告词
2014/03/21 职场文书
市场部业务员岗位职责
2014/04/02 职场文书
python 经纬度求两点距离、三点面积操作
2021/06/03 Python
教你使用Jenkins集成Harbor自动发布镜像
2022/04/03 Servers