目錄
HTML+JS+websocket 實例,聯機“游戲王”對戰 1
HTML+JS+websocket 實例,聯機“游戲王”對戰 2 - 聯機模式
HTML+JS+websocket 實例,聯機“游戲王”對戰 3 - 界面布局
HTML+JS+websocket 實例,聯機“游戲王”對戰 4 - 卡組系統
HTML+JS+websocket 實例,聯機“游戲王”對戰 5 - 卡片選中系統
HTML+JS+websocket 實例,聯機“游戲王”對戰 6 - 卡片放置,戰場更新
HTML+JS+websocket 實例,聯機“游戲王”對戰 7 - 墓地,副控制面板
HTML+JS+websocket 實例,聯機“游戲王”對戰 8 - 返回手卡,卡組
HTML+JS+websocket 實例,聯機“游戲王”對戰 9 - 實現簡單 websocket 通信
HTML+JS+websocket 實例,聯機“游戲王”對戰 10 - 搭建游戲服務端
HTML+JS+websocket 實例,聯機“游戲王”對戰 11 - 客戶端消息的收發
HTML+JS+websocket 實例,聯機“游戲王”對戰 12 - 消息發送具體場景
HTML+JS+websocket 實例,聯機“游戲王”對戰 13 - 實機演示
最后一章啦,這章主要放個demo演示,然后討論一些待改進的細節問題。
啟動游戲
先來完整回顧下如何啟動游戲并聯機:
(1)進入服務端ygo-server.js所在的文件夾,打開命令行窗口:
(2)之后輸入命令node ygo-server.js啟動服務端:
(3)接下來找到客戶端的 html 文件,用瀏覽器打開,連接上服務端,就可以對戰啦!連接成功后服務端的命令行里會有提示:
這里為了測試方便是在同一臺電腦上打開了兩個客戶端,服務器地址是 localhost。
(3)之后雙方玩家進行操作時若發給服務端消息,服務端也會打印一些信息出來:
雙方都刷新瀏覽器,客戶端會重新連接服務端并刷新頁面,相當于直接重開一局對戰。省的我再做個“再來一局”的按鈕了[捂臉]。
時機演示
接下來是 demo 演示,召喚,發動,蓋卡等音效來源于游戲,非動漫剪輯。
另外暫時沒有制作 游戲外,融合卡區,目前都放到墓地里,不影響決斗(大概)。
原生 HTML【游戲王】聯機對戰 demo + 超然片段!!
億點點細節
來選擇性的談一些待改進的細節…
(1)界面問題:
游戲界面尚有很多地方需要完善,比如生命值計算器以及一些其他提示框。另外還可以在主界面之外另外做一個登錄界面,在登錄界面中填寫一些對戰前需要設置的基本參數,如卡組名,玩家id,服務端地址等,而不是打開源碼文件來更改,如果做一個選擇卡組的功能會更加方便。
另外一個問題應該很多朋友從一些截圖中發現了。由于我的UI界面主要是靜態html,所以有卡槽空置的時候就會出現如下圖這樣的標識:
靜態的 img 元素在沒有加載任何有效圖片時都呈現出這種煞風景的效果。目前只有老版本的 Edge 瀏覽器不會出現這種問題,其他瀏覽器如 Chrome,Firefox 以及整合了 Chrome 內核的新版 Edge 均有此問題。目前還沒有找到有效的解決方法,可能要把靜態卡槽全改成動態生成元素?
下圖為老版 Edge 運行截圖,只有 Edge 瀏覽器不會有該問題,整體表現會比較美觀:
(2)功能尚待完善:
前面文章提到過,目前還沒有把游戲外區域與環境卡槽做進去,實現方式很簡單,與實現墓地和其他戰場卡槽無異,但需要添加更多的按鈕并且代碼會更冗余。目前游戲外卡片,融合卡片均暫時放到墓地處理,環境卡直接放場上魔法陷阱區,一般情況下不影響對局。等構思一個擴展性更好的游戲框架再完善這些功能。
關于動畫效果或特效,或許可以添加一些簡單的動畫,如卡片翻轉,移動等。但鑒于這是原生方法,實現效率會比較低,主要還是考慮學習某些游戲引擎重置游戲界面。
最后感謝閱讀,學無止境!