How to add event listener and move an object in ca

问题:

I'm creating a small game where you can move a star/ufo. I'm having a hard time to figure out how I should make it move. With functional programming its easy, but how do we go about doing this with ES6 utlizing classes? Do we need to bind or something? I suppose my logic is also somewhat wrong.

How can I make the circle move?

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>

回答1:

Please take a look at this code (a little bit different of what you had in mind)

let keys = {ArrowUp:false,ArrowDown:false,ArrowLeft:false,ArrowRight:false};

         window.addEventListener('keydown', function(e){
            keys[e.code] = true;
         });

         window.addEventListener('keyup', function(e){
            keys[e.code] = false;
         });

  /*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) {
        if(keys.ArrowUp){this.y -= this.velocity.y;}
        if(keys.ArrowDown){this.y += this.velocity.y;}
        if(keys.ArrowLeft){this.x -= this.velocity.x;}
        if(keys.ArrowRight){this.x += this.velocity.x;}
        this.draw(c);
      }
   }

   /* Canvas*/		
   class CanvasDisplay {
      constructor() {
         this.canvas = document.querySelector('canvas');
		     this.ctx = this.canvas.getContext('2d');       
         this.cw = this.canvas.width = window.innerWidth;
         this.ch = this.canvas.height = window.innerHeight;
         
         this.ufo = new Ufo(this.cw / 2, this.ch / 2);
       
         this.ctx.fillStyle = this.grd();
      }
      
      grd(){
         let grd = this.ctx.createLinearGradient(0, 0, 0, this.ch);
         grd.addColorStop(0, '#171e26');
         grd.addColorStop(1, '#3f586b');
         return grd;
      }
      
       animate() {
         window.requestAnimationFrame(this.animate.bind(this));
         this.ctx.fillRect(0,0,this.cw,this.ch);
         this.ufo.update(this.ctx);
      }
   }

   let canv= new CanvasDisplay();

   canv.animate();

body {
  overflow: hidden;
}
canvas {
  display: block;
}

<canvas></canvas>

lease take a look at this code: