jquery插件實(shí)現(xiàn)掃雷游戲(1)
更新時(shí)間：2021年04月26日 17:05:32 作者：阿飛超努力
這篇文章主要為大家詳細(xì)介紹了jquery插件實(shí)現(xiàn)掃雷游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了jquery插件實(shí)現(xiàn)掃雷游戲第一篇的具體代碼，供大家參考，具體內(nèi)容如下
做一個(gè)掃雷
第一部分，完成繪制和點(diǎn)擊動(dòng)作
效果如下
代碼部分
* {
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>做一個(gè)掃雷</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; //雷數(shù)
var boom = []; //產(chǎn)生炸彈的坐標(biāo)
var $menu = $("#menu");
var $box = $("#box");
//同步參數(shù)
$("#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);
}
}
})
思路解釋
- 首先就是參數(shù)的產(chǎn)生和內(nèi)容的繪制，這些很容易做到
- 然后要做好準(zhǔn)備的就是給每一個(gè)塊狀標(biāo)記上坐標(biāo)，方便后續(xù)的計(jì)算，直接操作
- 然后點(diǎn)擊的效果通過偽類來實(shí)現(xiàn)，沒點(diǎn)的時(shí)候偽類生成覆蓋的遮罩，點(diǎn)完之后去掉就行了
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Jquery實(shí)現(xiàn)簡單圖片切換效果代碼，需要的朋友可以參考下。2011-01-01
Jquery之Ajax運(yùn)用 學(xué)習(xí)運(yùn)用篇
JQuery中Ajax的運(yùn)用相信很多人都已熟悉，本文主要是記錄下個(gè)人實(shí)踐中的應(yīng)用知識(shí)，旨在加強(qiáng)記憶。2011-09-09
本文主要給大家詳細(xì)介紹了jQuery過濾選擇器，包含基本過濾選擇器、內(nèi)容過濾選擇器、可見性過濾選擇器、屬性過濾選擇器、子元素過濾選擇器、表單對(duì)象屬性過濾選擇器等，十分全面,需要的朋友可以參考下2015-01-01
jQuery實(shí)現(xiàn)圖片左右滾動(dòng)特效
這篇文章主要介紹了jQuery合作伙伴左右滾動(dòng)特效，功能實(shí)現(xiàn)非常簡單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2015-08-08 
jquery easyui combobox模糊過濾(示例代碼)
這篇文章主要介紹了jquery easyui combobox模糊過濾(示例代碼)。需要的朋友可以過來參考下，希望對(duì)大家有所幫助
2013-11-11 
基于jQuery的一個(gè)擴(kuò)展form序列化到j(luò)son對(duì)象
jQuery沒有直接支持form到j(luò)son的序列化方法，目前網(wǎng)上有一個(gè)實(shí)現(xiàn)是這樣的
2010-12-12 
Jquery實(shí)現(xiàn)的table最后一行添加樣式的代碼
有時(shí)間需要將表格的最后一行加上樣式，方便閱讀等需要，需要的朋友可以參考下。
2010-05-05 
修改jquery.lazyload.js實(shí)現(xiàn)頁面延遲載入
jquery.lazyload.js并未真正的實(shí)現(xiàn)頁面延遲載入，它的實(shí)現(xiàn)原理是頁面載入完畢后將html中所有img標(biāo)簽的src屬性都替換為空，把src的初始值存儲(chǔ)到一個(gè)自定義的屬性中，當(dāng)頁面滾動(dòng)到img標(biāo)簽位置時(shí)再將圖片載入進(jìn)來。
2010-12-12 
jQuery插件zTree實(shí)現(xiàn)刪除樹子節(jié)點(diǎn)的方法示例
這篇文章主要介紹了jQuery插件zTree實(shí)現(xiàn)刪除樹子節(jié)點(diǎn)的方法,結(jié)合實(shí)例形式分析了jQuery樹形插件zTree針對(duì)節(jié)點(diǎn)的遍歷與刪除操作相關(guān)技巧,需要的朋友可以參考下
2017-03-03