jquery插件實(shí)現(xiàn)掃雷游戲(1)
本文實(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)擊的效果通過(guò)偽類來(lái)實(shí)現(xiàn),沒(méi)點(diǎn)的時(shí)候偽類生成覆蓋的遮罩,點(diǎn)完之后去掉就行了
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
jQuery實(shí)現(xiàn)鼠標(biāo)拖拽登錄框移動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)鼠標(biāo)拖拽登錄框移動(dòng)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-09-09jquery封裝的對(duì)話框簡(jiǎn)單實(shí)現(xiàn)
本文為大家詳細(xì)介紹下使用jquery簡(jiǎn)單實(shí)現(xiàn)封裝的對(duì)話框,具體實(shí)現(xiàn)代碼如下,感興趣的朋友可以參考下哈,希望對(duì)大家有所幫助2013-07-07jQuery實(shí)現(xiàn)頁(yè)面點(diǎn)擊后退彈出提示框的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)頁(yè)面點(diǎn)擊后退彈出提示框的方法,涉及jQuery事件觸發(fā)機(jī)制相關(guān)操作技巧,需要的朋友可以參考下2016-08-08jQuery選擇沒(méi)有colspan屬性的td的代碼
為了試著用jQuery找出一個(gè)table中沒(méi)有colspan屬性的td,試了很多種方法,這個(gè)是最好的,記在這里,下次不要再忘了2010-07-07使用JS或jQuery模擬鼠標(biāo)點(diǎn)擊a標(biāo)簽事件代碼
這篇文章主要介紹了使用JS或jQuery模擬鼠標(biāo)點(diǎn)擊a標(biāo)簽事件代碼,需要的朋友可以參考下2014-03-03使用jquery實(shí)現(xiàn)div的tab切換實(shí)例代碼
以前使用js代碼來(lái)寫的簡(jiǎn)單效果現(xiàn)在用jQ來(lái)寫,具體實(shí)現(xiàn)如下,感興趣的朋友可以參考下哈2013-05-05jquery鼠標(biāo)滑過(guò)提示title具體實(shí)現(xiàn)代碼
這篇文章介紹了jquery鼠標(biāo)滑過(guò)提示title具體實(shí)現(xiàn)代碼,有需要的朋友可以參考一下2013-08-08