HTML+JS+websocket 实例，联机“游戏王”对战（十

2021-06-24 本文已影响0人 KalsasCaesar

最后一章啦，这章主要放个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）功能尚待完善：

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

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

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