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单播 每次订阅都是启动一个数据流

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()); // 提供船桨移动的方位的数据源

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()
);
}

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())
);
}

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合并后面两个数据流
});