如何编写一个简单的接球游戏

接球游戏是一种经典的小游戏，玩家需要控制一个板子来接住从上方掉落的球。下面我将介绍如何使用HTML、CSS和JavaScript编写一个简单的接球游戏。

1. 创建HTML结构

```html ```

2. 编写CSS样式

```css body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .game { position: relative; width: 300px; height: 400px; border: 1px solid #000; } .board { position: absolute; bottom: 0; width: 80px; height: 10px; background-color: #333; } .ball { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 20px; height: 20px; background-color: red; border-radius: 50%; } ```

3. 编写JavaScript逻辑

```javascript const board = document.getElementById('board'); const ball = document.getElementById('ball'); let ballBottom = 0; let isMovingDown = true; function moveBall() { if (isMovingDown) { ballBottom = 1; } else { ballBottom -= 1; } ball.style.bottom = ballBottom 'px'; if (ballBottom >= 380) { isMovingDown = false; } else if (ballBottom <= 0) { isMovingDown = true; } requestAnimationFrame(moveBall); } moveBall(); document.addEventListener('keydown', function(event) { if (event.key === 'ArrowLeft') { board.style.left = (parseInt(board.style.left, 10) || 0) - 10 'px'; } else if (event.key === 'ArrowRight') { board.style.left = (parseInt(board.style.left, 10) || 0) 10 'px'; } }); ```

通过以上代码，我们实现了一个简单的接球游戏。玩家可以通过按左右箭头键来控制板子的移动，接住从上方掉落的球。你可以根据自己的需求对游戏进行扩展和优化，比如增加分数、速度递增等功能。

希望这个简单的示例能帮助你入门接球游戏的开发，祝你编程愉快！