iT邦幫忙

2023 iThome 鐵人賽

DAY 25
0
SideProject30

毫無自信的開發Web遊戲接龍-成為創造龍的英雄之路!系列 第 25

Day25 紙牌接龍-結算畫面採用Modal和修正移牌優先權

  • 分享至 

  • xImage
  •  

前言

今天會調整結算畫面的顯示、修正連點移牌的優先權錯誤(應該最優先移入結算牌堆而非七牌堆)。

結算畫面調整

安裝套件 bootstrap-vue-next

昨日完成的結算畫面是跳出來的瀏覽器訊息,畫面完全看各家的瀏覽器制式化只能點確認,即使擋住原本的遊戲畫面是我想要的效果,但更想要的是可客製化頁面的互動視窗Modal

雖然可以自己土炮撰寫Modal但看帳號名字就知道我很懶,我打算撿現成的套件看能不能快速客製化介面...然後就找到bootstrap-vue-next這個套件,聽名字就知道是針對Vue3特別拉出來的實現。

先照著官方文件安裝依賴:

npm i bootstrap bootstrap-vue-next
npm i unplugin-vue-components -D

這個 unplugin-vue-components 主要是方便自動載入有副作用(side effect)的功能到你的元件中,詳細可參考官方說明,畢竟Bootstrap有副作用才方便?!

接著調整vite.config.js的內容,主要是在plugins屬性對應的陣列中添加Components 包裹 BootstrapVueNextResolver的依賴:

// vite.config.js
import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import {BootstrapVueNextResolver} from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [BootstrapVueNextResolver()],
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

最後在main.js載入相關的CSS,記得把bootstrap移到上方避免之前撰寫的css被蓋掉:

// main.js/ts
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue-next/dist/bootstrap-vue-next.css'
// 略

前面都完成後,發現接龍畫面的卡片的英文、符號都變得比較Q版,上方導覽列 NavgationBarCSS有點跑版。
載入vue-bootstrap後的接龍畫面

修改邏輯

從套件bootstrap-vue-next引入要使用的BModal元件,宣告變數doneModal表示顯示結算畫面與否。

// DragDemo.vue
const doneModal = ref(false);
import { BModal } from 'bootstrap-vue-next';

使用<BModal>元件去包住結束畫面的HTML樣板:

  • v-model為true則會跳出結算畫面
  • title為交互視窗的上方標題
  • hide-footer設定交互視窗的確認取消區塊隱藏
  • @close設定點擊交互視窗關閉x按鈕時觸發的事件方法
  • @hide當交互視窗隱藏時觸發的事件方法
<!-- DragDemo.vue -->
<BModal v-model="doneModal" title="結算畫面" hide-footer @close="resetGame" @hide="resetGame">
    <h1>玩家 xxx</h1>
    <div>花費時間: {{ gameTime }} 秒</div>
    <div>總分數: {{ gameScore }} 分</div>
</BModal>

修正點擊自動移牌的優先權問題

修正自動移動的函數clickAutoMove中的toName寫法,原本是用FOUR_SUITS優先排序接著取第0個元素,
改寫為直接用Array.find取得想要優先的牌堆(結算盤堆名稱),如果沒有才取得第0個元素(7牌堆名稱)。

結算牌堆名稱 FOUR_SUITS = ['club', 'diamond', 'heart', 'spade']

/**
 * 自動移動
 * @param {String} fromName 來自的牌堆名稱
 * @param {Card} card 想移動的牌
 */
function clickAutoMove(fromName, card) {
    const toNames = findFollowDeckName(cardStacks, card);
    // 略
    const toName = toNames.find((name) => FOUR_SUITS.includes(name)) ?? toNames[0];
    console.log(`可移動至的牌堆有: ${toNames}, 選擇移動至: ${toName}`);
    // 略
}

小結

今天使用的bootstrap-vue-next因為是Alpha版本對應文件還不完整,但像BModal的部分參考原bootstrap-vue文件的範例發現也是可以通的。

另外寫到這邊才發現如果Vue3專案使用bootstrap-vue還是有相容支援到bootstrap v4,只是需要額外的設定{ compatConfig: { MODE: 3 }},詳細情形可參考官方文件

程式碼: https://github.com/kabuto412rock/ithelp-pokergame/tree/day25
Yes

參考文件


上一篇
Day24 紙牌接龍-結算畫面
下一篇
Day26 實作功能【返回上一步】
系列文
毫無自信的開發Web遊戲接龍-成為創造龍的英雄之路!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言