HTML+JS+websocket 實例,聯機“游戲王”對戰(十三)- 實機演示視頻

目錄

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所在的文件夾,打開命令行窗口:


server_folder.png

(2)之后輸入命令node ygo-server.js啟動服務端:


server_on.png

(3)接下來找到客戶端的 html 文件,用瀏覽器打開,連接上服務端,就可以對戰啦!連接成功后服務端的命令行里會有提示:


server_connected.png

這里為了測試方便是在同一臺電腦上打開了兩個客戶端,服務器地址是 localhost。

(3)之后雙方玩家進行操作時若發給服務端消息,服務端也會打印一些信息出來:

server_message.png

雙方都刷新瀏覽器,客戶端會重新連接服務端并刷新頁面,相當于直接重開一局對戰。省的我再做個“再來一局”的按鈕了[捂臉]。

時機演示

接下來是 demo 演示,召喚,發動,蓋卡等音效來源于游戲,非動漫剪輯。

另外暫時沒有制作 游戲外,融合卡區,目前都放到墓地里,不影響決斗(大概)。

原生 HTML【游戲王】聯機對戰 demo + 超然片段!!

億點點細節

來選擇性的談一些待改進的細節…

(1)界面問題:

游戲界面尚有很多地方需要完善,比如生命值計算器以及一些其他提示框。另外還可以在主界面之外另外做一個登錄界面,在登錄界面中填寫一些對戰前需要設置的基本參數,如卡組名,玩家id,服務端地址等,而不是打開源碼文件來更改,如果做一個選擇卡組的功能會更加方便。

另外一個問題應該很多朋友從一些截圖中發現了。由于我的UI界面主要是靜態html,所以有卡槽空置的時候就會出現如下圖這樣的標識:


game_ui_bug.png

靜態的 img 元素在沒有加載任何有效圖片時都呈現出這種煞風景的效果。目前只有老版本的 Edge 瀏覽器不會出現這種問題,其他瀏覽器如 Chrome,Firefox 以及整合了 Chrome 內核的新版 Edge 均有此問題。目前還沒有找到有效的解決方法,可能要把靜態卡槽全改成動態生成元素?

下圖為老版 Edge 運行截圖,只有 Edge 瀏覽器不會有該問題,整體表現會比較美觀:


main_img2.png

(2)功能尚待完善:

前面文章提到過,目前還沒有把游戲外區域與環境卡槽做進去,實現方式很簡單,與實現墓地和其他戰場卡槽無異,但需要添加更多的按鈕并且代碼會更冗余。目前游戲外卡片,融合卡片均暫時放到墓地處理,環境卡直接放場上魔法陷阱區,一般情況下不影響對局。等構思一個擴展性更好的游戲框架再完善這些功能。

關于動畫效果或特效,或許可以添加一些簡單的動畫,如卡片翻轉,移動等。但鑒于這是原生方法,實現效率會比較低,主要還是考慮學習某些游戲引擎重置游戲界面。

最后感謝閱讀,學無止境!

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容