一步步教你使用JavaScript打造一個掃雷游戲
更新時間：2022年02月17日 10:52:12 作者：皮皮
javascript作為前端常用的開發(fā)語言,越來越多的人都在學習它,下面這篇文章主要給大家介紹了關于如何使用JavaScript打造一個掃雷游戲的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
前言
掃雷大家都玩過，今天我們就是用JavaScript來打造掃雷游戲。廢話不多說，直接看下效果;
上圖是失敗后的結果。
一、思路分析
我們新建一個首頁,在首頁放置一個點擊開始游戲的按鈕，動態(tài)生成100個小格，即100div;然后通過點擊div進行掃雷操作，然后掃雷成功或者失敗顯示對應的結果;
二、靜態(tài)頁面搭建
2.1 結構層
<body>
<div class="wrapper">
<div class="btn" id="btn"></div> <!-- 開始游戲按鈕-->
<div class="box" id="box"></div> <!-- 存放小雷的div-->
<div class="flagBox" id="flagBox"> <!-- 游戲結束才顯示的當前雷數(shù)的div-->
當前剩余雷數(shù)：
<span id="score">10</span>
</div>
<div class="alertBox" id="alertBox"> <!-- Game over彈出的框（窗口）-->
<div class="alertImg" id="alertImg">
<div class="close" id="close"></div>
</div>
</div>
</div>
</body>
2.2 樣式層
清楚默認邊距
*{
margin:0;
padding:0;
}
頁面最大div
.wrapper {
width:100%;
height:1000px;
position: fixed;
top:0;
left:0;
background-image: url('img/bg.jpg');
background-size: 100% 100%;
}
效果如下：
開始游戲按鈕
.btn{
height:140px;
width:170px;
position:absolute;
left:50px;
background-image: url('img/startGame.png');
background-size: 100% 100%;
cursor: pointer;
}
儲存雷的大div
.box{
height:500px;
width:500px;
transform: perspective(800px) rotateX(45deg);
margin:20px auto;
border-top:1px solid #B25F27;
border-left:1px solid #B25F27;
box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
display:none; /* 先設置為none,開始游戲后顯示block */
}
每一個方塊的小div(一共100個)
.block{
width:49px;
height:49px;
border-right:1px solid #B25F27;
border-bottom:1px solid #B25F27;
box-shadow: 0 0 4px #333 inset;
background-image: url('img/cao.jpg');
float: left;
}
當前所剩雷數(shù)
.flagBox{
position:absolute;
top:50px;
left:50%;
width:200px;
height:50px;
margin-left:-100px;
color:#333;
font-size:20px;
font-weight: bolder;
display:none; /* 先設置為none,開始游戲后顯示block */
}
Game Over
.alertBox{
display:none; /* 先設置為none,開始結束顯示block */
position:absolute;
width:100%;
height:100%;
left:0;
top:0;
background-color: rgba(0,0,0,0.2);
}游戲結束彈出窗口右上角的X
.close{
position:absolute;
right:0;
top:0;
height:40px;
width:40px;
background-image: url('img/closeBtn.png');
background-size: 100% 100%;
cursor: pointer;
???????}三、js頁面交互
3.1 獲取元素及變量初始化
var startBtn = document.getElementById('btn');
var box = document.getElementById('box');
var flagBox = document.getElementById('flagBox');
var alertBox = document.getElementById('alertBox');
var alertImg = document.getElementById('alertImg');
var closeBtn = document.getElementById('close');
var score = document.getElementById('score');
// 先聲明變量，但是不初始化
var minesNum;
var mineOver;
var block;
var mineMap = [];
var startGameBool = true;
3.2 10個雷的初始化設置
function init() {
minesNum = 10;
mineOver = 10;
score.innerHTML = mineOver;
for (var i = 0; i < 10; i++) { // 雙層循環(huán) 10 * 10 個div
for (var j = 0; j < 10; j++) {
var con = document.createElement('div');
con.classList.add('block'); // 給創(chuàng)建出來的div添加類名 block
con.setAttribute('id', i + '-' + j);
box.appendChild(con);
mineMap.push({ mine: 0 });
}
}
block = document.getElementsByClassName('block');
while (minesNum) { // 創(chuàng)建一個10次的循環(huán)，即設置10個雷
var mineIndex = Math.floor(Math.random() * 100);
if (mineMap[mineIndex].mine === 0) {
mineMap[mineIndex].mine = 1;
block[mineIndex].classList.add('isLei'); // 10個雷有小div的block類屬性，還有自己的屬性，isLei
minesNum--;
}
}
}
3.3 游戲開始事件封裝
function bindEvent() {
startBtn.onclick = function () { // 開始按鈕點擊事件
if(startGameBool){
box.style.display = 'block';
flagBox.style.display = 'block';
init();
startGameBool = false;
}
}
box.oncontextmenu = function () {
return false;
}
box.onmousedown = function (e) { // 小div鼠標按下事件封裝
var event = e.target;
if (e.which == 1) { //Netscape/Firefox/Opera中不支持 window.event.keyCode,需要用event.which代替
leftClick(event);
} else if (e.which == 3) {
rightClick(event);
}
}
closeBtn.onclick = function () { // 游戲結束，彈出game over窗口的關閉按鈕事件封裝
alertBox.style.display = 'none';
flagBox.style.display = 'none';
box.style.display = 'none';
box.innerHTML = '';
startGameBool = true;
}
}
3.4 核心事件函數(shù)封裝
leftClick 沒有雷 --> 顯示數(shù)字(代表以當前小格為中心周圍8個格的雷數(shù))擴散(當前周圍八個格沒有雷) 有雷 --> game Over
function leftClick(dom) {
if(dom.classList.contains('flag')){
return;
}
var isLei = document.getElementsByClassName('isLei'); // 獲得前面的10個雷的div
if (dom && dom.classList.contains('isLei')) { // 判斷是不是雷塊
for (var i = 0; i < isLei.length; i++) {
isLei[i].classList.add('show'); // 顯示地雷背景圖
}
setTimeout(function () {
alertBox.style.display = 'block';
alertImg.style.backgroundImage = 'url("img/over.jpg")'; // 上面顯示雷，標志游戲結束
}, 800)
} else { // 否則繼續(xù)掃雷
var n = 0;
var posArr = dom && dom.getAttribute('id').split('-');
var posX = posArr && +posArr[0];
var posY = posArr && +posArr[1];
dom && dom.classList.add('num');
for (var i = posX - 1; i <= posX + 1; i++) {
for (var j = posY - 1; j <= posY + 1; j++) {
var aroundBox = document.getElementById(i + '-' + j);
if (aroundBox && aroundBox.classList.contains('isLei')) {
n++;
}
}
}
dom && (dom.innerHTML = n);
if (n == 0) {
for (var i = posX - 1; i <= posX + 1; i++) {
for (var j = posY - 1; j <= posY + 1; j++) {
var nearBox = document.getElementById(i + '-' + j);
if (nearBox && nearBox.length != 0) {
if (!nearBox.classList.contains('check')) {
nearBox.classList.add('check');
leftClick(nearBox);
}
}
}
}
}
}
}
rightClick 沒有標記并且沒有數(shù)字 --> 進行標記;
有標記 --> 取消標記 --> 標記是否正確，10個都正確標記，提示成功;
如果已經(jīng)出現(xiàn)，則點擊無效果;
function rightClick(dom){
if(dom.classList.contains('num')){ // 如果已經(jīng)出現(xiàn)，則點擊無效果
return;
}
dom.classList.toggle('flag'); // 在元素中切換類名，切換為flag類名，顯示紅旗背景圖；此處的雷被掃除了
if(dom.classList.contains('isLei') && dom.classList.contains('flag')){
mineOver --; // 雷數(shù)減一
}
if(dom.classList.contains('isLei') && !dom.classList.contains('flag')){
mineOver ++;
}
score.innerHTML = mineOver;
if(mineOver == 0){ // 掃完雷，標志雷數(shù)量為0
alertBox.style.display = 'block';
alertImg.style.backgroundImage = 'url("img/success.png")'; // 游戲勝利
}
}3.5 游戲開始
bindEvent()
四、總結
本文我們通過JavaScript打造了簡單的掃雷游戲，首先是設計下簡單的界面樣式，然后通過掃雷的邏輯動態(tài)構建雷塊的位置，通過點擊小方塊進行掃雷，感興趣的小伙伴可以去試一下。
到此這篇關于如何使用JavaScript打造一個掃雷游戲的文章就介紹到這了,更多相關JavaScript打造掃雷游戲內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了一文徹底理解JavaScript原型與原型鏈，JavaScript中有許多內(nèi)置對象，如:Object,?Math,?Date等，文章圍繞主題展開主題詳情，具有一定的參考價值，需要的小伙伴可以參考一下2022-08-08
javascript實現(xiàn)拖動層效果代碼(符合標準且兼容IE,chrome,firefox)
javascript實現(xiàn)拖動層，原理很簡單，就是根據(jù)鼠標的位置實時設置層的left和top2013-06-06
javascript實現(xiàn)在某個元素上阻止鼠標右鍵事件的方法和實例
這篇文章主要介紹了javascript實現(xiàn)在某個元素上阻止鼠標右鍵事件的方法和實例,需要的朋友可以參考下2014-08-08
今天小編就為大家分享一篇layui的table中顯示圖片方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
JS與Ajax Get和Post在使用上的區(qū)別實例詳解
這篇文章主要介紹了JS與Ajax Get和Post在使用上的區(qū)別實例詳解的相關資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下2016-06-06
這篇文章主要為大家介紹了TypeScript類型斷言VS類型守衛(wèi)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
圖片放大鏡（Image?Zoom）效果在許多電子商務網(wǎng)站、在線畫廊和產(chǎn)品展示頁面中得到廣泛應用,它允許用戶通過鼠標懸停在圖片上,查看圖片的詳細局部放大效果,本文將詳細介紹如何使用?JavaScript?實現(xiàn)一個基本的圖片放大鏡功能,需要的朋友可以參考下2024-12-12
這篇文章主要為大家介紹了JavaScript的Proxy對象，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
許多人對JavaScript的原型及原型鏈仍感到困惑，網(wǎng)上的文章又大多長篇大論，令讀者不明覺厲。下面小編將用最簡潔明了的圖文介紹JavaScript的原型及原型鏈。2016-08-08
在很多時候,我們在進行數(shù)據(jù)提交數(shù)據(jù)庫時.先會用javascript對其進行有效性驗證.如一個中文javascript為的length是1.但是數(shù)據(jù)庫中會占二個字節(jié).容易出錯2012-08-08