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）功能尚待完善：
前面文章提到过，目前还没有把游戏外区域与环境卡槽做进去，实现方式很简单，与实现墓地和其他战场卡槽无异，但需要添加更多的按钮并且代码会更冗余。目前游戏外卡片，融合卡片均暂时放到墓地处理，环境卡直接放场上魔法陷阱区，一般情况下不影响对局。等构思一个扩展性更好的游戏框架再完善这些功能。
关于动画效果或特效，或许可以添加一些简单的动画，如卡片翻转，移动等。但鉴于这是原生方法，实现效率会比较低，主要还是考虑学习某些游戏引擎重置游戏界面。
最后感谢阅读，学无止境！
HTML+JS+websocket 实现联机“游戏王”对战（十三）- 实机演示视频相关推荐
- HTML+JS+websocket 实现联机“游戏王”对战（一）
目录: 游戏王联机卡牌对战 1 - 前言 游戏王联机卡牌对战 2 - 联机模式 游戏王联机卡牌对战 3 - 界面布局 游戏王联机卡牌对战 4 - 卡组系统 游戏王联机卡牌对战 5 - 卡片选中系统 游 ...
- HTML+JS+websocket 实现联机“游戏王”对战（十）- 搭建游戏服务端
目录: 游戏王联机卡牌对战 1 - 前言 游戏王联机卡牌对战 2 - 联机模式 游戏王联机卡牌对战 3 - 界面布局 游戏王联机卡牌对战 4 - 卡组系统 游戏王联机卡牌对战 5 - 卡片选中系统 游 ...
- HTML+JS+websocket 实现联机“游戏王”对战（九）- 实现简单websocket通信
目录: 游戏王联机卡牌对战 1 - 前言 游戏王联机卡牌对战 2 - 联机模式 游戏王联机卡牌对战 3 - 界面布局 游戏王联机卡牌对战 4 - 卡组系统 游戏王联机卡牌对战 5 - 卡片选中系统 游 ...
- HTML+JS+websocket 实现联机“游戏王”对战（五）- 卡片选中系统
目录: 游戏王联机卡牌对战 1 - 前言 游戏王联机卡牌对战 2 - 联机模式 游戏王联机卡牌对战 3 - 界面布局 游戏王联机卡牌对战 4 - 卡组系统 游戏王联机卡牌对战 5 - 卡片选中系统 游 ...
- node.js Websocket消息推送---GoEasy
Goeasy, 它是一款第三方推送服务平台,使用它的API可以轻松搞定实时推送!个人感觉goeasy推送更稳定,推送速度快,代码简单易懂上手快 浏览器兼容性:GoEasy推送支持websocket 和 ...
- 基于Node.js + WebSocket 的简易聊天室
代码地址如下: http://www.demodashi.com/demo/13282.html Node.js聊天室运行说明 Node.js的本质就是运行在服务端的JavaScript.Node.j ...
- socket服务器断开消息,详解JS WebSocket断开原因和心跳机制
1.断开原因 WebSocket断开的原因有很多,最好在WebSocket断开时,将错误打印出来. ws.onclose = function (e) { console.log('websocket ...
- 从零学习游戏服务器开发（一） 从一款多人联机实时对战游戏开始
写在前面的话 经常有学生或者初学者问我如何去阅读和学习一个开源软件的代码,也有不少朋友在工作岗位时面对前同事留下的项目,由于文档不完善.代码注释少.工程数量大,而无从下手.本文将来通过一个多人联机实时 ...
- 使用SpringBoot及Construct2的WebSocket制作联机游戏(二)
前情概要: 使用SpringBoot及Construct2的WebSocket制作联机游戏(一) 一.介绍: 1.SpringBoot服务端添加登录及注册接口,并进行Postman测试 2.Sprin ...
最新文章
- Java数据结构2：堆排序思考
- WINCE6.0在应用程序中调用控制面板的应用
- jqgrid学习（1）
- 在BAdI definition PRODUCT_R3_ADAPTER的implementation里获得download type
- PHP usort 函数底层排序
- 韦小宝适合做IT人的8大理由
- Hemberg-lab单细胞转录组数据分析（七）-导入10X和SmartSeq2数据Tabula Muris
- crontab 问号_轻松搞定crontab和quartz表达式
- dump日志分析工具
- 基于Web的代码编辑器 Ace的使用
- 计算机桌面左侧在显示器里面,电脑屏幕显示偏左怎么解决
- keba驱动器_KEBA控制器说明书
- linux 内网网络波动检测,Linux内网测试环境模拟网络丢包和延时
- 硬件系列（五）-------------Android小票打印机连接 （已封装好，可直接使用）
- 高性价比WIFI图传方案快速入门教程
- EPICS modbus模块驱动程序示例2(模拟量)
- JMeter基础 — JMeter聚合报告详解
- 中国移动物联卡用户超2600万 目标2020年物联网收入规模达千亿
- vue项目中 echarts的渐变色的设置
- 富途社招php,富途社招系统测试工程师 一面+二面+终面 准备hr面