大家好,我是皮皮。
掃雷大家都玩過,今天我們就是用JavaScript來打造掃雷遊戲。廢話不多說,直接看下效果;
上圖是失敗後的結果。
一、思路分析
我們建立一個首頁,在首頁放置一個點選開始遊戲的按鈕,動态生成100個小格,即100div;然後通過點選div進行掃雷操作,然後掃雷成功或者失敗顯示對應的結果;
二、靜态頁面搭建
2.1 結構層
<body>
<div class="wrapper">
<div class="btn" id="btn"></div> <!-- 開始遊戲按鈕-->
<div class="box" id="box"></div> <!-- 存放小雷的div-->
<div class="flagBox" id="flagBox"> <!-- 遊戲結束才顯示的目前雷數的div-->
目前剩餘雷數:
<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;
}
目前所剩雷數
.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++) { // 雙層循環 10 * 10 個div
for (var j = 0; j < 10; j++) {
var con = document.createElement('div');
con.classList.add('block'); // 給建立出來的div添加類名 block
con.setAttribute('id', i + '-' + j);
box.appendChild(con);
mineMap.push({ mine: 0 });
}
}
block = document.getElementsByClassName('block');
while (minesNum) { // 建立一個10次的循環,即設定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 核心事件函數封裝
leftClick 沒有雷 --> 顯示數字(代表以目前小格為中心周圍8個格的雷數)擴散(目前周圍八個格沒有雷) 有雷 --> 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 { // 否則繼續掃雷
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 沒有标記并且沒有數字 --> 進行标記;
有标記 --> 取消标記 --> 标記是否正确,10個都正确标記,提示成功;
function rightClick(dom){
if(dom.classList.contains('num')){ // 如果已經出現,則點選無效果
return;
}
dom.classList.toggle('flag'); // 在元素中切換類名,切換為flag類名,顯示紅旗背景圖;此處的雷被掃除了
if(dom.classList.contains('isLei') && dom.classList.contains('flag')){
mineOver --; // 雷數減一
}
if(dom.classList.contains('isLei') && !dom.classList.contains('flag')){
mineOver ++;
}
score.innerHTML = mineOver;
if(mineOver == 0){ // 掃完雷,标志雷數量為0
alertBox.style.display = 'block';
alertImg.style.backgroundImage = 'url("img/success.png")'; // 遊戲勝利
}
}
3.5 遊戲開始
bindEvent()