[Angular2] Map keyboards events to Function
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的更多相关文章
- React报错之map() is not a function
正文从这开始~ 总览 当我们对一个不是数组的值调用map()方法时,就会产生"TypeError: map is not a function"错误.为了解决该错误,请将你调用ma ...
- 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 ...
- 如何使用highmaps制作中国地图
如何使用highmaps制作中国地图 文章目录 Highmaps 所需文件 地图初始化代码 highmaps 渲染讲解 highmaps 中国各城市坐标的json文件 highmaps 线上DEMO ...
- 使用highmaps制作中国地图
Highmaps 所需文件 http://code.highcharts.com/maps/highmaps.js(地图渲染的核心文件 必须引用)http://code.highcharts.com/ ...
- svg文件使用highmap显示
svg文件使用highmap显示 highmap,ammap都是比较好的第三方插件用来显示svg图片: ammap导航可能更美观点(这个highmap后面可能也会赶上), highma ...
- angular2环境搭建
Angular2.x与Angular1.x完全不同,Angular2.x是不兼容Angular1.x的,所在在框架的构造上,它们是完全不同的.在Angular2.x中,因为其是基于ES6来开发的,所以 ...
- Google Map 自定义 infowindow
最近做的东西用到了infowindow,不过google提供的样式太难看了,于是想改变一下样式.看了一下好像infowindow的样式不太好改. 查了半天资料,看到一个infobox,感觉真的挺好用. ...
- 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 ...
- 【原创】backbone1.1.0源码解析之Events
最近在看些node的源代码,发现backbone的应用还是挺广泛的,但是之前的学习忘得一干二净了,后悔当时没做笔记啊. 所以,无奈想用的更好,就是得把源代码看楚,所以还是把源代码的注释笔记留下来,供自 ...
随机推荐
- UVa 11743 - Credit Check
题目:推断卡号是否合法,给你4组4位的数字.偶数位的2倍的位和加上奇数位的和,推断尾数是否为0. 分析:简单题,模拟. 直接依照提议推断就可以. 说明:460题,加油! #include <io ...
- js中对数组的操作-------Day49
今天碰到了一个问题:easyui的使用中,datagrid表格的高度怎样改变(设定成一个固定的高度),看了半天文档,也从网上查了些.还楞是没弄出来,有点小郁闷.这easyui在某些情况情况下确实好用了 ...
- POJ 2828 线段树单点更新 离线搞
Description Railway tickets were difficult to buy around the Lunar New Year in China, so we must get ...
- 提高IIS的FTP安全性 管理员的九阴真经
提高IIS的FTP安全性 管理员的九阴真经 <九阴真经>是很多武林高手蒙昧以求的武林秘籍,在系统管理员这个武林中也有很多类似<九阴真经>一样的秘籍.在这里就向大家介绍一下有关提 ...
- Django项目之Web端电商网站的实战开发(二)
说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! 接着上一篇博客继续往下写 :https://blog.csdn.net/qq_41782425/article/details/8 ...
- 洛谷——P1816 忠诚
https://www.luogu.org/problem/show?pid=1816#sub 题目描述 老管家是一个聪明能干的人.他为财主工作了整整10年,财主为了让自已账目更加清楚.要求管家每天记 ...
- mysql新加入用户与删除用户详细操作命令
方法1 :使用mysql root(root权限)用户登陆直接赋权也能够创建用户 /usr/bin/mysqladmin -u root password 123456 mysql -uroot -p ...
- [Vue + TS] Using Route events inside Vue
vue-router introduces new hooks into the component. In this lesson we’ll show you how to use these n ...
- 用实力让情怀落地!阅兵前线指挥车同款电视TCL H8800受捧
近期.一则重磅消息刷爆了平面媒体.微博.朋友圈等各个传播渠道:TCL曲面电视H8800正式入驻大阅兵前线指挥车以及国旗护卫队荣誉室.宣告代表眼下中国彩电业最高技术水准的曲面电视,正式走上大阅兵 ...
- perl模块 Compress::Raw::Lzma 的安装
perl模块 Compress::Raw::Lzma 的安装 用 cpan 安装任意perl模块总是提示 Couldn't untar Compress-Raw-Lzma-2.070.tar: 'Ca ...