微信小程序端+记忆纸牌小游戏（最强大脑）微信小程序

本文链接：https://blog.csdn.net/weixin_52428490/article/details/136561434

本文介绍了一款基于Vue的随机扑克记忆游戏，包括基础版本的记忆一副牌和进阶版的记忆多副牌。开发者分享了源码，并提到程序的界面和基本操作，如快速扑克和马拉松扑克模式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这款小游戏有点考验脑力，但是上线太繁琐了，有想要的可以找我要源码。

主要功能：随机扑克是记忆一副牌之后按照顺序排列出来。进阶版是可以一次性记忆多幅扑克之后一一的都按顺序恢复过来。

程序截图：

<template>
  <view style="width: 100vw;
  height: 100vh;" >
    <view class="fl" style="text-align: center;margin-top:60rpx ">
      <img @click="toScord" style="width: 300rpx;height:300rpx;margin: 200rpx auto 80rpx" src="../../static/img/logo.png" alt="">

      <text style="font-size: 48px;">招曦相伴</text>
        <text style="margin-top: 70rpx ">International Memory Open</text>
        <text style="margin-top: 40rpx ">Memory Training System</text>
      <text style="font-size: 28px;margin-top: 40rpx">Cards</text>
      <view style="padding: 100rpx 80rpx 0" class="fw">
        <view>
          <view @click="tofast" style="padding: 10rpx 30rpx;border: 1px solid #168CFF;color:#168CFF;border-radius: 8rpx">快速扑克</view>

          <view class="fw" style="height: 30px">

          </view>
        </view>
        <view>
            <view style="padding: 10rpx 30rpx;border: 1px solid #168CFF;color:#168CFF;border-radius: 8rpx" @click="tomalsong">马拉松扑克</view>

          <view class="fw">
            <text @click="change('-')" :class="val===2?'jinyong':'shiyon'">—</text>
            <text class="shiyon1">{{val}}</text>
            <text @click="change('+')" class="shiyon2">+</text>
          </view>
        </view>
      </view>
    </view>
    </view>
</template>

<script setup>

import FuiInputNumber from "../../componets/firstui/fui-input-number/fui-input-number.vue";
import {ref} from "vue";
const val = ref(2)
function change(type) {
if (type==='-'){
  if (val.value!==2){
    val.value -=1
  }else {
    val.value = 2
  }
}else {
  val.value +=1
}

}
function tofast() {
  uni.redirectTo({
    url:'/pages/myyuyue/myyuyue'
  })
}
function tomalsong() {
  uni.setStorageSync('count',JSON.stringify(val.value))
  uni.setStorageSync('count2',JSON.stringify(val.value))
  let list = []
  for (let i = 1; i <= val.value; i++) {
    list.push(i)
  }
  uni.setStorageSync('list',JSON.stringify(list))
  uni.redirectTo({
    url:'/pages/xiangwan/xiangwan'
  })

}
function toScord() {
  uni.navigateTo({
    url:'/pages/tool/tool'
  })
}
</script>

<style scoped>
.fw{
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;

}
.fl{
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-content: center;
}
.shiyon{
  color:#168CFF;
  background: #F5F5F5;
  width: 40rpx;
  height: 40rpx;
  line-height: 40rpx;
  padding: 10rpx ;
  font-size: 10px;
}
.shiyon2{
  color:#168CFF;
  background: #F5F5F5;
  width: 40rpx;
  height: 40rpx;
  line-height: 40rpx;
  padding: 10rpx ;
  font-size: 20px;
}
.shiyon1{
  color: #131313;
  background: #F5F5F5;
  width: 40rpx;
  height: 40rpx;
  line-height: 40rpx;
  padding: 10rpx 15rpx;
  font-size: 10px;
  margin: 0 8rpx;
  font-size: 16px;
}
.jinyong{
  color: #c9c9c9;
  background: #efefef;
  width: 40rpx;
  height: 40rpx;
  line-height: 40rpx;

  padding: 10rpx ;
  font-size: 10px;

}
</style>

<template>
  <view style="width: 100vw;height: 100vh;display: flex;align-items: center">
    <view style="margin: auto;text-align: center"><text style="font-size: 100px;">{{timeLeft}}</text></view>
  </view>
</template>
<script setup>
// 设置初始倒计时时间
import {ref} from "vue";

const timeLeft = ref(6);

// 更新倒计时显示函数
function updateCountdown() {
  timeLeft.value--;

  // 倒计时结束后显示"GO!!!"
  if (timeLeft.value < 1) {
    timeLeft.value = "GO!!!";
    clearInterval(timer);
    uni.redirectTo({
      url:'/pages/detail/detail'
    })
  }
}

// 每秒更新一次倒计时
const timer = setInterval(updateCountdown, 1000);

// 页面加载时先调用一次更新倒计时函数
updateCountdown();

</script>


<style scoped>

</style>