利用html和js制作的简单的网页小游戏



这个是我第一次利用js制作网页的小游戏，若有错误欢迎指出。


设计的游戏是类似于配对的小游戏。废话不多说，直接上代码，代码中有比较详细的说明。 


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <script>

        var tk;
        function change_p() {//改变在p中的内容，就是显示游戏规则
            var texts = "这是一个配对游戏，一次翻开一个，如果两个翻开的颜色相同意味成功，就加10分，颜色也有可能改变有时间限制";
            document.getElementById("p1").innerHTML=texts;
        }

        function begins() {//开始游戏,其实也是一个初始化的函数。
            clearTimeout(tk);//防止多次连续的点击开始游戏按钮之后，发生意外
            document.getElementById("b2").value = "on";//on代表是点击了开始按钮之后的。
            document.getElementById("b2").innerHTML = "重新开始";//变成重新开始的按钮。
            document.getElementById("times").innerHTML = "time:60";//这个是为了在重新开始游戏之后的设置，
            document.getElementById("scores").innerHTML = "scores:0";//初始化分数。

            for(var i=3; i<13; i++)
            {
                document.getElementById("d"+i).style.backgroundColor = "";//初始化，设置成为没有背景。
            }

        }
        function time_counts() {//这个函数是用来进行记录时间的
            var time = parseInt(document.getElementById("times").innerHTML.slice(5)) -1;
            if (time>=0)//只有当time>0的时候才要继续改变id位times的内容
            {
                document.getElementById("times").innerHTML = "time:"+time;

            }
            else
            {
                clearTimeout(tk);//当倒数为0之后，就停止运行。
                document.getElementById("b2").value = "off";//时间结束了。
                document.getElementById("b2").innerHTML = "重新开始";//将这个变为重新开始的按钮。

            }
            tk = setTimeout(time_counts, 1000);//在执行过一次这个函数之后，每一秒执行一次
        }
        function change_color(obj) {//在这里的obj是一个参数表示当前点击的对象
            var colors = ["red", "green", "yellow", "blue"];
            if (obj.style.backgroundColor != "")//这里就是设置防止再已经点击变色之后再次点击再次变色
            {
                return;
            }
            if (document.getElementById("b2").value=="on")
            {
                obj.style.backgroundColor = colors[Math.floor(Math.random()*4)];
                // sleep(500);
            }

        }
        function sleep(delay) {//这个sleep函数类似于java等的sleep函数，单位ms
          var start = (new Date()).getTime();
          while ((new Date()).getTime() - start < delay) {
            continue;
          }
        }

        

        function match_color2() {
            for (var i=3; i<13; i++)
            {
                while ((document.getElementById("d"+i).style.backgroundColor == ""))//要找到一个有颜色的
                {
                    i++;
                }
                if (i>12)
                {
                    return;
                }
                color = document.getElementById("d"+i).style.backgroundColor;
                for (var index=3; index<13; index++)
                {
                    if ((color == document.getElementById("d"+index).style.backgroundColor) && (index != i))
                    {
                        //这里就是找到了相同的两个的了，就要进行加分和重新变回颜色
                        //在这里使用slice进行切片，因为输出的格式固定，所以分数一定在第四个在代码里面就是要从第三位开始。
                        var scores = parseInt(document.getElementById("scores").innerHTML.slice(7)) + 10;
                        document.getElementById("scores").innerHTML = "scores:"+scores ;
                        //在找到之后，得分记录之后，就要重新将那两个变为没有
                        sleep(100);//利用自己定义的sleep函数暂定100ms，让用户看清于反应，但是这样的话，真正的时间一定超过60s了
                        document.getElementById("d"+i).style.backgroundColor = "";
                        document.getElementById("d"+index).style.backgroundColor = "";
                        break;
                    }
                }
            }

        }

    </script>
    <style>

        body{
            /*设置成居中显示*/
            text-align: center;
        }
        #d1{
            height: 503px;
            width: 510px;
            border: black solid 1px;
            margin: auto;
            padding: 0;
            /*text-align: center;*/
        }
        div#d1>div{
            height: 250px;
            width: 100px;
            margin: 0;
            padding: 0;
            float: left;
            border: black solid 1px;

        }
    </style>
</head>

<body>

    <p id="times">time:60</p>
    <p id="scores">scores:0</p>
    <div id="d1">
        <div id="d3" onmousedown="change_color(this)" onmouseup="match_color2()"></div>
        <div id="d4" onmousedown="change_color(this)" onmouseup="match_color2()"></div>
        <div id="d5" onmousedown="change_color(this)" onmouseup="match_color2()"></div>
        <div id="d6" onmousedown="change_color(this)" onmouseup="match_color2()"></div>
        <div id="d7" onmousedown="change_color(this)" onmouseup="match_color2()"></div>
        <div id="d8" onmousedown="change_color(this)" onmouseup="match_color2()"></div>
        <div id="d9" onmousedown="change_color(this)" onmouseup="match_color2()"></div>
        <div id="d10" onmousedown="change_color(this)" onmouseup="match_color2()"></div>
        <div id="d11" onmousedown="change_color(this)" onmouseup="match_color2()"></div>
        <div id="d12" onmousedown="change_color(this)" onmouseup="match_color2()"></div>
    </div>

    <div id="d2">
        <p id="p1"></p>
        <button type="button" id="b1" onclick="change_p()">游戏说明</button>
        <button type="button" id="b2"  onmousedown="begins()" onmouseup="time_counts()" value="off">开始游戏</button><!--当这里的value为off的时候就是没有点击开始游戏-->
    </div>
    </body>
</html>