如何使用ES6类添加事件侦听器并在画布中移动对象？

Question

我正在创建一个小游戏，你可以移动一个星/不明飞行物。我很难弄清楚应该如何让它移动。使用函数式编程很容易，但我们如何使用ES6 utlizing类来完成这项工作呢？我们需要绑定还是什么？我想我的逻辑也有些错误。

如何让圆圈移动？

Codepen：https://codepen.io/Aurelian/pen/mGWVbq?editors=0010

'use strict';
/*
 * ------------------------------------------
 * *-----------------------------
 *  User Event
 * *-----------------------------
 * ------------------------------------------
 */
class UserEvent {
  constructor(canvasBody) {
    this.UP_ARROW = 38 || 87,
      this.RIGHT_ARROW = 39 || 68,
      this.DOWN_ARROW = 37 || 83,
      this.LEFT_ARROW = 40 || 65,
      this.keys = []

    canvasBody.addEventListener('keydown', (e) => {
      this.keys[e.keyCode] = true;
    });

    canvasBody.addEventListener('keyup', (e) => {
      this.keys[e.keyCode] = false;
    });
  }

  checkKey(key) {
    return this.keys[key];
  }

  ufoMove() {
    this.canvasBody.checkKey(this.UP_ARROW)
    this.canvasBody.checkKey(this.RIGHT_ARROW)
    this.canvasBodycheckKey(this.DOWN_ARROW)
    this.canvasBody.checkKey(this.LEFT_ARROW)
    console.log(this.canvasBody.leftArrow = this.checkKey(this.LEFT_ARROW))

    if (this.UP_ARROW) {
      this.x += this.x * this.velocity.x
    }
  }
}


/*
 * ------------------------------------------
 * *-----------------------------
 *  UFO
 * *-----------------------------
 * ------------------------------------------
 */
class Ufo {
  constructor(x, y) {
    this.x = x,
      this.y = y,
      this.velocity = {
        x: 3,
        y: 3
      }
  }

  draw(c) {
    c.save()
    c.beginPath()
    c.arc(this.x, this.y, 50, 0, Math.PI * 2, false)
    c.fillStyle = "#fff";
    c.shadowColor = "#e3eaef";
    c.shadowBlur = 20;
    c.fill()
    c.closePath()
    c.restore()
  }

  update(c) {
    this.draw(c)
    // Get the keys first
    this.EventUser.ufoMove(this.c);
    //    this.x = this.x + this.velocity.x;
    // }
  }
}

/*
 * ------------------------------------------
 * *-----------------------------
 *  Canvas
 * *-----------------------------
 * ------------------------------------------
 */
class CanvasDisplay {
  constructor() {
    this.canvas = document.querySelector('canvas');
    this.ctx = this.canvas.getContext('2d');
    this.stageConfig = {
      width: window.innerWidth,
      height: window.innerHeight
    };
    this.canvas.width = this.stageConfig.width;
    this.canvas.height = this.stageConfig.height;

    this.backgroundGradient = this.ctx.createLinearGradient(0, 0, 0, this.canvas.height);
    this.backgroundGradient.addColorStop(0, '#171e26');
    this.backgroundGradient.addColorStop(1, '#3f586b');

    this.Ufo = new Ufo(this.canvas.width / 2, this.canvas.height / 2);
    this.UserEvent = new UserEvent(document.body);
  }

  animate() {
    this.ctx.fillStyle = this.backgroundGradient;
    this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);

    this.Ufo.update(this.ctx)
    window.requestAnimationFrame(this.animate);
  }
}

let canvasDisplay = new CanvasDisplay();
canvasDisplay.animate();

canvas {
  display: block;
}

<canvas></canvas>