浏览器也能玩游戏？教你用HTML和CSS构建接球小游戏

2023-06-11 16:52:43

为你的浏览器增添乐趣：打造一个接球游戏

有没有想过在浏览器中玩经典的街机游戏？现在你可以轻松打造一个自己的接球游戏，让你在工作之余或闲暇时光尽情享受。

创建游戏画布

首先，我们需要为游戏创建画布。创建一个HTML文件，添加一个名为“game-container”的div，其中包含两个子div：一个用于球，另一个用于球拍。

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <div id="game-container">
    <div id="ball"></div>
    <div id="paddle"></div>
  </div>
</body>
</html>

设置样式

接下来，我们使用CSS来为游戏元素设置样式，包括大小、颜色和边框。

#game-container {
  width: 500px;
  height: 500px;
  border: 1px solid black;
}

#ball {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: red;
}

#paddle {
  width: 100px;
  height: 10px;
  background-color: blue;
}

实现游戏逻辑

现在是游戏逻辑发挥作用的时候了。使用JavaScript，我们将处理球的移动、边界检测、球拍控制和游戏循环。

// 获取游戏元素
const gameContainer = document.getElementById('game-container');
const ball = document.getElementById('ball');
const paddle = document.getElementById('paddle');

// 设置游戏变量
let ballX = 250;
let ballY = 250;
let ballSpeedX = 5;
let ballSpeedY = 5;
let paddleX = 200;

// 添加事件监听器
document.addEventListener('keydown', (event) => {
  if (event.key === 'ArrowLeft') {
    paddleX -= 10;
  } else if (event.key === 'ArrowRight') {
    paddleX += 10;
  }
});

// 游戏循环
function gameLoop() {
  // 更新球的位置
  ballX += ballSpeedX;
  ballY += ballSpeedY;

  // 检查球是否碰到左右边界
  if (ballX < 0 || ballX > 500) {
    ballSpeedX = -ballSpeedX;
  }

  // 检查球是否碰到上下边界
  if (ballY < 0) {
    ballSpeedY = -ballSpeedY;
  }

  // 检查球是否碰到球拍
  if (ballY > 480 && ballX > paddleX && ballX < paddleX + 100) {
    ballSpeedY = -ballSpeedY;
  }

  // 更新球的位置
  ball.style.left = ballX + 'px';
  ball.style.top = ballY + 'px';

  // 更新球拍的位置
  paddle.style.left = paddleX + 'px';

  // 递归调用游戏循环
  requestAnimationFrame(gameLoop);
}

// 启动游戏循环
gameLoop();