目录
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 - 实机演示
前言
应某友人的要求，同时作为练手项目，花几天时间写了个“游戏王”的联机卡牌对战游戏，游戏内容大致是这样的：
客户端是原生的 HTML+JS，服务端基于 Node.js（本地服务器），通信协议用的 WebSocket。
可以看到游戏界面有很多操作按钮，因为游戏的操作模式是完全仿线下卡牌的游玩模式，也就是不带任何规则判定和卡牌脚本。带规则判定的游戏实现起来复杂度较高，而且光是给每张卡牌的效果编写运行脚本就是一个极其浩大的工程，这里限制于时间和技术力就不采用那种方式了，市面上已经有很多成熟的游戏产品。
目前的版本很简易，但是已经可以进行完整的对局，为了加强带入感添加了一些动漫音效。当然由于没有规则判定，双方玩家必须处于能随时沟通的环境，实际上就是把线下卡牌转移到PC上，线下玩法的数字版，美其名曰“最纯粹的游戏王对战体验”。
游戏服务端在本地创建，所以只能局域网对战，启动服务端后点开html客户端就会直接连接。游戏特效是基本没有了，原生方法制作特效比较麻烦，想要酷炫的动画和特效推荐用游戏引擎，比如 Egret，Layabox 一类的H5游戏引擎。
牌组自然是网上收集的高清卡牌图片，放在本地读取。这里有一点好处就是可以随心所欲的加入任何版本的卡牌，而且效果不会受限于游戏脚本（根本不存在游戏脚本），打出什么效果玩家说了算。目前市面上的成熟游戏产品出于对战公平性的考虑对很多卡牌的效果做了修改，特别是部分初代卡牌，与动漫中演绎的效果大相径庭，没以前那味儿了。学生时代照着TV动画收集各种牌组就是为了能在某次对局中偶遇动漫里的热血连锁，输赢什么的不重要。另外还有很多初代TV版的卡牌基本正版游戏里是没有收录的，自制版可以DIY一下。
初版完成后果断和朋友开了两局，虽然体验比不上线下卡但情怀还是体会到了。
接下来的章节就主要来谈谈实现思路吧。水平有限，学习记录一下。
项目源代码可移步我的Github，初版已 merge 至 master：
YGO-Online-Combat
