jquery插件实现扫雷游戏(1)
本文实例为大家分享了jquery插件实现扫雷游戏第一篇的具体代码，供大家参考，具体内容如下
做一个扫雷
第一部分，完成绘制和点击动作
效果如下
代码部分
* {
margin: 0px;
padding: 0px;
font-size: 12px;
}
#div {
position: fixed;
top: 10px;
bottom: 10px;
left: 10px;
right: 10px;
border: 1px solid lightgray;
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
#box {
border: 1px solid lightgray;
border-radius: 5px;
}
.row {
white-space: nowrap;
height: 30px;
}
.item {
display: inline-flex;
justify-content: center;
align-items: center;
height: 30px;
width: 30px;
border-right: 1px solid lightgray;
border-bottom: 1px solid lightgray;
cursor: pointer;
position: relative;
}
.item::before{
position: absolute;
content: '';
top: 0.5px;
left:0.5px;
bottom: 0.5px;
right: 0.5px;
background-color: gray;
}
.item.click::before{
content: none;
}
.item:hover{
outline: 1px solid #2c3e50;
}
#menu {
border-bottom: 1px solid lightgray;
position: absolute;
top: 0;
left: 0;
right: 0;
height: 30px;
display: flex;
background-color: white;
}
.mitem{
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
.sl{
border: none;
border-bottom: 1px solid lightgray;
outline: none;
width: 60%;
height: 80%;
}
.btn{
border: none;
border: 1px solid lightgray;
outline: none;
width: 60%;
height: 80%;
background-color: transparent;
cursor: pointer;
}
.mitem *:hover{
background-color: lightgray;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>做一个扫雷</title>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/yqlsl.js"></script>
<link href="css/yqlsl.css" rel="external nofollow" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="div">
<div id="box">
</div>
<div id="menu">
<div class="mitem">
<select class="sl" id="x">
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
</select>
</div>
<div class="mitem">
<select class="sl" id="y">
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
</select>
</div>
<div class="mitem">
<select class="sl" id="c">
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
<option value="60">60</option>
<option value="70">70</option>
<option value="80">80</option>
<option value="90">90</option>
<option value="99">99</option>
</select>
</div>
<div class="mitem">
<button type="button" class="btn" id="pro">生成</button>
</div>
</div>
</div>
</body>
</html>
$(document).ready(function() {
var x = 10; //x轴
var y = 10; //y轴
var c = 10; //雷数
var boom = []; //产生炸弹的坐标
var $menu = $("#menu");
var $box = $("#box");
//同步参数
$("#x").change(function() {
x = parseInt($(this).val());
console.log(x);
})
$("#y").change(function() {
y = parseInt($(this).val());
})
$("#c").change(function() {
c = parseInt($(this).val());
})
$(document).on('click', '#box .item', function() {
$(this).addClass("click");
})
$("#pro").click(function() {
console.log(x,y,c)
draw();
})
draw();
function draw() { //绘制图片
$box.html('');
for (var a = 0; a < x; a++) {
var $row = $("<div class='row'></div>");
for (var b = 0; b < y; b++) {
var $item = $("<div class='item'></div>");
$item.appendTo($row);
}
$row.appendTo($box);
}
}
})
思路解释
- 首先就是参数的产生和内容的绘制，这些很容易做到
- 然后要做好准备的就是给每一个块状标记上坐标，方便后续的计算，直接操作
- 然后点击的效果通过伪类来实现，没点的时候伪类生成覆盖的遮罩，点完之后去掉就行了
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
jquery插件实现扫雷游戏(3)
本文实例为大家分享了jquery插件实现扫雷游戏的第3篇,供大家参考,具体内容如下 完成,效果感觉还不错,就是脸黑第一下容易挂 效果如下 代码部分 * { margin: 0px; padding: 0px; font-size: 12px; } #div { position: fixed; top: 10px; bottom: 10px; left: 10px; right: 10px; border: 1px solid lightgray; border-radius: 5px; dis
-
jquery插件实现扫雷游戏(2)
本文实例为大家分享了jquery插件实现扫雷游戏的第2篇,供大家参考,具体内容如下 完善了必要的 效果如下 代码部分 * { margin: 0px; padding: 0px; font-size: 12px; } #div { position: fixed; top: 10px; bottom: 10px; left: 10px; right: 10px; border: 1px solid lightgray; border-radius: 5px; display: flex; jus
-
jquery插件实现扫雷游戏(1)
本文实例为大家分享了jquery插件实现扫雷游戏第一篇的具体代码,供大家参考,具体内容如下 做一个扫雷 第一部分,完成绘制和点击动作 效果如下 代码部分 * { margin: 0px; padding: 0px; font-size: 12px; } #div { position: fixed; top: 10px; bottom: 10px; left: 10px; right: 10px; border: 1px solid lightgray; border-radius: 5px;
-
JQuery开发的数独游戏代码
用了很多Jquery的插件,支持鼠标滚轮选数字.没有什么高深的技术点.工作原因很长时间没有更新了,具体代码都有些记不清了,欢迎大家来拍砖.截图:演示地址:http://demo.jb51.net/js/jsukudo/index.html下载地址:jsukudo20081110v0.3.0.5.zip 下载列表:http://code.google.com/p/jsukudo/downloads/list 用到的JS文件 文件名 出处 说明 blockUI.js http://malsup.co
-
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
本文讲述了HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果.分享给大家供大家参考,具体如下: 因为本人是星际争霸系列游戏的忠实拥簇,所以在今天的jQuery教程中,我们将使用HTML5和jQuery插件Quicksand来创建一个超酷的星际争霸兵种效果图.希望大家喜欢! 先来看看效果图: HTML5代码 首先我们使用HTML5的代码来创建一个html文档,将所需的quicksand类库,及其jquery类库,还有HTML5类库倒入,如下: <!DOCTYPE h
-
强烈推荐240多个jQuery插件提供下载
jQuery 是一个快速的,简洁的 javaScript 库,使用户能更方便地处理 HTML documents.events.实现动画效果,并且方便地为网站提供 AJAX 交互. jQuery 还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择. jQuery 能够使用户的 html 页保持代码和 html 内容分离,也就是说,不用再在 html 里面插入一堆js来调用命令了,只需定义 id 即可.今天在Kollermedia.at上发现了一篇J
-
10款新鲜出炉的 jQuery 插件(Ajax 插件，有幻灯片、图片画廊、菜单等)
1. Chrome Style jQuery Image Gallery 一款用于实现漂亮的Chrome风格图片画廊的 jQuery 插件,在线演示 2. Awkward Showcase 使用这款插件可以实现各种内容的幻灯片展示效果,例如文本.图片.视频等等,在线演示 3. Waypoints 这款插件可以让你实现当滚动到某个目标元素的时候执行特定的动作,例如回到顶部,在线演示 4. bxSlider 这是一个内容滑块和图片幻灯片展示插件,可自定义很多参数,在线演示 5. A simple a
-
经典海量jQuery插件 大家可以收藏一下
其中有些已经无法访问,或许是文件移除,或许是被封锁.大家分享的东西,没什么特别的可说的,唯有感谢无私分享的人们.提醒大家在使用的时候注意jQuery包的版本问题,最好是使用相同的版本,因为使用了高版本很有可能出现或多或少的问题.并且其中英文插件在转换成中文时注意编码,推荐utf-8.jQuery插件-文件上传(File upload)Ajax File Upload.jQUploader.Multiple File Upload plugin.jQuery File Style.Styling
-
海量经典的jQuery插件集合
海量的jQuery插件帖,很经典,不知道什么时候开始流传,很早以前就收藏过,为了工作方便还是发了一份放在日志里面. 其中有些已经无法访问,或许是文件移除,或许是被封锁.大家分享的东西,没什么特别的可说的,唯有感谢无私分享的人们. 猫嗔提醒大家在使用的时候注意jQuery包的版本问题,最好是使用相同的版本,因为使用了高版本很有可能出现或多或少的问题.并且其中英文插件在转换成中文时注意编码,推荐utf-8. jQuery插件-文件上传(File upload)Ajax File Upload.jQU
-
jQuery插件artDialog.js使用与关闭方法示例
本文实例讲述了jQuery插件artDialog.js使用与关闭方法.分享给大家供大家参考,具体如下: 子窗口关闭artdialog终极解决方案: window.parent.window.art.dialog({ id: 'qin123' }).close(); <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-t