Worktile 技术分享：RxJS实战练习-经典游戏Breakout

by Terry

效果图

数据流分析

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重新包装，修改了一个小缺陷，据说这个游戏最初是由乔布斯和他的一个朋友设计