jump-gammer
这很简单，先这样再这样(= = 哈哈哈，做的时候就各种红了)。这个项目是我上一年参加虎牙小程序比赛，留下的(不知道现在虎牙小程序凉凉了没)。 那时候遇到了各种部署上去的问题，通宵了两晚修改pixi和pixi-spine的源码，遗憾的是错过了比赛提交的时间节点。所以这就是， 那个stone(人物踩在上方的，落脚物)为什么是HuyaLogo的原因。
所以把这个项目拉出来，修改成web页面，http升级成websocket，做个基本游戏的示范教程吧。
项目示例，欢迎提issues。
预览图
Demo Getting Started
# npm i
# npm run serve
git 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
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”]);
}
AnimatedSprite
动画序列帧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)
}
PIXI-SPINE
人物sprite
创建人物Sprite，人物？人物起码会动吧？面部表情？身体动作？那我们是不是要建造一个容器，容器里面包括无数sprite或者无数子容器，比如人物的手、脸部、头部等。 emmm，这也太难了吧？光是把sprite组合起来就已经麻烦了，而且还要按照规律来移动手臂，身体，脸部表情。 怎么办？pixi-spine走起。
stone sprite
跳跃AnimatedSprite
灰尘AnimatedSprite
气泡AnimatedSprite
Action
移动路线
移动方向判断
碰撞
stone与人物保持x距离
人物碰撞(性能优化，条件性判断碰撞)
碰撞相关特效展示
游戏进入流程图
游戏规则
服务器逻辑状态处理
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/220797.html原文链接：https://javaforall.net
