当前位置：首页 > VUE

vue实现翻游戏

2026-02-20 05:39:41VUE

Vue实现翻牌游戏

翻牌游戏是一种常见的记忆配对游戏，玩家需要翻开卡片并匹配相同的图案。以下是使用Vue.js实现翻牌游戏的步骤。

初始化Vue项目

使用Vue CLI创建一个新项目，确保项目环境配置正确。

vue create memory-game
cd memory-game
npm install

创建游戏组件

在src/components目录下创建MemoryGame.vue文件，作为游戏的主要组件。

设计游戏数据结构

定义卡片的数据结构，包括卡片的ID、图案、是否翻开以及是否匹配。

data() {
  return {
    cards: [
      { id: 1, value: 'A', flipped: false, matched: false },
      { id: 2, value: 'A', flipped: false, matched: false },
      { id: 3, value: 'B', flipped: false, matched: false },
      { id: 4, value: 'B', flipped: false, matched: false },
      // 更多卡片...
    ],
    flippedCards: [],
    lockBoard: false
  };
}

实现翻牌逻辑

添加方法处理卡片的翻牌和匹配逻辑。

methods: {
  flipCard(card) {
    if (this.lockBoard || card.flipped || card.matched) return;

    card.flipped = true;

    if (this.flippedCards.length < 1) {
      this.flippedCards.push(card);
      return;
    }

    this.lockBoard = true;
    this.flippedCards.push(card);

    if (this.flippedCards[0].value === this.flippedCards[1].value) {
      this.flippedCards.forEach(c => c.matched = true);
      this.flippedCards = [];
      this.lockBoard = false;
    } else {
      setTimeout(() => {
        this.flippedCards.forEach(c => c.flipped = false);
        this.flippedCards = [];
        this.lockBoard = false;
      }, 1000);
    }
  }
}

渲染游戏界面

在模板中渲染卡片，并使用CSS样式控制卡片的翻转效果。

<template>
  <div class="memory-game">
    <div 
      v-for="card in cards" 
      :key="card.id" 
      class="card" 
      :class="{ 'flipped': card.flipped, 'matched': card.matched }"
      @click="flipCard(card)"
    >
      <div class="card-face card-front"></div>
      <div class="card-face card-back">{{ card.value }}</div>
    </div>
  </div>
</template>

<style scoped>
.memory-game {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  max-width: 500px;
  margin: 0 auto;
}

.card {
  position: relative;
  height: 100px;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform 0.5s;
}

.card.flipped {
  transform: rotateY(180deg);
}

.card-face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  border-radius: 5px;
}

.card-front {
  background: #2c3e50;
}

.card-back {
  background: #fff;
  transform: rotateY(180deg);
}

.card.matched {
  opacity: 0.5;
  cursor: default;
}
</style>

添加游戏状态管理

可以扩展游戏逻辑，例如计时器、分数计算和游戏重置功能。

data() {
  return {
    // 其他数据...
    time: 0,
    timer: null,
    gameOver: false
  };
},
methods: {
  startTimer() {
    this.timer = setInterval(() => {
      this.time++;
    }, 1000);
  },
  resetGame() {
    this.cards.forEach(card => {
      card.flipped = false;
      card.matched = false;
    });
    this.flippedCards = [];
    this.lockBoard = false;
    this.time = 0;
    clearInterval(this.timer);
    this.startTimer();
  }
},
mounted() {
  this.startTimer();
}