Javascript 为什么我的矩形在更新x轴时不移动？

我试图在画布上制作简单的动画，试图通过更新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个像素，谢谢。

对我来说可以，但你必须清除画布（先画一个白色矩形）。另外，您忘记了大小类别，因此没有定义宽度和高度

代码

类循环{
//初始化
构造函数（画布、显示）{
this.canvas=画布；
this.display=显示；
this.player=新播放器（this.canvas，this.display）；
}
//更新
更新（）{
this.player.update（）；
}
//画
画（）{
this.player.draw（）；
}
}
职业选手{
构造函数（画布、显示）{
this.display=显示；
this.canvas=画布；
此点=新点（20,20）；
此尺寸=新尺寸（100,25）；
}
//更新
更新（）{
this.point.x++；//更新x
}
//画
画（）{
//删除以前的
this.display.fillStyle=“#ffffff”；
this.display.fillRect（0,0400）
//使用点和大小绘制矩形
this.display.fillStyle=“#ff0000”；
this.display.fillRect（this.point.x，this.point.y，this.size.w，this.size.h）
}
}
类点{
构造函数（x，y）{
这个.x=x；
这个。y=y；
}
}
班级人数{
建造师（w，h）{
这个.w=w；
这个，h=h；
}
}
让canvas=document.getElementById（“canvas”）；//获取画布
let display=canvas.getContext（“2d”）；//获取上下文
让循环=新循环（画布，显示）；//实例循环
//拉环
函数drawLoop（）{
loop.update（）；//更新
loop.draw（）；//draw
requestAnimationFrame（drawLoop）；//循环
}
//援引
drawLoop（）