Vue3&技巧展现打造趣味打砖块小游戏

2023-12-10 03:59:29

在过去的几十年里，打砖块一直是街机厅和游戏机上的热门游戏。现在，随着前端技术的进步，我们可以在浏览器中轻松创建自己的打砖块游戏。本文将带您一步步学习使用 Vue.js 3 创建一个打砖块小游戏，我们将使用 composition API，这是一种更简洁、更具可维护性的方式来构建 Vue.js 组件。

首先，我们需要创建一个 Vue.js 项目。如果您还没有 Vue.js CLI，请先安装它：

npm install -g @vue/cli

然后，创建一个新的 Vue.js 项目：

vue create brick-breaker

进入项目目录并安装依赖项：

cd brick-breaker
npm install

现在，我们可以在 src/App.vue 中创建我们的游戏组件：

<template>
  <div id="game">
    <div id="paddle"></div>
    <div id="ball"></div>
    <div id="bricks"></div>
  </div>
</template>

<script>
import { defineComponent, ref } from "vue";

export default defineComponent({
  setup() {
    const paddlePos = ref(0);
    const ballPos = ref({ x: 0, y: 0 });
    const ballSpeed = ref({ x: 1, y: 1 });

    return {
      paddlePos,
      ballPos,
      ballSpeed,
    };
  },
});
</script>

<style>
#game {
  width: 600px;
  height: 400px;
  background-color: black;
}

#paddle {
  width: 100px;
  height: 10px;
  background-color: white;
  position: absolute;
  left: 250px;
  bottom: 50px;
}

#ball {
  width: 10px;
  height: 10px;
  background-color: white;
  position: absolute;
  left: 290px;
  top: 100px;
}

#bricks {
  width: 100px;
  height: 20px;
  background-color: red;
  position: absolute;
  left: 100px;
  top: 100px;
}
</style>

这个组件定义了一个简单的游戏场景，包括一个球、一个挡板和几块砖块。接下来，我们需要添加一些交互，以便玩家可以使用键盘控制挡板并移动球。为此，我们可以在 mounted() 钩子中添加以下代码：

mounted() {
  document.addEventListener("keydown", this.handleKeyDown);
},
handleKeyDown(e) {
  if (e.keyCode === 37) {
    this.paddlePos -= 10;
  } else if (e.keyCode === 39) {
    this.paddlePos += 10;
  }
},

现在，您就可以使用键盘左右键来控制挡板了。接下来，我们需要添加一些碰撞检测逻辑，以便球在碰到挡板或砖块时会发生反应。为此，我们可以在 updated() 钩子中添加以下代码：

updated() {
  const ballRect = this.$refs.ball.getBoundingClientRect();
  const paddleRect = this.$refs.paddle.getBoundingClientRect();
  const bricksRects = document.querySelectorAll("#bricks").getBoundingClientRect();

  // 检测球和挡板的碰撞
  if (
    ballRect.top <= paddleRect.bottom &&
    ballRect.right >= paddleRect.left &&
    ballRect.left <= paddleRect.right
  ) {
    this.ballSpeed.y *= -1;
  }

  // 检测球和砖块的碰撞
  bricksRects.forEach((brickRect) => {
    if (
      ballRect.top <= brickRect.bottom &&
      ballRect.right >= brickRect.left &&
      ballRect.left <= brickRect.right &&
      ballRect.bottom >= brickRect.top
    ) {
      this.ballSpeed.x *= -1;
      this.ballSpeed.y *= -1;

      // 从场景中移除砖块
      brickRect.remove();
    }
  });

  // 检测球和场景边界的碰撞
  if (ballRect.top <= 0 || ballRect.bottom >= window.innerHeight) {
    this.ballSpeed.y *= -1;
  }
  if (ballRect.left <= 0 || ballRect.right >= window.innerWidth) {
    this.ballSpeed.x *= -1;
  }
},

现在，您就可以看到球在场景中移动并与挡板和砖块发生碰撞了。最后，我们可以添加一些自定义样式来美化游戏。为此，您可以在 src/App.vue 中添加以下代码：

<style>
#game {
  background-image: url(./background.png);
  background-repeat: no-repeat;
  background-size: cover;
}

#paddle {
  background-image: url(./paddle.png);
  background-repeat: no-repeat;
  background-size: contain;
}

#ball {
  background-image: url(./ball.png);
  background-repeat: no-repeat;
  background-size: contain;
}

#bricks {
  background-image: url(./bricks.png);
  background-repeat: no-repeat;
  background-size: contain;
}
</style>