目录：

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

前言

应某友人的要求，同时作为练手项目，花几天时间写了个“游戏王”的联机卡牌对战游戏，游戏内容大致是这样的：

客户端是原生的HTML+JS，服务端基于Node.js（本地服务器），通信协议用的WebSocket。

可以看到游戏界面有很多操作按钮，因为游戏的操作模式是完全仿线下卡牌的游玩模式，也就是不带任何规则判定和卡牌脚本。带规则判定的游戏实现起来复杂度较高，而且光是给每张卡牌的效果编写运行脚本就是一个极其浩大的工程，这里限制于时间和技术力就不采用那种方式了，市面上已经有很多成熟的游戏产品。

目前的版本很简易，但是已经可以进行完整的对局，为了加强带入感添加了一些动漫音效。当然由于没有规则判定，双方玩家必须处于能随时沟通的环境，实际上就是把线下卡牌转移到PC上，线下玩法的数字版，美其名曰“最纯粹的游戏王对战体验”。

游戏服务端在本地创建，所以只能局域网对战，启动服务端后点开html客户端就会直接连接。游戏特效是基本没有了，原生方法制作特效比较麻烦，想要酷炫的动画和特效推荐用游戏引擎，比如Egret，Layabox一类的H5游戏引擎。

牌组自然是网上收集的高清卡牌图片，放在本地读取。这里有一点好处就是可以随心所欲的加入任何版本的卡牌，而且效果不会受限于游戏脚本（根本不存在游戏脚本），打出什么效果玩家说了算。目前市面上的成熟游戏产品出于对战公平性的考虑对很多卡牌的效果做了修改，特别是部分初代卡牌，与动漫中演绎的效果大相径庭，没以前那味儿了。学生时代照着TV动画收集各种牌组就是为了能在某次对局中偶遇动漫里的热血连锁，输赢什么的不重要。另外还有很多初代TV版的卡牌基本正版游戏里是没有收录的，自制版可以DIY一下。

初版完成后果断和朋友开了两局，虽然体验比不上线下卡但情怀还是体会到了。

接下来的章节就主要来谈谈实现思路吧。水平有限，学习记录一下。

项目源代码可移步我的Github，初版已merge至master：
YGO-Online-Combat

HTML+JS+websocket 实现联机“游戏王”对战（一）相关推荐

HTML+JS+websocket 实现联机“游戏王”对战（十三）- 实机演示视频
最后一章啦,这章主要放个demo演示,然后讨论一些待改进的细节问题. 目录: 游戏王联机卡牌对战 1 - 前言游戏王联机卡牌对战 2 - 联机模式游戏王联机卡牌对战 3 - 界面布局游戏王联机卡 ...
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 ...

HTML+JS+websocket 实现联机“游戏王”对战（一）

前言

HTML+JS+websocket 实现联机“游戏王”对战（一）相关推荐

最新文章

热门文章