[英]Take Keyboard Input Into Ember Component
我在綠色畫布中創建了一個帶有矩形塊的余燼組件。
我遇到的麻煩是為ASDW添加了鍵盤輸入命令,以在畫布上移動矩形。 在常規的javascript或jquery中做起來很容易,但是在組件模型內部我有點迷失了。 關於該功能的任何幫助將非常有用。
此處鏈接的是一個余燼javascript bin: http : //emberjs.jsbin.com/miyatoti/1/edit
這是我目前的組件代碼。
App.BoxGameComponent = Em.Component.extend({
tagName:'canvas',
width: 325,
height: 280,
refresh:30,
attributeBindings:['width', 'height'],
stars:null,
on:false,
build: function(){
var canvas = this.$()[0],
ctx = canvas.getContext('2d'),
shippos = [150, 120],
height = this.get('height'),
width = this.get('width');
this.set('shippos', shippos);
this.set('ctx', ctx);
this.set('on', true);
}.on('didInsertElement'),
kill: function(){
this.set('on', false);
}.on('willDestroyElement'),
clear: function () {
var ctx = this.get('ctx'),
height = this.get('height'),
width = this.get('width');
ctx.fillStyle = 'green';
ctx.clearRect(0, 0, width, height);
ctx.beginPath();
ctx.rect(0, 0, width, height);
ctx.closePath();
ctx.fill();
},
box: function () {
var that = this;
var ctx = this.get('ctx'),
height = this.get('height'),
width = this.get('width'),
shippos = this.get('shippos');
var posx = shippos[0],
posy = shippos[1];
ctx.rect(posx,posy,50,50);
ctx.stroke();
},
game: function(){
if(this.get('on')){
this.loop();
}
}.observes('on'),
loop: function () {
var refreshRate = this.get('refresh');
this.clear();
this.box();
if(this.get('on')){
Em.run.later(this, this.loop, refreshRate);
}
}
});
如果有人可以幫忙,我已經為此動了好幾個小時。
由於畫布沒有獲得焦點,因此將畫布元素連接起來有點棘手。 因此,您只需掛在窗戶上(然后銷毀它)。
$(window).on('keyup', {self:this}, this.handleKeyUp );
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.