ad208三国

 找回密码
 加入
搜索
热搜: 活动 交友 discuz
查看: 1386|回复: 0

Node.js+jQuery 多人連線大富翁

[复制链接]
发表于 2019-9-24 15:36:51 | 显示全部楼层 |阅读模式

pc2g,电脑好游戏 本程式後端使用Node.js
功能

    即時多人連線遊戲(回合制)
    自訂地圖,可自行上傳Excel-XML
    時代升級,設定在N回合後可以切換時代,提供更多升級物品、地圖
    使用Node.js+jQuery,檔案約1M,效率較高

待開發功能

    安裝程式
    管理員監視功能

https://bitbucket.org/kelunyang/monopoly/src/master/



    2015/08/30備註: 最終計畫是使用 Node.js 寫後端,若是哪一天發現PHP後台原始檔不見了,請改用 Node.js,目前開發進度為前端可用

很久沒有從頭寫一隻WebApp了,不過這次考慮到快開學了,要準備一些遊戲給學生玩,特別把大富翁寫成多人連線版本,大致上提供以下幾個功能

    多人連線(後端開發中)
    可更換地圖
    可更換升級物件(也就是大富翁中「蓋房子」的功能)
    捷徑(穿越地圖的功能)
    時代升級(也就是可以設定幾回合之後升級時代,可以提供新的升級物品等功能)
    所有可更換的資料庫都使用Excel當原始檔,後端自動轉換(考慮到多數人看到資料庫就頭痛)
    必須使用Microsoft Edge、Chrome、Firefox最新版本,或是iPad等平板設備瀏覽,不可使用手機(地圖大小緣故)

因為一開始開發的目的是教學使用,我個人認為地理、歷史和國文等能和「故事/移動」結合的科目最適合,不過個人非常不希望最後搞成教學設備,開發魔獸爭霸的3D模組不是只能拿來在艾澤拉斯混而已

這次的開發速度算是歷來寫這種App最快的一次,上周四才完成規劃,這周日前端已經搞定了,而且因為是WebApp,能夠使用最新的網頁標準,就不用再去管相容性了XDDD

測試網址: http://kelunyang.ddns.net/
Git網址(歡迎分支): https://bitbucket.org/kelunyang/monopoly

畫面預覽
image

跳轉後看開發心得XD

前端
font-awesome

這是一套非常好用的符號資料庫,有這些圖示可以省去開發者自己畫圖的時間,到目前為止(2015/8/30),前端檔案才67K(部分因為我因為懶得最佳化有很多重複的code),就是因為完全不使用圖片,都是套用font-awesome的圖示

要注意的是,Font-awesome雖然範例都使用

<p><i class="fa fa-question fa-3x"></i>這才是你的內容</p>

這類要把一個小物件包在大物件裡來當作sample,但實際上它使用的是CSS3的content技術,所以任何物件都可以加上font-awesome的class,圖示就會自動出現在物件的最前方

Font-awesome的網址: https://fortawesome.github.io/Font-Awesome/icons/
CSS的觸碰回饋

一般來說,大家都知道:hover和:active兩個虛擬選擇器的用途,也就等同於滑鼠滑過和滑鼠點下去,但實際上,觸碰裝置的「滑過」只有瞬間結束,用戶會覺得回饋很弱,因此必須加上CSS3的延遲效果,如此一來,滑鼠裝置和觸碰裝置都會覺得遊戲運作順暢(滑鼠裝置的用戶現在也是可以理解為什麼特效不會「立刻」消失的,手機普及真是好事XD)
讓觸碰裝置也可以相容的CSS就像這樣(因為css太新了,wordpress自動上色也不會幫他上色…):

div#board div.active {
        transition: all 0.2s;
        transition-delay: 300ms;
}
div#board div.active:hover {
        /*hover不用設定*/
}
div#board div.active:active {
        transition: none;
}

可參考:https://css-tricks.com/almanac/properties/t/transition-delay/
jQuery的鍵盤事件

能開發這麼順暢的UI當然和jQuery有關(不然同樣的特效從頭造輪子就很花時間了),多數人應該都會習慣玩大富翁的時候不要用滑鼠,最好就是按個鍵盤他就會丟骰子了,所以使用jQeury的鍵盤事件來捕捉空白鍵動作

可參考: https://api.jquery.com/keypress/
用物件,不要用data()

HTML5之後提供我們可以把任何HTML物件都附加物件的data功能,之前在一般的網站開發中,個人認為data相當好用,但這次開發遊戲,整個畫面都是可互動的,不涉及和美工人員協調版面開發的問題,因此整個開發其實直接宣告物件就好了,不需要轉手讓html物件來互動,例如我們希望每個方塊都要有能把自己轉成捷徑的功能,如果都用data來做就會非常麻煩(也不合邏輯),既然javascript是一個closure非常強大的語言,只要(例如click的事件)function放在class裡,自然可以看到所有需要的屬性,這樣的JavaScript的開發方式就類似其他的物件導向語言了

HTML5 Data屬性的教學: https://developer.mozilla.org/en ... ing_data_attributes
後端
Excel-XML

眾所皆知,如果要開發可以換地圖的系統,絕對需要用到資料庫(不然地圖要存哪裡),但開發資料庫就得開發填表的前端,這些前端程式的WebUI怎麼用都不可能比Excel方便(Google試算表算是其中佼佼者了),既然地圖只是做為資料使用,用戶自己在Excel裡編輯好,存成Excel-XML後上傳,在由後台將XML轉譯成JSON,前端自然就可以運作了,完全不需要勞駕用戶的腦和開發者的理智

Archiver|手机版|小黑屋|ad208三国

GMT+8, 2024-3-29 13:31

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表