Bagaimana untuk menggunakan Vue untuk melaksanakan permainan Snake?

Snake ialah permainan klasik yang ringkas dan mudah dimainkan tetapi mempunyai banyak keseronokan. Artikel ini akan memperkenalkan cara menggunakan rangka kerja Vue untuk melaksanakan permainan ular mudah.

1. Penyediaan projek

Sebelum kita mula, kita perlu memasang Vue CLI. Jika anda belum memasangnya lagi, anda boleh mengikuti langkah di bawah untuk memasangnya.

1. Jalankan arahan berikut dalam terminal:

npm install -g @vue/cli

2. Buat projek Vue baharu.

vue create snake-game

3. Masukkan projek yang baru anda buat.

cd snake-game

2. Struktur projek dan pemilihan teknologi

Dari segi struktur projek, kita perlu mencipta dua komponen: satu komponen antara muka permainan, dan satu lagi komponen ular.

Dari segi pemilihan teknologi, kami memilih untuk menggunakan Kanvas HTML5 untuk melukis antara muka permainan dan menggunakan idea komponenisasi Vue untuk melaksanakan kawalan logik.

3. Laksanakan

1. Cipta komponen antara muka permainan

Cipta fail Game.vue baharu dalam direktori src/components/, dan kemudian tambah kod berikut:

<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>

Ini adalah komponen yang sangat mudah, kami hanya perlu menulis elemen Kanvas HTML5, kemudian ikat rujukan kepadanya, dapatkan rujukan dan mulakan permainan apabila komponen itu dipasang.

2. Tambah komponen ular

Buat fail Snake.vue baharu dalam direktori src/components/, dan kemudian tambah kod berikut:

<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>

Komponen ini akan menggelungkan kandungan setiap ular berdasarkan atribut ular yang diluluskan dalam komponen induk bahagian badan. Kami hanya perlu menulis fungsi getSnakeStyles, mengembalikan objek yang mengandungi maklumat gaya dan menjana ular secara dinamik berdasarkan data.

3. Tambahkan ular pada komponen Permainan

Dalam blok skrip komponen Permainan, kita perlu memperkenalkan komponen Snake dan tambah kod berikut pada kaedah startGame:

import Snake from "./Snake.vue";

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

Di sini, kami menambah ular yang dipanggil ular pada data komponen Permainan, dan kemudian tambahkan baris kod pada kaedah startGame untuk menambah bahagian badan pertama pada data ular. Akhirnya, kami memperkenalkan komponen Snake dan menambah atribut ular pada templat.

4. Kawal pergerakan ular

Untuk membolehkan ular bergerak, kita perlu menambah pemasa pada komponen Permainan dan memanggil kaedah moveSnake sekali-sekala untuk mengawal pergerakan ular.

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;
    }
  },
},

Antaranya, kami menambah data yang dipanggil arah kepada komponen Permainan, yang mewakili arah semasa ular. moveInterval mewakili id ​​yang digunakan untuk mengosongkan pemasa. Dalam kaedah moveSnake, kami mengira kedudukan baru kepala ular berdasarkan arah semasa ular, padam hujung asal dan masukkan kepala ular baru di kepala.

Akhir sekali, kami melaksanakan kaedah handleKeyDown, yang digunakan untuk mendengar acara papan kekunci untuk menukar arah pergerakan ular.

5. Permainan tamat apabila ia mencecah sempadan atau dirinya sendiri

Untuk melaksanakan fungsi tamat permainan, kita perlu menentukan sama ada ular itu telah menyentuh sempadan atau dirinya sendiri di dalam kaedah 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);
}

Di sini, kami mula-mula menentukan sama ada kepala ular telah melepasi sempadan antara muka permainan Jika ia melintasi sempadan, kosongkan pemasa dan gesa permainan untuk tamatkan.

Kemudian, dalam gelung, ia dinilai satu persatu sama ada kepala ular itu telah menyentuh dirinya sendiri Jika ya, pemasa juga dikosongkan dan permainan tamat.

6. Melukis makanan dalam antara muka permainan

Akhir sekali, kami melaksanakan fungsi melukis makanan dalam antara muka permainan. Untuk mencapai fungsi ini, kami menggunakan randomFoodPosition untuk mengira kedudukan makanan rawak, dan kemudian menggunakan kaedah drawCircle untuk melukis makanan bulat dalam antara muka permainan.

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();
  },
},

Di sini, kami menambahkan data bernama makanan pada komponen Permainan, yang menunjukkan lokasi makanan semasa. Dalam kaedah startGame, kami memanggil kaedah getRandomFoodPosition untuk mengira kedudukan makanan rawak, dan kemudian menggunakan kaedah drawCircle untuk menarik makanan dalam antara muka.

Akhir sekali, kita hanya perlu menentukan sama ada ular itu bertepatan dengan makanan dalam kaedah moveSnake Jika ia bertepatan, tambah panjang badan ular dan kira semula kedudukan makanan yang baru.

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();
  }

  // ...
},

Setakat ini, kami telah menyelesaikan semua kandungan pelaksanaan permainan Snake dalam Vue.

4. Ringkasan

Artikel ini memperkenalkan cara menggunakan rangka kerja Vue untuk melaksanakan permainan ular yang mudah. Dalam proses ini, kami mempelajari cara menggunakan elemen Kanvas HTML5 untuk lukisan antara muka, dan cara menggunakan idea komponenisasi Vue untuk melaksanakan kawalan logik, dan akhirnya menyelesaikan permainan Snake dengan permainan asas. Saya harap artikel ini dapat membantu semua orang dalam mempelajari rangka kerja Vue dan pembangunan permainan.

Atas ialah kandungan terperinci Bagaimana untuk menggunakan Vue untuk melaksanakan permainan Snake?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!