vue记忆卡牌游戏

说明:

我希望用vue做一款记忆卡牌游戏

游戏规则如下:

游戏设置:使用3x4的网格,包含3对字母(A,B,C,D,E,F)。

​随机洗牌:初始字母对被打乱顺序,生成随机布局。

​游戏流程:玩家依次翻开两张牌,匹配则保留,否则隐藏。全部匹配后获胜

效果图:

step1:C:\Users\wangrusheng\PycharmProjects\untitled3\src\views\Cards.vue

typescript 复制代码
<template>
  <div class="game-container">
    <!-- 游戏网格 -->
    <div class="grid">
      <div
        v-for="(card, index) in cards"
        :key="index"
        class="card"
        :class="{ flipped: card.revealed, matched: card.matched }"
        @click="selectCard(index)"
      >
        <div class="front">{{ card.id }}</div>
        <div class="back">{{ card.value }}</div>
      </div>
    </div>

    <!-- 游戏状态提示 -->
    <div v-if="message" class="message">{{ message }}</div>
    <div v-if="gameWon" class="win-message">You Win!</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rows: 3,
      cols: 4,
      cards: [],
      selected: [],
      message: '',
      gameWon: false,
      processing: false
    }
  },
  mounted() {
    this.initializeGame();
  },
  methods: {
    // 初始化游戏
    initializeGame() {
      // 生成成对字母
      const pairs = Array.from({ length: (this.rows * this.cols) / 2 }, (_, i) =>
        String.fromCharCode(65 + i)
      ).flatMap(c => [c, c]);

      // 打乱顺序
      for (let i = pairs.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [pairs[i], pairs[j]] = [pairs[j], pairs[i]];
      }

      // 初始化卡片数据
      this.cards = pairs.map((value, id) => ({
        id: id + 1,
        value,
        revealed: false,
        matched: false
      }));
    },

    // 处理卡片点击
    async selectCard(index) {
      if (
        this.processing ||              // 正在处理中
        this.cards[index].matched ||    // 已匹配卡片
        this.selected.includes(index)   // 重复选择同一卡片
      ) return;

      this.cards[index].revealed = true;
      this.selected.push(index);

      // 选择两张卡片后进行处理
      if (this.selected.length === 2) {
        this.processing = true;
        const [first, second] = this.selected;
        const match = this.cards[first].value === this.cards[second].value;

        if (match) {
          this.message = "Match!";
          this.cards[first].matched = true;
          this.cards[second].matched = true;

          // 检查胜利条件
          this.gameWon = this.cards.every(c => c.matched);
        } else {
          this.message = "No match...";
          // 延迟后翻转回来
          await new Promise(resolve => setTimeout(resolve, 1000));
          this.cards[first].revealed = false;
          this.cards[second].revealed = false;
        }

        // 重置状态
        await new Promise(resolve => setTimeout(resolve, 500));
        this.selected = [];
        this.message = '';
        this.processing = false;
      }
    }
  }
}
</script>

<style>
.game-container {
  max-width: 600px;
  margin: 20px auto;
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.card {
  height: 100px;
  border: 2px solid #ccc;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  cursor: pointer;
  position: relative;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

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

.card.matched {
  background-color: #90EE90;
}

.front, .back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back {
  transform: rotateY(180deg);
}

.message {
  margin-top: 20px;
  font-size: 24px;
  text-align: center;
}

.win-message {
  margin-top: 20px;
  font-size: 32px;
  color: green;
  text-align: center;
  font-weight: bold;
}
</style>

end

相关推荐
夕水3 分钟前
这个提升效率宝藏级工具一定要收藏使用
前端·javascript·trae
AiFlutter7 分钟前
低代码平台开发手机USB-HID调试助手
单片机·游戏·计算机外设
会飞的鱼先生17 分钟前
vue3 内置组件KeepAlive的使用
前端·javascript·vue.js
苹果酱056730 分钟前
【Azure Redis 缓存】在Azure Redis中,如何限制只允许Azure App Service访问?
java·vue.js·spring boot·mysql·课程设计
前端大白话1 小时前
前端崩溃瞬间救星!10 个 JavaScript 实战技巧大揭秘
前端·javascript
一千柯橘1 小时前
Nestjs 解决 request entity too large
javascript·后端
举个栗子dhy2 小时前
如何处理动态地址栏参数,以及Object.entries() 、Object.fromEntries()和URLSearchParams.entries()使用
javascript
宁静_致远2 小时前
React Native 技术栈:基于 macOS 开发平台的 iOS 应用开发指南
前端·javascript·react native
H5开发新纪元2 小时前
VS Code 插件开发实战:代码截图工具
javascript·visual studio code
工藤新一¹2 小时前
C++/SDL进阶游戏开发 —— 双人塔防游戏(代号:村庄保卫战 13)
c++·游戏·游戏引擎·毕业设计·sdl·c++游戏开发·渲染库