见缝插针小游戏：HTML 和 JavaScript 代码示例
以下是一个示例见缝插针的 Web 小游戏的代码：
HTML 代码：
<!DOCTYPE html>
<html>
<head>
<title>见缝插针</title>
<style>
#board {
width: 500px;
height: 500px;
border: 1px solid black;
position: relative;
}
.needle {
width: 10px;
height: 100px;
background-color: black;
position: absolute;
bottom: 0;
left: 0;
transform-origin: bottom center;
transform: rotate(0deg);
transition: transform 0.2s;
}
#needle1 {
left: 100px;
}
#needle2 {
left: 200px;
}
#needle3 {
left: 300px;
}
#needle4 {
left: 400px;
}
</style>
</head>
<body>
<h1>见缝插针</h1>
<div id='board'>
<div id='needle1' class='needle'></div>
<div id='needle2' class='needle'></div>
<div id='needle3' class='needle'></div>
<div id='needle4' class='needle'></div>
</div>
<script src='game.js'></script>
</body>
</html>
JavaScript 代码 (game.js)：
// 获取针和游戏面板的元素
const needles = document.querySelectorAll('.needle');
const board = document.getElementById('board');
// 随机选择一个针进行旋转
function rotateNeedle() {
const randomIndex = Math.floor(Math.random() * needles.length);
const needle = needles[randomIndex];
needle.style.transform = 'rotate(90deg)';
}
// 在点击游戏面板时调用旋转针的函数
board.addEventListener('click', rotateNeedle);
这个小游戏中，有一个游戏面板和 4 根针。每次点击游戏面板，其中的一根针会旋转 90 度。每次旋转都是随机选择的。你可以根据需要自定义样式和游戏规则。
原文地址: https://www.cveoy.top/t/topic/cKiH 著作权归作者所有。请勿转载和采集!