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

相关推荐
GISer_Jing2 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript
天涯学馆2 小时前
前端开发也能用 WebAssembly?这些场景超实用!
前端·javascript·面试
我在北京coding3 小时前
TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)
前端·javascript·vue.js
海天胜景4 小时前
vue3 获取选中的el-table行数据
javascript·vue.js·elementui
翻滚吧键盘4 小时前
vue绑定一个返回对象的计算属性
前端·javascript·vue.js
苦夏木禾4 小时前
js请求避免缓存的三种方式
开发语言·javascript·缓存
超级土豆粉5 小时前
Turndown.js: 优雅地将 HTML 转换为 Markdown
开发语言·javascript·html
乆夨(jiuze)5 小时前
记录H5内嵌到flutter App的一个问题,引发后面使用fastClick,引发后面input输入框单击无效问题。。。
前端·javascript·vue.js
小彭努力中5 小时前
141.在 Vue 3 中使用 OpenLayers Link 交互:把地图中心点 / 缩放级别 / 旋转角度实时写进 URL,并同步解析显示
前端·javascript·vue.js·交互