Worktile 技术分享：RxJS实战练习-经典游戏Breakout
效果图
数据流分析
1.ticker$ 数据流 interval配合scheduler/animationFrame 作为游戏随时间变化的控制数据流
ticker$ = interval(this.TICKER_INTERVAL, animationFrame).pipe( map(() => ({ time: Date.now(), deltaTime: null })), scan((previous, current) => ({ time: current.time, deltaTime: (current.time - previous.time) / 1000 })) ); // Observable单播 每次订阅都是启动一个数据流
2.key$ 数据流检测keydown/keyup 玩家控制的部分（整个状态中的一个副作用），改变底部船桨的位置
PADDLE_CONTROLS = { ArrowLeft: -1, ArrowRight: 1 }; key$ = merge( fromEvent(document, 'keydown').pipe( map(event => this.PADDLE_CONTROLS[event['key']] || 0) ), fromEvent(document, 'keyup').pipe(map(event => 0)) ).pipe(distinctUntilChanged()); // 提供船桨移动的方位的数据源
实现逻辑：按下‘<’直到 keyup 输出 -1 / 按下‘>’直到 keyup 输出 1 / keyup 输出 0 3.paddle$ 数据流使用操作符withLatestFrom合并了ticker$和key$ 持续流出船桨的位置
createPaddle$(ticker$: Observable<{ time: number; deltaTime: any }>) { return ticker$.pipe( withLatestFrom(this.key$), // withLatestFrom操作符 作为游戏开始的触发条件，只有这个数据流产生数据才会往下游流动 scan<[{ deltaTime: number; time: number }, number], number>( (position: number, [ticker, direction]) => { const nextPosition = position + direction * ticker.deltaTime * this.PADDLE_SPEED; return Math.max( Math.min( nextPosition, this.breakoutCanvasService.stage.width - config.PADDLE_WIDTH / 2 ), config.PADDLE_WIDTH / 2 ); }, this.breakoutCanvasService.stage.width / 2 ), distinctUntilChanged() ); }
3.createState$ 数据流使用withLatestFrom合并ticker$和paddle$ 最终输出界面需要的全部状态数据
createState$(ticker$, paddle$) {
return ticker$.pipe(
withLatestFrom(paddle$),
scan<
[{ deltaTime: number; time: number }, number], { ball: Ball; bricks: Brick[]; score: number }
>(({ ball, bricks, score }, [ticker, paddle]) => { const remainingBricks = [];
const collisions = { paddle: false, // 球撞船桨 floor: false, // wall: false, // 撞墙 ceiling: false, // 撞顶 brick: false // 球撞砖块 };ball.position.x = ball.position.x + ball.direction.x * ticker.deltaTime * this.BALL_SPEED; ball.position.y = ball.position.y + ball.direction.y * ticker.deltaTime * this.BALL_SPEED;bricks.forEach(brick => { if (!this.isCollision(brick, ball)) { remainingBricks.push(brick); } else { collisions.brick = true; score = score + 10; } });collisions.paddle = this.isHit(paddle, ball);if (ball.position.x < config.BALL_RADIUS || ball.position.x >this.breakoutCanvasService.stage.width - config.BALL_RADIUS) {ball.direction.x = -ball.direction.x; collisions.wall = true;}
collisions.ceiling = ball.position.y < config.BALL_RADIUS;if (collisions.brick || collisions.paddle || collisions.ceiling) {if (collisions.paddle) {ball.direction.y = -Math.abs(ball.direction.y);} else {ball.direction.y = -ball.direction.y; }}
return { ball: ball, bricks: remainingBricks, collisions: collisions, score: score }; }, this.initState()) ); }
- 用到ticker$流控制球的移动位置
- 根据当前状态控制下一步的状态，包括计分、球的运动方向、砖块数量
4.game$ 数据流最终的游戏控状态输出流（包括这状态数据、船桨位置数据）
game$ = Observable.create(observer => { this.breakoutCanvasService.drawIntro(); this.restart = new Subject(); const paddle$ = this.createPaddle$(this.ticker$); // 数据源吐出船桨的位置 const state$ = this.createState$(this.ticker$, paddle$); this.ticker$ .pipe( withLatestFrom(paddle$, state$), OperatorMerge(this.restart) ) .subscribe(observer); // 这个this.ticker$ 也可以不使用，直接通过merge合并后面两个数据流 });
merge数据流restart$后 可以通过error方法终止流从而控制游戏结束
状态
两个结果状态：砖块数量、分数
两个影响状态的副作用：时间、游戏者的行为
状态交叉点
球接触砖块 -> 砖块消失
球接触船桨/墙 -> 球自然改变运动方向
整个过程用rxjs实现不需要额外保存中间数据，在管道中实现数据的缓存、状态处理 。
两个字形容 “优秀”
演示地址：http://tiny.pubuzhixing.com/
github：https://github.com/pubuzhixing8/tiny-game
出处：《深入浅出RxJS》十四章实例，使用TS+Angular重新包装，修改了一个小缺陷，据说这个游戏最初是由乔布斯和他的一个朋友设计
