HTML写一个打篮球小游戏
时间: 2024-05-16 08:16:56 浏览: 14
好的,以下是一个简单的打篮球小游戏的HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<title>打篮球小游戏</title>
<style>
#ball {
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 50px;
background-color: orange;
border-radius: 50%;
animation: moveBall 2s ease-in-out infinite;
}
@keyframes moveBall {
0% { top: 0; left: 0; }
50% { top: 200px; left: 300px; }
100% { top: 0; left: 0; }
}
#basket {
position: absolute;
top: 200px;
left: 250px;
width: 100px;
height: 50px;
background-color: black;
}
</style>
</head>
<body>
<div id="ball"></div>
<div id="basket"></div>
<script>
document.addEventListener('keydown', function(event) {
if (event.key === ' ') {
var ball = document.getElementById('ball');
var basket = document.getElementById('basket');
var ballLeft = parseInt(ball.style.left);
var ballTop = parseInt(ball.style.top);
var basketLeft = parseInt(basket.style.left);
var basketTop = parseInt(basket.style.top);
if (ballTop >= basketTop && ballTop <= basketTop + 50 && ballLeft >= basketLeft && ballLeft <= basketLeft + 100) {
alert('恭喜你,投篮成功!');
} else {
alert('很遗憾,投篮失败!');
}
}
});
</script>
</body>
</html>
```
这个小游戏的规则是,有一个小球在页面上不停地移动,玩家需要在适当的时机按下空格键,让小球投进篮球框中。如果投进了,就会弹出一个提示框,告诉玩家投篮成功;如果没有投进,就会弹出一个提示框,告诉玩家投篮失败。
为了使小球能够移动,我们使用CSS的`animation`属性来定义一个动画,让小球在页面上来回移动。同时,我们使用`keydown`事件来监听玩家按下的按键,在按下空格键时判断小球的位置是否在篮球框内,从而判断投篮是否成功。