最后一章啦，這章主要放個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 演示，召喚，發動，蓋卡等音效來源于游戲，非動漫剪輯。

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

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

（1）界面問題：

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

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

game_ui_bug.png

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

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

main_img2.png

（2）功能尚待完善：

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

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

最后感謝閱讀，學無止境！