HTML+JS+websocket 实现联机“游戏王”对战（十三）- 实机演示视频

最后一章啦，这章主要放个demo演示，然后讨论一些待改进的细节问题。

---

目录：

游戏王联机卡牌对战 1 - 前言
游戏王联机卡牌对战 2 - 联机模式
游戏王联机卡牌对战 3 - 界面布局
游戏王联机卡牌对战 4 - 卡组系统
游戏王联机卡牌对战 5 - 卡片选中系统
游戏王联机卡牌对战 6 - 卡片放置，战场更新
游戏王联机卡牌对战 7 - 墓地，副控制面板
游戏王联机卡牌对战 8 - 返回手卡，牌组
游戏王联机卡牌对战 9 - 实现简单websocket通信
游戏王联机卡牌对战10 - 搭建游戏服务端
游戏王联机卡牌对战11 - 客户端消息的收发
游戏王联机卡牌对战12 - 消息发送具体场景
游戏王联机卡牌对战13 - 实机演示

启动游戏

先来完整回顾下如何启动游戏并联机：

（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）功能尚待完善：

前面文章提到过，目前还没有把游戏外区域与环境卡槽做进去，实现方式很简单，与实现墓地和其他战场卡槽无异，但需要添加更多的按钮并且代码会更冗余。目前游戏外卡片，融合卡片均暂时放到墓地处理，环境卡直接放场上魔法陷阱区，一般情况下不影响对局。等构思一个扩展性更好的游戏框架再完善这些功能。

关于动画效果或特效，或许可以添加一些简单的动画，如卡片翻转，移动等。但鉴于这是原生方法，实现效率会比较低，主要还是考虑学习某些游戏引擎重置游戏界面。

最后感谢阅读，学无止境！