[前端暴龙机，Vue2.x 进化 Vue3 ] Day29.Vue3 网页小游戏(一) | ♾ 台版鱿鱼游戏，玩?还是不玩?

免责声明:
最近跟着中了"鱿鱼游戏"的毒，哈哈哈
这个游戏，相信大多数的人都有玩过~
不过，我们的游戏没有大笔奖金，也不需要打打杀杀 XD

所以最後，我们不免俗的也是透过实作一个小专题，来做我们 Vue3 的总复习吧~
台版鱿鱼游戏，玩?还是不玩?

我的 vue 翻牌配对小游戏

目标 : 透过 Vue3 Composition API 完成一个 4 × 4 的翻牌配对游戏
玩法 : 翻出两个一样的牌，就算配对成功
       如果无法配对，则两张牌恢复呈现覆盖的样子
       无时间限制，全部配对成功才能重新游戏
       每局随机分配卡片位置

1. 制作卡片，并完成翻牌效果

利用 css 制作卡片背景花纹

使用 background-image:linear-gradient()来制作

background: #fff;
background-image:linear-gradient(45deg,red  26%,transparent 0,transparent 75%,red  0),
linear-gradient(45deg,red  26%,transparent 0,transparent 75%,red 0);
background-size:10px 10px;
background-position:0 0,15px 15px;

(强大的 css 跪拜~ 我自己还没练到这个地步@@)

卡牌的前後大致就会长这样，接着调整位置重叠变成正反面的样子，并加上翻转的效果

// 翻转效果
使用 transform: rotateY() 制作

// 重叠
使用 position 定位

为了实现 3D 翻牌的效果，我们必需加上下面几个 css

perspective : ? px ===> 想像成物件与画面距离，px值 越小越近，反之则越远
backface-visibility : visible (or hidden);  ===> 当元素背面朝向用户，是否可见

图片来源 卡斯伯's Blog

图片来源 MDN

图片来源 MDN

2. hover 触发换成 click 触发

<div id="app">
  <div class="card" @click="transCard">
    <div class="front" :class="{transfront: transfront}">
      ♠1
    </div>
    <div class="back" :class="{transback: transfront}"></div>
  </div>
</div>

<script>
    import {createApp,ref,onMounted} from 'https://cdnjs.cloudflare.com/ajax/libs/vue/3.1.4/vue.esm-browser.min.js' 

    createApp({
      setup() {
        const transfront = ref(false);

        function transCard(){
          transfront.value = true; // 为 true 时绑定应对的 class
        }

        return {
          transfront,
          transCard
        }
      }
    }).mount('#app')
</script>

<style>

.transfront{
  transform: rotateY(0deg);
}

.transback{
  transform: rotateY(-180deg);
}
</style>

3. 建立卡牌花色等资料

卡牌讯息预计栏位有以下

• id : 唯一值，找资料以及 v-for 的 v-bind:key 使用等
• cardText : 卡牌的花色(配对依据)
• cardColor : 绑定花色的配色(黑/ 红)
• ispair : 是否配对成功，控制翻牌效果使用
• sortIdx : 卡牌的随机排序顺序

 // 卡片花色资料建立
const cardlist = ref([
  { id: 1 , cardText: '♠1' , cardColor: 'black' , ispair: false, sortIdx: 0},
  { id: 5 , cardText: '♠1' , cardColor: 'black' , ispair: false, sortIdx: 0},
  { id: 7 , cardText: '♥2' , cardColor: 'red' , ispair: false, sortIdx: 0},
  ...
])

透过乱数产生一组不重复的随机数後，写入 sortIdx，并使用 computed 回传依 sortIdx 排序的顺序

// 排序好要渲染的牌
const remderCards = computed(()=>{
  return cardlist.value.sort((a,b)=>{
    return a.sortIdx - b.sortIdx;
  })
})

最後用 v-for 渲染出来，就可以先看到半成品啦~

今天就先到这边暂停，剩下的功能明天把它结束掉

不要走开~明天还有 XDD
图片来源: 资讯咖 | 《鱿鱼游戏》为什麽这麽火？

参考资料

MDN backface-visibility
卡斯伯的 Blog - CSS没有极限 - CSS transform-3D的透视(perspective)
你真的理解CSS的linear-gradient？
知乎- 叫我詹躲躲【CSS进阶】使用CSS gradient制作绚丽渐变纹理背景效果
利用CSS制作翻牌效果 - Slides | 讲者：Cuboid