当前位置：首页 > VUE

vue实现贪吃蛇

2026-01-20 10:00:50VUE

vue实现贪吃蛇

实现思路

Vue实现贪吃蛇游戏的核心在于数据驱动DOM渲染。通过维护蛇身坐标、食物位置和移动方向等状态，结合Vue的响应式特性实现游戏逻辑。

核心代码结构

<template>
  <div class="game-container">
    <div class="grid" :style="gridStyle">
      <div 
        v-for="(cell, index) in grid" 
        :key="index"
        :class="['cell', 
          { 'snake': cell.isSnake, 'food': cell.isFood }]"
      ></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      gridSize: 20,
      snake: [{x: 10, y: 10}],
      food: {},
      direction: 'right',
      gameSpeed: 200
    }
  }
}
</script>

初始化游戏

methods: {
  initGame() {
    this.generateFood();
    this.gameInterval = setInterval(this.moveSnake, this.gameSpeed);
    window.addEventListener('keydown', this.handleKeyPress);
  },

  generateFood() {
    this.food = {
      x: Math.floor(Math.random() * this.gridSize),
      y: Math.floor(Math.random() * this.gridSize)
    };
  }
}

蛇移动逻辑

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

  switch(this.direction) {
    case 'up': head.y--; break;
    case 'down': head.y++; break;
    case 'left': head.x--; break;
    case 'right': head.x++; break;
  }

  if (this.checkCollision(head)) {
    this.gameOver();
    return;
  }

  this.snake.unshift(head);

  if (head.x === this.food.x && head.y === this.food.y) {
    this.generateFood();
  } else {
    this.snake.pop();
  }
}

碰撞检测

checkCollision(head) {
  // 边界检测
  if (head.x < 0 || head.x >= this.gridSize || 
      head.y < 0 || head.y >= this.gridSize) {
    return true;
  }

  // 自碰撞检测
  return this.snake.some(segment => 
    segment.x === head.x && segment.y === head.y
  );
}

键盘控制

handleKeyPress(e) {
  const keyMap = {
    'ArrowUp': 'up',
    'ArrowDown': 'down',
    'ArrowLeft': 'left',
    'ArrowRight': 'right'
  };

  const newDirection = keyMap[e.key];
  const oppositeDirections = {
    up: 'down',
    down: 'up',
    left: 'right',
    right: 'left'
  };

  if (newDirection && oppositeDirections[this.direction] !== newDirection) {
    this.direction = newDirection;
  }
}

样式设计

.game-container {
  display: flex;
  justify-content: center;
}

.grid {
  display: grid;
  grid-template-columns: repeat(20, 20px);
  gap: 1px;
  background: #eee;
}

.cell {
  width: 20px;
  height: 20px;
  background: white;
}

.snake {
  background: #4CAF50;
}

.food {
  background: #F44336;
  border-radius: 50%;
}

游戏状态管理

gameOver() {
  clearInterval(this.gameInterval);
  alert('Game Over!');
  this.resetGame();
},

resetGame() {
  this.snake = [{x: 10, y: 10}];
  this.direction = 'right';
  this.generateFood();
  this.initGame();
}

响应式网格计算

computed: {
  grid() {
    const grid = [];
    for (let y = 0; y < this.gridSize; y++) {
      for (let x = 0; x < this.gridSize; x++) {
        grid.push({
          x, y,
          isSnake: this.snake.some(segment => segment.x === x && segment.y === y),
          isFood: this.food.x === x && this.food.y === y
        });
      }
    }
    return grid;
  },

  gridStyle() {
    return {
      gridTemplateColumns: `repeat(${this.gridSize}, 20px)`
    };
  }
}

生命周期控制

mounted() {
  this.initGame();
},

beforeDestroy() {
  clearInterval(this.gameInterval);
  window.removeEventListener('keydown', this.handleKeyPress);
}