jquery插件實現(xiàn)掃雷游戲(1)
更新時間:2021年04月26日 17:05:32 作者:阿飛超努力
這篇文章主要為大家詳細介紹了jquery插件實現(xiàn)掃雷游戲,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了jquery插件實現(xiàn)掃雷游戲第一篇的具體代碼,供大家參考,具體內(nèi)容如下
做一個掃雷
第一部分,完成繪制和點擊動作
效果如下
代碼部分
* { 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; //雷數(shù) var boom = []; //產(chǎn)生炸彈的坐標 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)容的繪制,這些很容易做到
- 然后要做好準備的就是給每一個塊狀標記上坐標,方便后續(xù)的計算,直接操作
- 然后點擊的效果通過偽類來實現(xiàn),沒點的時候偽類生成覆蓋的遮罩,點完之后去掉就行了
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。