火爆H5小游戏：原生JS打造的打砖块游戏

2023-09-15 12:14:01

在这数字时代，随着科技的飞速发展，人们的娱乐方式也不断演变。H5小游戏因其便捷性和趣味性，逐渐受到大众的喜爱。在众多H5小游戏中，打砖块可谓是常青树，它以简单的玩法和极强的趣味性吸引着无数玩家。今天，我们就来一起探索如何利用原生JS及ES6语法从头开始构建打砖块小游戏，让您也能成为一名游戏开发者。

原生JS打造打砖块小游戏的优势

使用原生JS开发游戏具有诸多优势：

跨平台兼容性： 原生JS可以在各种平台上运行，包括PC、移动设备和平板电脑，无需担心兼容性问题。
灵活性和控制力： 原生JS提供了更多的灵活性，让开发者可以完全控制游戏各个方面的行为。
易于学习： 原生JS入门简单，语法清晰易懂，即使是新手开发者也能快速上手。
社区支持： 原生JS拥有庞大的开发者社区，您可以在社区中找到丰富的资源和帮助。

原生JS打砖块游戏开发步骤

1. 构建游戏画布

首先，我们需要创建一个HTML画布元素来渲染游戏画面。可以使用以下HTML代码：

<canvas id="game-canvas" width="800" height="600"></canvas>

2. 设置游戏变量和常量

接下来，我们需要定义一些游戏变量和常量来控制游戏的行为，例如砖块的位置、球的运动速度和得分。可以使用以下JavaScript代码：

const canvas = document.getElementById("game-canvas");
const ctx = canvas.getContext("2d");

const brickWidth = 100;
const brickHeight = 20;
const brickRowCount = 5;
const brickColumnCount = 8;

const ballX = canvas.width / 2;
const ballY = canvas.height - 30;
const ballRadius = 10;

const paddleWidth = 100;
const paddleHeight = 10;
const paddleX = (canvas.width - paddleWidth) / 2;

let ballSpeedX = 5;
let ballSpeedY = -5;

let score = 0;

3. 绘制游戏元素

现在，我们可以使用Canvas API来绘制游戏元素，例如砖块、球和挡板。可以使用以下JavaScript代码：

function drawBricks() {
  for (let i = 0; i < brickRowCount; i++) {
    for (let j = 0; j < brickColumnCount; j++) {
      const brickX = j * (brickWidth + 10);
      const brickY = i * (brickHeight + 10);
      ctx.fillStyle = "red";
      ctx.fillRect(brickX, brickY, brickWidth, brickHeight);
    }
  }
}

function drawBall() {
  ctx.beginPath();
  ctx.fillStyle = "black";
  ctx.arc(ballX, ballY, ballRadius, 0, Math.PI * 2);
  ctx.fill();
}

function drawPaddle() {
  ctx.fillStyle = "blue";
  ctx.fillRect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
}

4. 处理用户输入

接下来，我们需要处理用户的输入，例如键盘操作，以便控制挡板的移动。可以使用以下JavaScript代码：

document.addEventListener("keydown", function (e) {
  if (e.keyCode === 37) {
    paddleX -= 10;
  } else if (e.keyCode === 39) {
    paddleX += 10;
  }
});

5. 更新游戏状态

在每一帧中，我们需要更新游戏状态，例如移动球、检测碰撞和更新得分。可以使用以下JavaScript代码：

function update() {
  // 移动球
  ballX += ballSpeedX;
  ballY += ballSpeedY;

  // 检测球与挡板的碰撞
  if (ballY + ballRadius > canvas.height - paddleHeight && ballX > paddleX && ballX < paddleX + paddleWidth) {
    ballSpeedY = -ballSpeedY;
  }

  // 检测球与砖块的碰撞
  for (let i = 0; i < brickRowCount; i++) {
    for (let j = 0; j < brickColumnCount; j++) {
      const brickX = j * (brickWidth + 10);
      const brickY = i * (brickHeight + 10);
      if (ballX > brickX && ballX < brickX + brickWidth && ballY > brickY && ballY < brickY + brickHeight) {
        ballSpeedY = -ballSpeedY;
        score++;
        brickRowCount--;
      }
    }
  }

  // 检测球是否出界
  if (ballY - ballRadius < 0 || ballY + ballRadius > canvas.height) {
    ballSpeedY = -ballSpeedY;
  }
  if (ballX - ballRadius < 0 || ballX + ballRadius > canvas.width) {
    ballSpeedX = -ballSpeedX;
  }

  // 更新得分
  ctx.fillStyle = "white";
  ctx.font = "20px Arial";
  ctx.fillText(`Score: ${score}`, 8, 20);
}

6. 渲染游戏画面

最后，我们需要将游戏画面渲染到画布上。可以使用以下JavaScript代码：

function render() {
  // 清除画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 绘制游戏元素
  drawBricks();
  drawBall();
  drawPaddle();

  // 更新游戏状态
  update();

  // 渲染游戏画面
  requestAnimationFrame(render);
}