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. xampp 在 centos 中无法启动的解决办法

    修改这个文件 vim /opt/lampp/lampp 找到     if egrep "9 " /etc/redhat-release > /dev/null更改为  if ...

  2. js10---call方法总结

    <html> <body> <script type="text/javascript"> function Obj(x, y){ this.x ...

  3. 非阻塞键盘检测getchar()

    #include <stdio.h> #include <conio.h> #include <Windows.h> int main() { char c; wh ...

  4. shiro session管理

    http://shiro.apache.org/session-management.html Using Sessions The SessionManager Session Timeout Pe ...

  5. js引入广告服务

    var header = []; header[1] = { 'title' : '新浪开始进军微博大战', 'pic' : 'images/header1.png', 'link' : 'http: ...

  6. golang sync.WaitGroup

    //阻塞,直到WaitGroup中的所以过程完成. import ( "fmt" "sync" ) func wgProcess(wg *sync.WaitGr ...

  7. MFC中对话框的各种消息触发时间

    小结:WM_CREATE是所有窗口都能响应的消息,表明本窗口已经创建完毕.可以安全的使用这个窗口了,例如在它上面画控件等等.这个状态肯定是在调用ShowWindows()显示窗口之前.WM_WM_IN ...

  8. C#调用C++数组,结构体DLL

    1.基本数据类型的传递 常见数据类型的传递 C/C++ C# 长度 short short 2Bytes int int 4Bytes long(该类型在传递的时候常常会弄混) int 4Bytes ...

  9. method initializationerror not found:JUnit4单元測试报错问题

           今天使用JUnit 4进行单元測试时,測试程序一直执行不起来,报method initializationerror not found错误.例如以下:            网上说版本 ...

  10. 基于Eclipse的Android JNI层測试应用开发过程记录

    前言 本文记录一个Java层与JNI层參数与数据交互的应用程序开发过程.为实现一个功能完整的带Java与JNI的应用程序打下基础. 本文如果读者已搭建好Android的Eclipse与NDK开发环境, ...