格子游戏

作者: 月禅 | 来源:发表于2023-03-13 13:37 被阅读0次

110行代码求解数独
小猪佩奇病了，怎么办？
别把圈子妖魔化
格子填充游戏说明
C/C++技术总监带你打造经典扫雷游戏，从未见过如此详细的开发解
大家喜欢哪个名字呢
2048网页版小游戏
击鼓传花
口袋精彩数独-一款有趣好玩的数独游戏
20161220 15/35 《记忆观察2》（14-白皇后-

<!DOCTYPE html>
<head>
<title> 16宫格小游戏 </title>
<style type="text/css">
body {background-color:white;}
p {color:blue;}
td {
width: 50px;
height: 50px;
background-color: black;
}
table {size: 400px;}
</style>
</head>
<body>

<script>
    var step = 0

    function start()
    {
        step = 0
        document.getElementById("display_label").textContent = "开始游戏";
        for (var i = 1; i <= 16; i++) {
            document.getElementById(i).style.backgroundColor="#000000";
        }
    }
    function next() {
        //clear color
        for (var i = 1; i <= 16; i++) {
            document.getElementById(i).style.backgroundColor="#000000";
        }
        //next
        step += 1
        if (step > 8) {
            document.getElementById("display_label").textContent = "游戏结束! 恭喜您完成全部挑战！";
        } else {
            document.getElementById("display_label").textContent = "恭喜您已进入第\(" + step + ")级游戏";
            //随机数
            var randomIds = []
            console.log(randomIds.length)
            var length = 0
            while (length < step) {
                console.log(length)
                let random = Math.floor(Math.random() * 16)+1;
                var has = false;
                for (const i in randomIds) {
                    if (randomIds[i] == random) {
                        has = true;
                        break;
                    }
                }
                if (!has) {
                    length +=1;
                    document.getElementById(random).style.backgroundColor="#ffffff";
                    randomIds.push(random);
                }
            }
        }
    }

</script>

<label id="display_label" style="font-size: xx-large;">小游戏</label>
<br />
<button id="start_button" onclick="start()" style="background-color:rgb(255,0,0)">启动</button>
<button id="next_button" onclick="next()">下一步</button>
<br />
<br />
<div id="content">
    <table border="1">
        <tr>
            <td id="1"></td>
            <td id="2"></td>
            <td id="3"></td>
            <td id="4"></td>
        </tr>
        <tr>
            <td id="5"></td>
            <td id="6"></td>
            <td id="7"></td>
            <td id="8"></td>
        </tr>
        <tr>
            <td id="9"></td>
            <td id="10"></td>
            <td id="11"></td>
            <td id="12"></td>
        </tr>
        <tr>
            <td id="13"></td>
            <td id="14"></td>
            <td id="15"></td>
            <td id="16"></td>
        </tr>
    </table>

</div>

</body>