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不熟悉，所以，可能会有不少不规范的地方，请批评指正