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. [Angular] How to get Store state in ngrx Effect

    For example, what you want to do is navgiate from current item to next or previous item. In your com ...

  2. android图像处理(3)底片效果

    这篇将讲到图片特效处理的底片效果.跟前面一样是对像素点进行处理,算法是通用的. 算法原理:将当前像素点的RGB值分别与255之差后的值作为当前点的RGB值. 例: ABC 求B点的底片效果: B.r ...

  3. 26.event跨进程通信

    以id创建事件 ] = "myevent"; HANDLE event = CreateEventA(NULL, FALSE, FALSE, name); 设置事件 SetEven ...

  4. 2. APIS官网剖析(博主推荐)

    不多说,直接上干货! 一切来源于官网 http://kafka.apache.org/documentation/ 2. APIS .APIS Apache Kafka引入一个新的java客户端(在o ...

  5. HTML5的设计目的是为了在移动设备上支持多媒体

    HTML5的设计目的是为了在移动设备上支持多媒体

  6. Vue的全选功能实现思路

    全选功能的实现主要分两步: 1. 点击全选框选中所有选择框. 2. 当所有选择框都被选中时,勾选全选框. 详细思路: 1. 点击全选框选中所有选择框: 给全选框绑定一个值,然后添加change时间,当 ...

  7. ArcGIS小技巧——多图层情况下交互显示效果

    在使用ArcMap处理数据的过程中,通常需要对比不同图层之间的差异.或者查看影像配准情况,这时我通常会怀念ENVI中的强大的拉幕显示.闪烁.亮度和透明度显示工具...... 直到有一天,闲着没事干捣鼓 ...

  8. 常用处理字符串的SQL函数

    汇总函数:Count.Sum.AVG.MAX.min; 数学函数: ABS:绝对值.floor:给出比给定值小的最大整数. round(m,n):m为给定的值,n为小数点后保留的位数. power(m ...

  9. 【hdu 1083】Courses

    [Link]:http://acm.hdu.edu.cn/showproblem.php?pid=1083 [Description] 有p门的课,每门课都有若干学生,现在要为每个课程分配一名课代表, ...

  10. String字符串操作--切割,截取,替换,查找,比较,去空格.....

    字符串拼接 直接用+号:String a = "I"; String b = "love"; String c = "you";String ...