用vue帮我写个贪吃蛇

好的，我会为您提供一个基于Vue的贪吃蛇小游戏实现。以下是代码示例：

template部分：

<template>
  <div class="snake-game">
    <div class="playing-field" :style="{ width: fieldWidth + 'px', height: fieldHeight + 'px' }">
      <div class="snake" v-for="(point, index) in snake" :class="{ head: index === 0 }" :style="{ left: point.x + 'px', top: point.y + 'px' }"></div>
      <div class="cell food" :style="{ left: food.x + 'px', top: food.y + 'px' }"></div>
    </div>
    <div class="game-info" v-if="gameOver">
      <h2>Game Over!</h2>
      <p>Your final score: {{ score }}</p>
      <button @click="resetGame">Play Again</button>
    </div>
    <div class="game-info" v-else>
      <p>Score: {{ score }}</p>
    </div>
  </div>
</template>

script部分：

<script>
export default {
  name: 'SnakeGame',
  data() {
    return {
      fieldWidth: 600,
      fieldHeight: 600,
      cellSize: 20,
      cellCountX: 30,
      cellCountY: 30,
      snake: [{ x: 0, y: 0 }],
      direction: 'right',
      food: null,
      interval: null,
      gameOver: false,
      score: 0
    }
  },
  mounted() {
    this.initGame()
  },
  methods: {
    initGame() {
      this.generateFood()
      this.interval = setInterval(this.moveSnake, 100)
    },
    resetGame() {
      this.snake = [{ x: 0, y: 0 }]
      this.direction = 'right'
      this.food = null
      this.gameOver = false
      this.score = 0
      clearInterval(this.interval)
      this.initGame()
    },
    generateFood() {
      while (!this.food || this.cellOccupied(this.food)) {
        this.food = {
          x: this.cellSize * Math.floor(Math.random() * this.cellCountX),
          y: this.cellSize * Math.floor(Math.random() * this.cellCountY)
        }
      }
    },
    moveSnake() {
      const newHead = { ...this.snake[0] }
      switch (this.direction) {
        case 'up':
          newHead.y -= this.cellSize
          break
        case 'down':
          newHead.y += this.cellSize
          break
        case 'left':
          newHead.x -= this.cellSize
          break
        case 'right':
          newHead.x += this.cellSize
          break
      }

      if (this.cellOccupied(newHead) || newHead.x < 0 || newHead.x >= this.fieldWidth || newHead.y < 0 || newHead.y >= this.fieldHeight) {
        this.gameOver = true
        clearInterval(this.interval)
      } else {
        this.snake.unshift(newHead)
        if (this.cellOccupied(this.food)) {
          this.score++
          this.generateFood()
        } else {
          this.snake.pop()
        }
      }
    },
    cellOccupied(cell) {
      for (let i = 0; i < this.snake.length; i++) {
        if (this.snake[i].x === cell.x && this.snake[i].y === cell.y) {
          return true
        }
      }
      return false
    },
    handleKeyDown(event) {
      switch (event.key) {
        case 'ArrowUp':
          if (this.direction !== 'down') {
            this.direction = 'up'
          }
          break
        case 'ArrowDown':
          if (this.direction !== 'up') {
            this.direction = 'down'
          }
          break
        case 'ArrowLeft':
          if (this.direction !== 'right') {
            this.direction = 'left'
          }
          break
        case 'ArrowRight':
          if (this.direction !== 'left') {
            this.direction = 'right'
          }
          break
      }
    }
  },
  computed: {
    playingFieldStyle() {
      return { width: `${this.fieldWidth}px`, height: `${this.fieldHeight}px` }
    }
  },
  watch: {
    score(newScore) {
      if (newScore >= 10) {
        clearInterval(this.interval)
        alert('You won!')
      }
    }
  },
  created() {
    document.addEventListener('keydown', this.handleKeyDown)
  },
  destroyed() {
    document.removeEventListener('keydown', this.handleKeyDown)
  }
}
</script>

样式部分：

<style>
.snake-game {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.playing-field {
  position: relative;
  border: 1px solid #333;
}

.cell {
  position: absolute;
  width: 20px;
  height: 20px;
}

.snake {
  background-color: #333;
  border: 1px solid #fff;
}

.snake.head {
  background-color: #999;
}

.cell.food {
  background-color: #f00;
}

.game-info {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  font-size: 2rem;
}

.game-info button {
  margin-top: 1rem;
  padding: 0.5rem 1rem;
  font-size: 1.5rem;
  background-color: #333;
  color: #fff;
  border: none;
  cursor: pointer;
}
</style>

您可以将此代码复制到您的Vue项目中，并在浏览器中启动它以查看贪吃蛇游戏的实现。希望能帮到您！