iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 7
2
Modern Web

三十天路邊賭場上線了!系列 第 7

DAY07 遊戲平台、搭建頁面(Vue)

前言

這幾天覺得Pixijs相當乏味,今天來開始搭個平台入口吧!本來計畫使用React,但因太久沒有使用React,要習慣一下實在怕花太多時間,直接用Vue搭建是最快的,而且還相當偷懶直接使用cli!
那我們會需要甚麼呢?全家桶拿幾個部分出來就夠了,也不用甚麼SSR等等高端高大上的技術,基本Vue、Vuex、Vue-router、axios即可完成我們要的基本功能。

初始化

沒甚麼好說的,cli指令打一打,架起來OK吧?
https://ithelp.ithome.com.tw/upload/images/20190908/20109783rumHDT8TgX.png

設計頁面

觀察

先來搜尋一下google,看看娛樂城多半長成甚麼樣子呢,看上去要有高大上的感覺,就是要金色紅色,過新年噴錢的感覺,而且字體都是很符合華人風格,看來博弈平台是不能走扁平那種設計風。

https://ithelp.ithome.com.tw/upload/images/20190908/20109783MJuvpdWt6J.png

產圖

LOGO當然要跟三十天有關,就直接找個書法字體,套個漸層。
https://ithelp.ithome.com.tw/upload/images/20190908/201097831wotKsSdM8.png

這是底圖,有種低調金的感覺。
https://ithelp.ithome.com.tw/upload/images/20190908/20109783D1rm1dXLjm.png

這是我們遊戲選單的LOGO
https://ithelp.ithome.com.tw/upload/images/20190908/20109783TD6hv5Fmvs.png

LAYOUT

登陸頁面!
https://ithelp.ithome.com.tw/upload/images/20190908/201097839NIi4gCLYD.png

註冊頁面
https://ithelp.ithome.com.tw/upload/images/20190908/20109783OuyNM2E1ek.png

大廳頁面,套了一個MarqueeText套件,搞個跑馬燈看起來特別真實。
https://ithelp.ithome.com.tw/upload/images/20190908/20109783WvCOPbBf8u.png

規劃

目前規劃是註冊會寄送密碼到信箱,且不能更改,密碼是一亂數,登陸頁面採JWT,且存在localstorage,且可以自動登陸,那這邊都還算單純。

本來想說分多個伺服器,來模擬串接多平台遊戲時的狀況,但太麻煩了時間可能不多,直接在同一主機即可。
登陸遊戲時一樣存取本地端localstorage並像遊戲口認證,確定是玩家即可登錄,這邊要防止重複登陸以及其他有的沒的狀況。

哦忘了說! 當然是有RWD!
https://ithelp.ithome.com.tw/upload/images/20190908/20109783iVce2NRTne.png
https://ithelp.ithome.com.tw/upload/images/20190908/20109783kZoi7rQJWz.pnghttps://ithelp.ithome.com.tw/upload/images/20190908/20109783d1e8G6EMUF.png

後記

真的是充滿圖片的一篇文,至於原始碼呢,暫時沒有放在Github,因為JWT還有路由還沒寫哈哈。


上一篇
DAY06 製作倒數鐘、倒數數字
下一篇
DAY08 遊戲平台、串接頁面(Vue)
系列文
三十天路邊賭場上線了!30

1 則留言

0
阿展展展
iT邦好手 1 級 ‧ 2019-11-15 08:38:46

窩靠 這也太快XDDD

我要留言

立即登入留言