iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 29
3
自我挑戰組

【I Love Vue】 30天愛上 Vue系列 第 29

【I Love Vue 】 Day 29 愛荷華博弈任務(十) - Demo

  • 分享至 

  • xImage
  •  

話不多說,趕緊把我們的作品Demo 給我們 鐵人學院的業主吧!!


Demo

進入主畫面
https://i.imgur.com/TvJO4tT.gif
我們可以透過主畫面跳到設定畫面,或是直接進入測驗畫面。

可補強問題:
我們可以在主畫面中使用一個button進入測驗
當點擊後跳出Dialog詢問要直接進入測驗或是先進行設定。

這樣的設計方式會比較符合當初流程圖上的需求。

設定畫面
https://i.imgur.com/WqNBuL0.gif
設定所有遊戲參數

可補強問題:
我們可以將預設的數值先帶入到畫面之中,這樣也可以讓使用者比較清楚了解目前的設定狀態。
另外我們也可以將起始分數寫入設定,讓起始數據也能夠透過設定畫面進行設定。

遊戲畫面
https://i.imgur.com/lusEhEZ.gif
我們可以選擇任意牌,牌內的面額會計算到總分上,
當剩餘執行次數歸零時,可以到結算畫面看結果。

可補強問題:
在填寫受測人員資訊的部分我們可以透過v-if或是v-show來設計,
讓上半部在進入畫面的時候就先顯示,填寫完成後則顯示下面的部分,
這樣可讓畫面比較有先後順序的感覺。

結算
https://ithelp.ithome.com.tw/upload/images/20201013/20115941HXbsAc05oH.jpg

可補強問題:
我們可以在這邊多顯示測驗每副牌的參數,和遊戲次數。
這樣會讓業主操作起來更友善一些。


結語

可能有小夥伴會想問,為什麼我們不一開始就把程式功能做完整一點?
做外包或是公司都會有自己的商業考量和時間成本問題,
其實只是因為我懶惰
所以,在開發的時候通常只要把握一個原則-照著規格開發就對了。
(當然,還是有一些例外,如果說是為了流程的完整性還是可以適度地開發規格書外的功能。)

敬請期待,明日精彩大結局~


上一篇
【I Love Vue 】 Day 28 愛荷華博弈任務(九) - 結算畫面
下一篇
【I Love Vue 】 Day 30 賽後心得與檢討
系列文
【I Love Vue】 30天愛上 Vue30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言