JS練習小遊戲

JS練習小遊戲

對於剛入門JS的小白我來講，沒有系統的學習過JS，之前只是使用過Jquery，對原生的JS並非特別的理解，最近，看了這方面的一些簡單的書籍，就作了這個小程序，來加深對JS的理解。小遊戲以下：

遊戲開始時，顯示12個圖像的背面，用鼠標點擊其中任意一張，便可顯示圖像的正面，若是點擊了兩張，則顯示出兩張圖像的正面。若是點擊過的兩張圖像是相同的圖像，則將圖像從界面中移除，若是不一樣，則將兩張圖像從新顯示其背面。直到全部的圖像都消除掉。

思路以下：

在一個div內部用12個img標籤來顯示12個圖像，開始時，12個img都顯示相同的圖像，而真實的圖像則存儲在一個數組中。點擊時，img標籤的id對應數組的下標，即獲得其正面的圖像。若是打開了兩張圖像時，則判斷兩個img標籤的id對應的數組中的值是否相同，若是相同，則表示是兩張相同的圖像。

1、HTML代碼

<div id="bg">
  <div id="wrap">
  </div>
</div>

最外層的div，用於顯示整個界面的背景，內部id爲wrap的div用於包裹12個img標籤，這裏並無寫12個img標籤，使用js代碼來建立12個img標籤，而後將其添加到容器中。

2、CSS代碼

<style>
        * {
            margin: 0;
            padding: 0;
        }
        #bg {
            background-image: url("images/bg.jpg");
            width: 100vw;
            height: 100vh;
        }

        #wrap {
            margin: 0 auto;
            width: 800px;
            height: 300px;
            text-align: center;
            padding: 20px;
        }
        #wrap>img {
            width: 124px;
            height: 140px;
            margin: 2px;
        }
    </style>

##3、JS代碼

<script>
        var clickCount = 0;//記錄點擊的次數
        var firstCard = 0;//記錄點擊的第一張圖像
        var secondCard = 0;//記錄點擊的第二張圖像
        var imgs = ["images/h1.png", "images/h2.png", "images/h3.png", "images/h4.png", "images/h5.png", "images/h6.png",
            "images/h1.png", "images/h2.png", "images/h3.png", "images/h4.png", "images/h5.png", "images/h6.png"];
        var cardBg = "images/h0.png";
        var img = new Array();//存儲12img節點
        // 取得最外層容器
        var box = document.getElementById("wrap");
        //打亂數組中的順序
        function shuffle(arr) {
            for (var i = 0; i < imgs.length; i++) {
                var index = parseInt(Math.random() * 12);
                var tempImg = imgs[i];
                imgs[i] = imgs[index];
                imgs[index] = tempImg;
            }
            return arr;
        }
        //判斷遊戲是否結束
        function checkResult() {
            var boxChild = box.childElementCount;
            return boxChild;
        }
        //實現翻牌
        function changeCard(e) {
            var id = e.getAttribute("id");
            if (clickCount === 0) {
                firstCard = id;
                img[firstCard].setAttribute("src", imgs[firstCard]);
            }
            if (clickCount === 1) {
                secondCard = id;
                img[secondCard].setAttribute("src", imgs[secondCard]);
                setTimeout(function () {
                    if (imgs[firstCard] === imgs[secondCard]) {
                        img[firstCard].onclick = "";//移除單擊事件
                        img[secondCard].onclick = "";//移除單擊事件
                        //移除圖像
                        box.removeChild(img[firstCard]);
                        box.removeChild(img[secondCard]);
                        if (checkResult() <= 0) {
                            alert("遊戲結束");
                        }
                    } else {
                        img[firstCard].setAttribute("src", cardBg);
                        img[secondCard].setAttribute("src", cardBg);
                    }
                    firstCard = 0;
                    secondCard = 0;
                    clickCount = 0;
                }, 500);
            }
            clickCount++;
        }
        // 建立12個圖像元素
        for (var i = 0; i < imgs.length; i++) {
            img[i] = document.createElement("img");
            img[i].src = cardBg;
            img[i].setAttribute("id", i);
            img[i].onclick = function () {
                changeCard(this);
            }
            box.appendChild(img[i]);
        }
        shuffle(imgs);//打亂圖像
    </script>

在寫的過程當中，因爲對JS不熟悉，所以，可能會有不少不規範的地方，請批評指正