The idea is when we tape the arrow keys on the keyboard, we want the ball move accodingly.
const leftArrow$ = Observable.fromEvent(document, 'keydown') .filter(event => event.key === 'ArrowLeft') .mapTo(position => this.increment(position, 'x', 10)); const rightArrow$ = Observable.fromEvent(document, 'keydown') .filter(event => event.key === 'ArrowRight') .mapTo(position => this.decrement(position, 'x', 10)); const upArrow$ = Observable.fromEvent(document, 'keydown') .filter(event => event.key === 'ArrowUp') .mapTo(position => this.increment(position, 'y', 10)); const downArrow$ = Observable.fromEvent(document, 'keydown') .filter(event => event.key === 'ArrowDown') .mapTo(position => this.decrement(position, 'y', 10));
increment(obj, prop, value) { return Object.assign({}, obj, {[prop]: obj[prop] + value}); } decrement(obj, prop, value) { return Object.assign({}, obj, {[prop]: obj[prop] - value}); }
Observable.merge(leftArrow$, rightArrow$, downArrow$, upArrow$) .startWith({ x: 200, y: 200 }) .scan((acc, curr) => curr(acc)) .subscribe( p => this.position = p )
Here, 'curr' is the function return from 'mapTo', the 'acc' will remember the position return from the function.
The initial value of 'acc', is from startWith().