Comment utiliser Vue pour implémenter le jeu Snake ?

Snake est un jeu classique simple et facile à jouer mais très amusant. Cet article explique comment utiliser le framework Vue pour implémenter un jeu de serpent simple.

1. Préparation du projet

Avant de commencer, nous devons installer Vue CLI. Si vous ne l'avez pas encore installé, vous pouvez suivre les étapes ci-dessous pour l'installer.

1. Exécutez la commande suivante dans le terminal :

npm install -g @vue/cli

2. Créez un nouveau projet Vue.

vue create snake-game

3. Entrez le projet que vous venez de créer.

cd snake-game

2. Structure du projet et sélection de la technologie

En termes de structure du projet, nous devons créer deux composants : l'un est le composant d'interface de jeu et le l’autre concerne les composants du serpent.

En termes de sélection technologique, nous avons choisi d'utiliser HTML5 Canvas pour dessiner l'interface du jeu et d'utiliser les idées de composantisation de Vue pour implémenter le contrôle logique.

3. Implémentation

1. Créer un composant d'interface de jeu

Créer un nouveau jeu dans le src/components/ répertoire .vue, puis ajoutez le code suivant :

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

Il s'agit d'un composant très simple, il nous suffit d'écrire un élément HTML5 Canvas, puis d'y lier une référence et d'obtenir le composant quand il est monté, citez et démarrez le jeu.

2. Ajouter un composant serpent

Créez un nouveau fichier Snake.vue dans le répertoire src/components/, puis ajoutez le code suivant : # 🎜🎜#

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

Ce composant parcourra chaque partie du corps du serpent en fonction de l'attribut de serpent transmis par le composant parent. Il nous suffit d'écrire une fonction getSnakeStyles, de renvoyer un objet contenant des informations de style et de générer dynamiquement des serpents basés sur les données.

Ajouter un serpent dans le composant Game

Dans le bloc de script du composant Game, nous devons introduire le composant Snake et l'ajouter la méthode startGame Le code suivant :

import Snake from "./Snake.vue";

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

Ici, nous ajoutons une donnée appelée serpent au composant Game, puis ajoutons une ligne de code à la méthode startGame pour ajouter la première partie du corps aux données du serpent . Enfin, nous avons introduit le composant Snake et ajouté l'attribut serpent au modèle.

Contrôler le mouvement du serpent

Pour que le serpent bouge, nous devons ajouter une minuterie au composant Game et appeler moveSnake à chaque fois dans un certain temps, méthode pour contrôler le mouvement du serpent.

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

Parmi eux, nous avons ajouté une donnée appelée direction au composant Game, indiquant la direction actuelle du serpent. moveInterval représente l'identifiant utilisé pour effacer le minuteur. Dans la méthode moveSnake, nous calculons la nouvelle position de la tête du serpent en fonction de la direction actuelle du serpent, supprimons l'extrémité d'origine et insérons la nouvelle tête du serpent au niveau de la tête.

Enfin, nous avons implémenté la méthode handleKeyDown, qui est utilisée pour écouter les événements du clavier afin de changer la direction du mouvement du serpent.

Le jeu se termine lorsqu'il atteint la frontière ou lui-même

Afin d'implémenter la fonction de fin de jeu, nous devons déterminer si le serpent a touché la bordure à l'intérieur de la méthode moveSnake ou elle-même.

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

Ici, nous déterminons d'abord si la tête de serpent a franchi la limite de l'interface de jeu. Si elle franchit la limite, effacez le chronomètre et invitez le jeu à se terminer.

Ensuite, dans la boucle, on juge un par un si la tête du serpent s'est touchée. Si c'est le cas, le chronomètre est également effacé et le jeu est terminé.

Dessiner de la nourriture dans l'interface du jeu

Enfin, nous implémentons la fonction de dessiner de la nourriture dans l'interface du jeu. Afin d'obtenir cette fonction, nous utilisons randomFoodPosition pour calculer une position aléatoire des aliments, puis utilisons la méthode drawCircle pour dessiner des aliments circulaires dans l'interface de jeu.

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

Ici, nous avons ajouté une donnée nommée food au composant Game, indiquant l'emplacement actuel de la nourriture. Dans la méthode startGame, nous appelons la méthode getRandomFoodPosition pour calculer une position aléatoire des aliments, puis utilisons la méthode drawCircle pour dessiner des aliments dans l'interface.

Enfin, il suffit de déterminer si le serpent coïncide avec la nourriture dans la méthode moveSnake. S'ils coïncident, augmentez la longueur du corps du serpent et recalculez une nouvelle position de nourriture.

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

  // ...
},

Jusqu'à présent, nous avons terminé tout le contenu de l'implémentation du jeu Snake dans Vue.

4. Résumé

Cet article présente comment utiliser le framework Vue pour implémenter un jeu de serpent simple. Au cours de ce processus, nous avons appris à utiliser les éléments HTML5 Canvas pour le dessin d'interface et à utiliser les idées de composants Vue pour implémenter le contrôle logique, et avons finalement terminé un jeu Snake avec un gameplay de base. J'espère que cet article pourra être utile à tout le monde pour apprendre le framework Vue et le développement de jeux.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!