通过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 08 Javascript
Javascript优化技巧之短路表达式详细介绍
Mar 27 Javascript
jQuery结合ajax实现动态加载文本内容
May 19 Javascript
JavaScript程序开发之JS代码放置的位置
Jan 15 Javascript
利用Vue.js指令实现全选功能
Sep 08 Javascript
轻松理解Javascript变量的相关问题
Jan 20 Javascript
javascript 操作cookies详解及实例
Feb 22 Javascript
Angular实现响应式表单
Aug 04 Javascript
深入浅析ES6 Class 中的 super 关键字
Oct 20 Javascript
koa socket即时通讯的示例代码
Sep 07 Javascript
初试vue-cli使用HBuilderx打包app的坑
Jul 17 Javascript
js利用递归与promise 按顺序请求数据的方法
Aug 30 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 array_pop()数组函数将数组最后一个单元弹出(出栈)
2011/07/12 PHP
php输出全球各个时区列表的方法
2015/03/31 PHP
php生成图片验证码的方法
2016/04/15 PHP
php输出含有“#”字符串的方法
2017/01/18 PHP
JavaScript在多浏览器下for循环的使用方法
2012/11/07 Javascript
input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
2013/04/02 Javascript
jQuery的控件及事件(输入控件及回车事件)使用示例
2013/07/25 Javascript
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
2013/08/28 Javascript
IE8中使用javascript动态加载CSS的解决方法
2014/06/17 Javascript
Javascript验证用户输入URL地址是否为空及格式是否正确
2014/10/09 Javascript
JavaScript常用小技巧小结
2014/12/29 Javascript
jQuery自定义添加&quot;$&quot;与解决&quot;$&quot;冲突的方法
2015/01/19 Javascript
JS实现至少包含字母、大小写数字、字符的密码等级的两种方法
2015/02/03 Javascript
jQuery搜索子元素的方法
2015/02/10 Javascript
jQuery插件datepicker 日期连续选择
2015/06/12 Javascript
在Node.js应用中使用Redis的方法简介
2015/06/24 Javascript
jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果
2016/08/15 Javascript
Vue路由切换时的左滑和右滑效果示例
2018/05/29 Javascript
Vue.js单向绑定和双向绑定实例分析
2018/08/14 Javascript
浅谈从React渲染流程分析Diff算法
2018/09/08 Javascript
vue-cli 构建骨架屏的方法示例
2018/11/08 Javascript
如何基于vue-cli3.0构建功能完善的移动端架子
2019/04/24 Javascript
Vue v-text指令简单使用方法示例
2019/09/19 Javascript
Javascript组合继承方法代码实例解析
2020/04/02 Javascript
如何在JavaScript中使用localStorage详情
2021/02/04 Javascript
[04:30]显微镜下的DOTA2第五期——拉比克
2013/09/26 DOTA
Python使用urllib模块的urlopen超时问题解决方法
2014/11/08 Python
python实现图像识别功能
2018/01/29 Python
Python 实现数据结构-堆栈和队列的操作方法
2019/07/17 Python
StubHub墨西哥:购买和出售您的门票
2016/09/17 全球购物
Oracle中delete,truncate和drop的区别
2016/05/05 面试题
初三新学期计划书
2014/05/03 职场文书
学生违反校规检讨书
2014/10/28 职场文书
党员检讨书范文
2014/12/27 职场文书
2015年幼儿园班主任个人工作总结
2015/10/22 职场文书
Python利用Turtle绘制哆啦A梦和小猪佩奇
2022/04/04 Python