格子游戏
2023-03-13 本文已影响0人
月禅
<!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>
