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', ));
const rightArrow$ = Observable.fromEvent(document, 'keydown')
.filter(event => event.key === 'ArrowRight')
.mapTo(position => this.decrement(position, 'x', ));
const upArrow$ = Observable.fromEvent(document, 'keydown')
.filter(event => event.key === 'ArrowUp')
.mapTo(position => this.increment(position, 'y', ));
const downArrow$ = Observable.fromEvent(document, 'keydown')
.filter(event => event.key === 'ArrowDown')
.mapTo(position => this.decrement(position, 'y', ));
  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: ,
y:
})
.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().

[Angular2] Map keyboards events to Function的更多相关文章

  1. React报错之map() is not a function

    正文从这开始~ 总览 当我们对一个不是数组的值调用map()方法时,就会产生"TypeError: map is not a function"错误.为了解决该错误,请将你调用ma ...

  2. Vue.js搭建路由报错 router.map is not a function,Cannot read property ‘component’ of undefined

    错误: 解决办法: 2.0已经没有map了,使用npm install vue-router@0.7.13 命令兼容1.0版本vue 但是安装完之后会出现一个错误: Cannot read prope ...

  3. 如何使用highmaps制作中国地图

    如何使用highmaps制作中国地图 文章目录 Highmaps 所需文件 地图初始化代码 highmaps 渲染讲解 highmaps 中国各城市坐标的json文件 highmaps 线上DEMO ...

  4. 使用highmaps制作中国地图

    Highmaps 所需文件 http://code.highcharts.com/maps/highmaps.js(地图渲染的核心文件 必须引用)http://code.highcharts.com/ ...

  5. svg文件使用highmap显示

    svg文件使用highmap显示 highmap,ammap都是比较好的第三方插件用来显示svg图片:     ammap导航可能更美观点(这个highmap后面可能也会赶上),     highma ...

  6. angular2环境搭建

    Angular2.x与Angular1.x完全不同,Angular2.x是不兼容Angular1.x的,所在在框架的构造上,它们是完全不同的.在Angular2.x中,因为其是基于ES6来开发的,所以 ...

  7. Google Map 自定义 infowindow

    最近做的东西用到了infowindow,不过google提供的样式太难看了,于是想改变一下样式.看了一下好像infowindow的样式不太好改. 查了半天资料,看到一个infobox,感觉真的挺好用. ...

  8. javascript google map circle radius_changed ,angularjs google map circle radius_changed

    javascript: var cityCircle = new google.maps.Circle({ strokeColor: '#FF0000', strokeOpacity: 0.8, st ...

  9. 【原创】backbone1.1.0源码解析之Events

    最近在看些node的源代码,发现backbone的应用还是挺广泛的,但是之前的学习忘得一干二净了,后悔当时没做笔记啊. 所以,无奈想用的更好,就是得把源代码看楚,所以还是把源代码的注释笔记留下来,供自 ...

随机推荐

  1. MySQL具体解释(13)------------事务

    一. 什么是事务 事务就是一段sql 语句的批处理.可是这个批处理是一个atom(原子) .不可切割,要么都运行,要么回滚(rollback)都不运行. 二.为什么出现这样的技术 为什么要使用事务这个 ...

  2. OpenGL核心技术之混合技术

    笔者介绍:姜雪伟,IT公司技术合伙人,IT高级讲师,CSDN社区专家,特邀编辑,畅销书作者.国家专利发明人;已出版书籍:<手把手教你架构3D游戏引擎>电子工业出版社和<Unity3D ...

  3. 李笑来~执行力WWH

    什么是秘密 秘密是指只有极少数人知道的实用信息.这个实用信息可以为知道且懂得运用的人获得收益,这个收益可能包括钱.名声和快感. 什么是执行力 执行力=What + Why + How,即WWH 执行力 ...

  4. SQL2012的新分页方法

    SELECT BusinessEntityID , FirstName , LastName FROM Person.Person ORDER BY BusinessEntityID OFFSET ( ...

  5. Objective-C基础笔记(1)基本概念和第一个程序

    一.基本概念 Objective-C(简称OC)是iOS开发的核心语言,苹果公司在维护,在开发过程中也会配合着使用C语言.C++,OC主要负责UI界面,C语言.C++可用于图形处理.C语言是面向过程的 ...

  6. Manning.EJB.3.in.Action.2nd.Edition

    Manning.EJB.3.in.Action.2nd.Edition http://files.cnblogs.com/files/rojas/EJB_3_in_Action_2nd_Edition ...

  7. POJ 1118 Lining Up 直线穿过最多的点数

    http://poj.org/problem?id=1118 直接枚举O(n^3) 1500ms能过...数据太水了...这个代码就不贴了... 斜率排序O(n^2logn)是更好的做法...枚举斜率 ...

  8. Dialog和FormView如何派生通用类

    派生通用类涉及到派生类的构造函数需要传递窗口ID和CWnd,所以要在派生类中事先定义好 在Dialog中构造函数是这样定义的 public: CDialogEx(); CDialogEx(UINT n ...

  9. 【Codeforces Round #455 (Div. 2) A】Generate Login

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 枚举两个串的前缀长度就好. 组出来. 排序. 取字典序最小的那个. [代码] #include <bits/stdc++.h& ...

  10. [DP]【最大全零矩阵】【2015.7.9TEST】E

    E 0.9 seconds, 32 MB " 于是乎,你至少证明了你智商比金天成高.也就说你证明了你不是低智儿童,不错不错. 然而这次, 我貌似也卡住了,你给我打下手吧. 勇敢的少年啊快去创 ...