Блог

Я создал компонент ember с прямоугольным блоком внутри зеленого холста.

С чем у меня возникли проблемы, так это с добавлением команды ввода с клавиатуры для S D W для перемещения прямоугольника по холсту. Это достаточно легко сделать в обычном javascript или jquery, но внутри компонентной модели я немного потерялся. Любая помощь относительно функции была бы очень полезна.

Здесь приведена ссылка на ячейку ember javascript: 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);
    }
  }

});
  

Если кто-нибудь может помочь, я часами ломал голову над этим.

Подключение элемента canvas к элементу canvas немного сложнее, поскольку холст не получает фокус. Таким образом, вы просто подключаетесь к окну (а затем уничтожаете его позже).

 $(window).on('keyup', {self:this}, this.handleKeyUp );
  

http://emberjs.jsbin.com/miyatoti/2/edit