建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
手把手教你使用JavaScript打造一款掃雷游戲
掃雷大家都玩過，今天我們就是用JavaScript來打造掃雷游戲。廢話不多說，直接看下效果;
目前成都創(chuàng)新互聯(lián)公司已為數(shù)千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)絡(luò)空間、網(wǎng)站托管、企業(yè)網(wǎng)站設(shè)計、西充網(wǎng)站維護等服務，公司將堅持客戶導向、應用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。
上圖是失敗后的結(jié)果。
一、思路分析
我們新建一個首頁,在首頁放置一個點擊開始游戲的按鈕，動態(tài)生成100個小格，即100div;然后通過點擊div進行掃雷操作，然后掃雷成功或者失敗顯示對應的結(jié)果;
二、靜態(tài)頁面搭建
2.1 結(jié)構(gòu)層
當前剩余雷數(shù)：
10
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; /* 先設(shè)置為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; /* 先設(shè)置為none,開始游戲后顯示block */
}Game Over
.alertBox{
display:none; /* 先設(shè)置為none,開始結(jié)束顯示block */
position:absolute;
width:100%;
height:100%;
left:0;
top:0;
background-color: rgba(0,0,0,0.2);
}
游戲結(jié)束彈出窗口右上角的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個雷的初始化設(shè)置
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)，即設(shè)置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 () { // 游戲結(jié)束，彈出game over窗口的關(guān)閉按鈕事件封裝
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")'; // 上面顯示雷，標志游戲結(jié)束
}, 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()
四、總結(jié)
本文我們通過JavaScript打造了簡單的掃雷游戲，首先是設(shè)計下簡單的界面樣式，然后通過掃雷的邏輯動態(tài)構(gòu)建雷塊的位置，通過點擊小方塊進行掃雷，感興趣的小伙伴可以去試一下。
當前文章：手把手教你使用JavaScript打造一款掃雷游戲
瀏覽地址：http://fisionsoft.com.cn/article/cdhiedh.html
