Почему мой прямоугольник не двигается, когда я обновляю ось X? - PullRequest
Новая
       15

Почему мой прямоугольник не двигается, когда я обновляю ось X?

0 голосов
/ 11 июля 2019

Я пытаюсь сделать простую анимацию на холсте, пытаюсь переместить прямоугольник вправо, обновив ось X, но это не работает, я не знаю почему?

Я застрял, мне нужна помощь и спасибо?

класс основной 

// import zone
import Player from "./player.js";
import Loop from "./loop.js";

// var zone
let canvas = document.getElementById("canvas"); // get canvas
let display = canvas.getContext("2d"); // get context
let loop;
loop = new Loop(canvas, display); // instance loop

// draw loop
function drawLoop() {

  loop.player.point.x++;
  loop.update(); // update
  loop.draw(); // draw
  requestAnimationFrame(drawLoop); // loop
}
// invoke
drawLoop();

классовая петля 

// import zone
import Player from "./player.js";
// class
export default class Loop {
  // init
  constructor(canvas, display) {
    this.canvas = canvas;
    this.display = display;
    this.player = new Player(this.canvas, this.display);
  }
  // update
  update() {
    this.player.update();
  }
  // draw
  draw() {
    this.player.draw();
  }
}

класс игрока 

// import zone
import Size from "./size.js";
import Point from "./point.js";

// class
export default class Player {
  constructor(canvas, display) {
    this.display = display;
    this.canvas = canvas;
    this.point = new Point(200, 200);
    this.size = new Size(100, 25);
  }
  // update
  update() {
    this.point.x++; // trying to update x but the rect does not move  
  }
  // draw
  draw() {
    this.display.fillStyle = "#ffffff";
    this.display.fillRect(this.point.x, this.point.y, this.size.w, this.size.h);
  }
}

классная точка 

export default class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
}

Прямоугольник должен сместиться на 1 пиксель вправо, спасибо.

1 Ответ

0 голосов
/ 11 июля 2019

Для меня это работает, но вы должны очистить холст (сначала рисуя белый прямоугольник).Кроме того, вы забыли класс Size, поэтому ширина и высота не были определены.

Код 

class Loop {
  // init
  constructor(canvas, display) {
    this.canvas = canvas;
    this.display = display;
    this.player = new Player(this.canvas, this.display);
  }
  // update
  update() {
    this.player.update();
  }
  // draw
  draw() {
    this.player.draw();
  }
}


class Player {
  constructor(canvas, display) {
    this.display = display;
    this.canvas = canvas;
    this.point = new Point(20, 20);
    this.size = new Size(100, 25);
  }
  // update
  update() {
    this.point.x++; // update x  
  }
  // draw
  draw() {
    //remove previous
    this.display.fillStyle = "#ffffff";
    this.display.fillRect(0,0,400,400)
    
    // draw rectangle using point and size
    this.display.fillStyle = "#ff0000";
    this.display.fillRect(this.point.x, this.point.y, this.size.w, this.size.h)
  }
}

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
}

class Size {
  constructor(w, h) {
    this.w = w;
    this.h = h;
  }
}

let canvas = document.getElementById("canvas"); // get canvas
let display = canvas.getContext("2d"); // get context
let loop = new Loop(canvas, display); // instance loop

// draw loop
function drawLoop() {
  loop.update(); // update
  loop.draw(); // draw
  requestAnimationFrame(drawLoop); // loop
}
// invoke
drawLoop();
<canvas id="canvas" width="400" height="200"></canvas>
...