iT邦幫忙

2021 iThome 鐵人賽

DAY 29
0
Modern Web

前端暴龍機,Vue2.x 進化 Vue3系列 第 29

[前端暴龍機,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 跪拜~ 我自己還沒練到這個地步@@)
https://ithelp.ithome.com.tw/upload/images/20210826/201207224BHFkYftTB.jpg
卡牌的前後大致就會長這樣,接著調整位置重疊變成正反面的樣子,並加上翻轉的效果

// 翻轉效果
使用 transform: rotateY() 製作

// 重疊
使用 position 定位

為了實現 3D 翻牌的效果,我們必需加上下面幾個 css

perspective : ? px ===> 想像成物件與畫面距離,px值 越小越近,反之則越遠
backface-visibility : visible (or hidden);  ===> 當元素背面朝向用戶,是否可見

https://ithelp.ithome.com.tw/upload/images/20210826/20120722wX309h6QKU.jpg
圖片來源 卡斯伯's Blog

https://ithelp.ithome.com.tw/upload/images/20210826/20120722X5hKOaLXNq.jpg
圖片來源 MDN

https://ithelp.ithome.com.tw/upload/images/20210826/20120722QW8xkOyUZF.jpg
圖片來源 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-forv-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 渲染出來,就可以先看到半成品啦~ /images/emoticon/emoticon35.gif
https://ithelp.ithome.com.tw/upload/images/20210826/20120722SKvJ35L5IY.jpg

今天就先到這邊暫停,剩下的功能明天把它結束掉/images/emoticon/emoticon08.gif


不要走開~明天還有 XDD
圖片來源: 資訊咖 | 《魷魚遊戲》為什麼這麼火?


參考資料

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


上一篇
[前端暴龍機,Vue2.x 進化 Vue3 ] Day28.Vue3 小補充 Magic ~
下一篇
[前端暴龍機,Vue2.x 進化 Vue3 ] Day30.Vue3 網頁小遊戲(完結篇) | ♾ 台版魷魚遊戲,玩?還是不玩?
系列文
前端暴龍機,Vue2.x 進化 Vue330

尚未有邦友留言

立即登入留言