HTML5有点创意的网页小游戏
作者：庄泽峰 / 2023-12-27 15:56
Prompt1，Hello，GPT，请你用html5+CSS3来实现： 一个有点创意的网页小游戏，带有一点启发。Prompt2，这个小游戏挺好，我想加一个重新开始的按钮。然后，GPT给出该小游戏的代码，大家可以运行看一下。
<!DOCTYPE html>
<html>
<head>
<title>创意小游戏</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
h1 {
color: #333;
}
#game-container {
margin-top: 50px;
}
#target {
width: 100px;
height: 100px;
background-color: #f00;
border-radius: 50%; /* 将方形变成圆形 */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
cursor: pointer;
transition: background-color 0.3s;
}
#target:hover {
background-color: #0f0;
}
#score {
margin-top: 20px;
font-size: 24px;
}
#restart-button {
margin-top: 20px;
padding: 10px 20px;
background-color: #333;
color: #fff;
border: none;
cursor: pointer;
transition: background-color 0.3s;
}
#restart-button:hover {
background-color: #555;
}
</style>
</head>
<body>
<h1>创意小游戏</h1>
<div id="game-container">
<div id="target"></div>
</div>
<div id="score">得分: 0</div>
<button id="restart-button">重新开始</button>
<script>
var target = document.getElementById('target');
var score = document.getElementById('score');
var restartButton = document.getElementById('restart-button');
var currentScore = 0;
target.addEventListener('click', function() {
currentScore++;
score.textContent = '得分: ' + currentScore;
moveTarget();
});
restartButton.addEventListener('click', function() {
currentScore = 0;
score.textContent = '得分: ' + currentScore;
moveTarget();
});
function moveTarget() {
var containerWidth = document.getElementById('game-container').offsetWidth;
var containerHeight = document.getElementById('game-container').offsetHeight;
var targetWidth = target.offsetWidth;
var targetHeight = target.offsetHeight;
var maxLeft = containerWidth - targetWidth;
var maxTop = containerHeight - targetHeight;
var newLeft = Math.floor(Math.random() * maxLeft);
var newTop = Math.floor(Math.random() * maxTop);
target.style.left = newLeft + 'px';
target.style.top = newTop + 'px';
}
</script>
</body>
</html>
这个示例中，我们创建了一个简单的小游戏，目标是点击红色方块。每次点击后，得分会增加，并且方块会在游戏区域内随机移动。
我们使用了HTML5和CSS3来实现游戏的布局和样式。在JavaScript部分，我们使用了事件监听器来监听方块的点击事件，并在每次点击后更新得分。同时，我们还定义了一个moveTarget函数，用于随机移动方块的位置。
这个小游戏可以启发玩家的反应能力和手眼协调能力，同时也可以让玩家感受到游戏带来的乐趣。
