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

相关推荐
烛阴13 分钟前
bignumber.js深度解析:驾驭任意精度计算的终极武器
前端·javascript·后端
你的人类朋友1 小时前
✍️Node.js CMS框架概述:Directus与Strapi详解
javascript·后端·node.js
啊~哈1 小时前
vue3+elementplus表格表头加图标及文字提示
前端·javascript·vue.js
xiaogg36781 小时前
vue+elementui 网站首页顶部菜单上下布局
javascript·vue.js·elementui
weixin_527550401 小时前
初级程序员入门指南
javascript·python·算法
HelloWord~2 小时前
SpringSecurity+vue通用权限系统
vue.js·spring boot
钡铼技术ARM工业边缘计算机2 小时前
千元级PLC平台支持梯形图+Python双开发
javascript
高山我梦口香糖2 小时前
[electron]预脚本不显示内联script
前端·javascript·electron
神探小白牙2 小时前
vue-video-player视频保活成功确无法推送问题
前端·vue.js·音视频
Angel_girl3193 小时前
vue项目使用svg图标
前端·vue.js