JavaScript 中的乒乓球游戏

JavaScript 中的乒乓球游戏是一款简单的小游戏，玩家需要控制球拍反弹乒乓球，避免乒乓球掉落地面。

实现步骤

1. 创建 HTML 页面

创建一个 HTML 页面，并在页面中添加一个 canvas 元素，用于绘制乒乓球和球拍。

<canvas id="canvas"></canvas>

2. 初始化游戏画布

使用 JavaScript 获取 canvas 元素，并初始化画布，设置画布的宽度和高度。

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

canvas.width = 400;
canvas.height = 500;

3. 绘制球拍和乒乓球

在画布中绘制球拍和乒乓球。球拍和乒乓球可以用一个矩形绘制。

function drawPaddle(x, y) {
  ctx.beginPath();
  ctx.rect(x, y, 80, 10);
  ctx.fillStyle = '#0095DD';
  ctx.fill();
  ctx.closePath();
}

function drawBall(x, y) {
  ctx.beginPath();
  ctx.arc(x, y, 10, 0, Math.PI*2);
  ctx.fillStyle = '#0095DD';
  ctx.fill();
  ctx.closePath();
}

4. 控制球拍移动

使用 JavaScript 监听键盘事件，控制球拍的移动。当按下左右箭头键时，移动球拍的位置坐标。

let paddleX = (canvas.width - 80) / 2;

document.addEventListener('keydown', (event) => {
  if (event.key === 'ArrowLeft') {
    paddleX -= 10;
  } else if (event.key === 'ArrowRight') {
    paddleX += 10;
  }
});

5. 控制乒乓球移动

使用 JavaScript 实现乒乓球的移动。每次重绘画布时，改变乒乓球的位置坐标。当乒乓球碰到画布边缘时，改变它的运动方向。

let ballX = canvas.width / 2;
let ballY = canvas.height - 30;
let ballSpeedX = 5;
let ballSpeedY = -5;

function moveBall() {
  ballX += ballSpeedX;
  ballY += ballSpeedY;

  if (ballX + ballSpeedX > canvas.width - 10 || ballX + ballSpeedX < 10) {
    ballSpeedX = -ballSpeedX;
  }

  if (ballY + ballSpeedY < 10) {
    ballSpeedY = -ballSpeedY;
  } else if (ballY + ballSpeedY > canvas.height - 20) {
    if (ballX > paddleX && ballX < paddleX + 80) {
      ballSpeedY = -ballSpeedY;
    } else {
      clearInterval(interval);
    }
  }
}

6. 游戏循环

使用 JavaScript 实现游戏循环，重绘画布，重新绘制球拍和乒乓球的位置，并控制球拍和乒乓球的移动。

let interval = setInterval(() => {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  drawPaddle(paddleX, canvas.height - 10);
  drawBall(ballX, ballY);
  moveBall();
}, 10);

完整代码

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

canvas.width = 400;
canvas.height = 500;

function drawPaddle(x, y) {
  ctx.beginPath();
  ctx.rect(x, y, 80, 10);
  ctx.fillStyle = '#0095DD';
  ctx.fill();
  ctx.closePath();
}

function drawBall(x, y) {
  ctx.beginPath();
  ctx.arc(x, y, 10, 0, Math.PI*2);
  ctx.fillStyle = '#0095DD';
  ctx.fill();
  ctx.closePath();
}

let paddleX = (canvas.width - 80) / 2;

document.addEventListener('keydown', (event) => {
  if (event.key === 'ArrowLeft') {
    paddleX -= 10;
  } else if (event.key === 'ArrowRight') {
    paddleX += 10;
  }
});

let ballX = canvas.width / 2;
let ballY = canvas.height - 30;
let ballSpeedX = 5;
let ballSpeedY = -5;

function moveBall() {
  ballX += ballSpeedX;
  ballY += ballSpeedY;

  if (ballX + ballSpeedX > canvas.width - 10 || ballX + ballSpeedX < 10) {
    ballSpeedX = -ballSpeedX;
  }

  if (ballY + ballSpeedY < 10) {
    ballSpeedY = -ballSpeedY;
  } else if (ballY + ballSpeedY > canvas.height - 20) {
    if (ballX > paddleX && ballX < paddleX + 80) {
      ballSpeedY = -ballSpeedY;
    } else {
      clearInterval(interval);
    }
  }
}

let interval = setInterval(() => {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  drawPaddle(paddleX, canvas.height - 10);
  drawBall(ballX, ballY);
  moveBall();
}, 10);

运行效果

代码运行效果如下所示：