Vue を使用してスネークゲームを実装するにはどうすればよいですか?-Vue.js-php.cn

Vue を使用してスネークゲームを実装するにはどうすればよいですか?

王林

リリース： 2023-06-25 09:12:19

オリジナル

2196 人が閲覧しました

Snake は、シンプルで簡単にプレイできる古典的なゲームですが、たくさんの楽しみがあります。この記事では、Vue フレームワークを使用して簡単なスネークゲームを実装する方法を紹介します。

1. プロジェクトの準備

始める前に、Vue CLI をインストールする必要があります。まだインストールしていない場合は、以下の手順に従ってインストールできます。

ターミナルで次のコマンドを実行します:

npm install -g @vue/cli

ログイン後にコピー

新しい Vue プロジェクトを作成します。

vue create snake-game

ログイン後にコピー

作成したばかりのプロジェクトを入力します。

cd snake-game

ログイン後にコピー

2. プロジェクトの構造とテクノロジーの選択

プロジェクトの構造に関しては、2 つのコンポーネントを作成する必要があります: 1 つはゲームインターフェイスコンポーネント、もう 1 つはスネークコンポーネントです。。

テクノロジーの選択に関しては、HTML5 Canvas を使用してゲームインターフェイスを描画し、Vue コンポーネント化のアイデアを使用してロジック制御を実装することを選択しました。

3. 実装

ゲームインターフェイスコンポーネントの作成

src/components/ ディレクトリに新しい Game.vue ファイルを作成し、次のコード:

<template>
  <div>
    <canvas ref="canvas" width="600" height="400"></canvas>
  </div>
</template>

<script>
export default {
  mounted() {
    this.canvas = this.$refs.canvas;
    this.context = this.canvas.getContext("2d");
    this.canvas.width = 600;
    this.canvas.height = 400;
    this.startGame();
  },
  methods: {
    startGame() {
      // 游戏启动
    },
  },
};
</script>

<style>
canvas {
  border: 1px solid #000;
}
</style>

ログイン後にコピー

これは非常に単純なコンポーネントです。HTML5 Canvas 要素を記述し、それに参照をバインドし、コンポーネントがマウントされたときに参照を取得してゲームを開始するだけです。

スネークコンポーネントの追加

src/components/ ディレクトリに新しい Snake.vue ファイルを作成し、次のコードを追加します:

<template>
  <div>
    <div v-for="(bodyPart, index) in snake" :key="index" :style="getSnakeStyles(bodyPart)"></div>
  </div>
</template>

<script>
export default {
  props: {
    snake: {
      type: Array,
      default: () => [{ x: 0, y: 0 }],
    },
  },
  methods: {
    getSnakeStyles(bodyPart) {
      return {
        position: "absolute",
        width: "20px",
        height: "20px",
        background: "green",
        left: `${bodyPart.x}px`,
        top: `${bodyPart.y}px`,
      };
    },
  },
};
</script>

<style></style>

ログイン後にコピー

このコンポーネントは、親コンポーネントによって渡されたスネーク属性に従って、スネークの各体の部分がループでレンダリングされます。 getSnakeStyles 関数を記述し、スタイル情報を含むオブジェクトを返し、データに基づいてスネークを動的に生成するだけです。

Game コンポーネントにスネークを追加する

Game コンポーネントのスクリプトブロックで、Snake コンポーネントを導入し、次のコードを startGame メソッドに追加する必要があります。 :

import Snake from "./Snake.vue";

export default {
  // ...
  components: {
    Snake,
  },
  data() {
    return {
      snake: [],
    };
  },
  methods: {
    startGame() {
      this.snake.push({ x: 0, y: 0 });
    },
  },
};

ログイン後にコピー

ここでは、snake というデータを Game コンポーネントに追加し、startGame メソッドにコード行を追加して、最初の本体部分を Snake データに追加しました。最後に、Snake コンポーネントを導入し、snake 属性をテンプレートに追加しました。

ヘビの動きを制御する

ヘビを動かせるようにするには、Game コンポーネントにタイマーを追加し、一定の間隔で moveSnake メソッドを呼び出して制御する必要があります。蛇の動き。

data() {
  return {
    snake: [],
    direction: "right",
    moveInterval: null
  };
},
methods: {
  startGame() {
    this.snake.push({ x: 0, y: 0 });
    this.moveInterval = setInterval(this.moveSnake, 200);
  },
  moveSnake() {
    const snakeHead = { ...this.snake[0] };

    switch (this.direction) {
      case "right":
        snakeHead.x += 20;
        break;
      case "left":
        snakeHead.x -= 20;
        break;
      case "up":
        snakeHead.y -= 20;
        break;
      case "down":
        snakeHead.y += 20;
        break;
    }

    this.snake.pop();
    this.snake.unshift(snakeHead);
  },
  handleKeyDown(event) {
    switch (event.keyCode) {
      case 37:
        if (this.direction !== "right") this.direction = "left";
        break;
      case 38:
        if (this.direction !== "down") this.direction = "up";
        break;
      case 39:
        if (this.direction !== "left") this.direction = "right";
        break;
      case 40:
        if (this.direction !== "up") this.direction = "down";
        break;
    }
  },
},

ログイン後にコピー

その中で、ヘビの現在の方向を示すdirectionというデータをGameコンポーネントに追加しました。 moveInterval は、タイマーをクリアするために使用される ID を表します。 moveSnake メソッドでは、ヘビの現在の方向に基づいてヘビの頭の新しい位置を計算し、元の端を削除して、新しいヘビの頭を頭に挿入します。

最後に、handleKeyDown メソッドを実装しました。これは、ヘビの移動方向を変更するキーボードイベントをリッスンするために使用されます。

ヘビが境界またはそれ自体に到達するとゲームは終了します

ゲーム終了関数を実装するには、ヘビが境界に触れたか、ヘビ自体に触れたかを判断する必要があります。 moveSnake メソッド内。

moveSnake() {
  const snakeHead = { ...this.snake[0] };

  switch (this.direction) {
    case "right":
      snakeHead.x += 20;
      break;
    case "left":
      snakeHead.x -= 20;
      break;
    case "up":
      snakeHead.y -= 20;
      break;
    case "down":
      snakeHead.y += 20;
      break;
  }

  // 判断是否越界
  if (snakeHead.x < 0 || snakeHead.x > 580 || snakeHead.y < 0 || snakeHead.y > 380) {
    clearInterval(this.moveInterval);
    alert("Game over!");
    location.reload();
    return;
  }

  // 判断是否碰到了自身
  for (let i = 1; i < this.snake.length; i++) {
    if (snakeHead.x === this.snake[i].x && snakeHead.y === this.snake[i].y) {
      clearInterval(this.moveInterval);
      alert("Game over!");
      location.reload();
      return;
    }
  }

  this.snake.pop();
  this.snake.unshift(snakeHead);
}

ログイン後にコピー

ここでは、まずスネークヘッドがゲームインターフェイスの境界を越えたかどうかを判断します。境界を越えた場合は、タイマーをクリアしてゲームの終了を促します。そうでない場合は、実行を続行します。

その後、ループ内で蛇の頭が自分に触れたかどうかを1つずつ判定し、触れた場合もタイマーをクリアしてゲームオーバーとなります。

ゲームインターフェイスでの食べ物の描画

最後に、ゲームインターフェイスで食べ物を描画する機能を実装します。この機能を実現するには、randomFoodPosition を使用してランダムな食べ物の位置を計算し、drawCircle メソッドを使用してゲームインターフェイスに円形の食べ物を描画します。

startGame() {
  // ...
  // 画出第一个食物
  this.food = this.getRandomFoodPosition();
  this.drawCircle(this.context, this.food.x, this.food.y, 10, "red");
},
methods: {
  // ...
  getRandomFoodPosition() {
    return {
      x: Math.floor(Math.random() * 30) * 20,
      y: Math.floor(Math.random() * 20) * 20,
    };
  },
  drawCircle(ctx, x, y, r, color) {
    ctx.fillStyle = color;
    ctx.beginPath();
    ctx.arc(x, y, r, 0, Math.PI * 2, true);
    ctx.fill();
  },
},

ログイン後にコピー

ここでは、現在の食べ物の場所を示す food という名前のデータを Game コンポーネントに追加しました。 startGame メソッドでは、getRandomFoodPosition メソッドを呼び出してランダムな食べ物の位置を計算し、drawCircle メソッドを使用してインターフェースに食べ物を描画します。

最後に、moveSnake メソッドでヘビが餌と一致するかどうかを判断するだけで済みます。一致する場合は、ヘビの体の長さを長くして、新しい餌の位置を再計算します。

moveSnake() {
  // ...

  // 判断是否吃到了食物
  if (snakeHead.x === this.food.x && snakeHead.y === this.food.y) {
    this.snake.push(this.snake[this.snake.length - 1]);
    this.food = this.getRandomFoodPosition();
  }

  // ...
},

ログイン後にコピー

これまでに、Vue での Snake ゲームの実装に関するすべての内容が完了しました。

4. 概要

この記事では、Vue フレームワークを使用して簡単なスネークゲームを実装する方法を紹介します。このプロセスでは、HTML5 Canvas 要素を使用してインターフェイスを描画する方法と、Vue コンポーネント化のアイデアを使用してロジック制御を実装する方法を学び、最終的に基本的なゲームプレイを備えた Snake ゲームを完成させました。この記事が、Vue フレームワークとゲーム開発を学ぶ皆さんにとって役立つことを願っています。

以上がVue を使用してスネークゲームを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。