JS練習小遊戲

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

遊戲開始時，顯示12個影象的背面，用滑鼠點選其中任意一張，即可顯示影象的正面，如果點選了兩張，則顯示出兩張影象的正面。如果點選過的兩張影象是相同的影象，則將影象從介面中移除，如果不同，則將兩張影象重新顯示其背面。直到所有的影象都消除掉。

思路如下：

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

一、HTML程式碼

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

最外層的div，用於顯示整個介面的背景，內部id為wrap的div用於包裹12個img標籤，這裡並沒有寫12個img標籤，使用js程式碼來建立12個img標籤，然後將其新增到容器中。

二、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>
 

##三、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不熟悉，因此，可能會有很多不規範的地