这很简单，先这样再这样（= = 哈哈哈，做的时候就各种红了）。这个项目是我上一年参加虎牙小程序比赛，留下的（不知道现在虎牙小程序凉凉了没）。 那时候遇到了各种部署上去的问题，通宵了两晚修改pixi和pixi-spine的源码，遗憾的是错过了比赛提交的时间节点。所以这就是， 那个stone（人物踩在上方的，落脚物）为什么是HuyaLogo的原因。
所以把这个项目拉出来，修改成web页面，http升级成websocket，做个基本游戏的示范教程吧。
项目示例，欢迎提issues。
# npm i
# npm run servegit clone 服务器url
# npm i
# tsnd --respawn ./src/serve-1.0.1.ts完成，哪里报错改哪里（比如服务器url，需要直接修改下）。
- mvc或者mvvm框架，自己喜欢就行，用自己熟悉的。
- PixiJS，PixiJS是啥？ PixiJS是一个超快的2D渲染引擎。它自动侦测使用 WebGL 或者 Canvas。开发者无需专门学习 WebGL 就能感受到强大的硬件加速的力量。 emm，反正就是一个很厉害的东西（某厂哒哒最喜欢PixiJS了，我一开始研究他们的H5，他们就是用PixiJS实现各种好玩的交互的）。
- pixi-spine，骨架。使制作好的动画可以加载于Pixi，可以调用方法来进行动画播放。
- TypeScript，静态类型检查工具，游戏状态类型多，一定一定要用，不然修改对象类型根本无从下手。
- git，版本管理工具，顺便要说的是，要遵循常用Gitflow工作流程，大型的游戏一个人根本开发不来（虽然这不是大型游戏，但是建议哦，从小做起）。
- docker/cdn，部署项目用的，这个项目是基于cdn的，喜欢折腾自己的可以像这个游戏的服务器一样使用docker+travis。
- night-watch，e2e测试，本游戏需要4个玩家，不想心累的可以写e2e测试。
- 微信分享，微信获取名称，自己手写吧。
游戏需要四位玩家，每位玩家只能控制三个位置，所移动到的位置如果有且仅有一位玩家到达，那么获得该位置得得分，否制大家都获得不了分数。 游戏房主在创建房间的时候，如果退出房间，该房间解散，玩家们需要重新选择房间或创建房间。
状态考虑的东西就有点多了。
Sprite是啥？可以当作一个图片的对象（texture纹理）。
生成一个sprite
const SPRITE = new PIXI.Sprite.from('xx.png')
// or
PIXI.Loader.shared.add("assets/spritesheet.json").load(setup)
function setup() {
let sheet = PIXI.Loader.shared.resources["assets/spritesheet.json"].spritesheet;
let sprite = new PIXI.Sprite(sheet.textures["image.png"]);
}动画序列帧Sprite,比如我们碰撞的时候需要眩晕效果，跳跃的时候需要尘埃效果，这个时候就可以使用播放序列帧的方法，达到动画的效果。
public parseTexture(textures: PIXI.Texture, x: number, y: number) {
const animationSprite = new PIXI.AnimatedSprite(textures)
animationSprite.animationSpeed = 0.2
animationSprite.width = 50
animationSprite.height = 50
animationSprite.x = x
animationSprite.y = y
animationSprite.gotoAndPlay(Math.random() * 2)
}创建人物Sprite，人物？人物起码会动吧？面部表情？身体动作？那我们是不是要建造一个容器，容器里面包括无数sprite或者无数子容器，比如人物的手、脸部、头部等。 emmm，这也太难了吧？光是把sprite组合起来就已经麻烦了，而且还要按照规律来移动手臂，身体，脸部表情。 怎么办？pixi-spine走起。