Javascript:在 Canvas 上 move 对象(尝试学习面向对象编程)

Question

所以基本上我想制作一个简单的贪吃蛇游戏，但我已经陷入了 move 部分。

如果我制作一个按钮 onclick = "snake.show()"并且当我单击该按钮时，矩形会 move ，则此代码有效。 (snake.show()也在body onload中)

    var width = 800;
    var height = 400;
    var x = width/2;
    var y = height/2;

    class Snake{
        show(){
            var c = document.getElementById("canvas");
            var ctx = c.getContext("2d");
            ctx.rect(x, y, 20, 5);
            ctx.fill();
            x++;
        }
        //update(){}
    }

    let snake = new Snake();

但我不想做这样的事情:

    var width = 800;
    var height = 400;
    var x = width/2;
    var y = height/2;

    class Snake{
        show(){
            var c = document.getElementById("canvas");
            var ctx = c.getContext("2d");
            ctx.rect(x, y, 20, 5);
            ctx.fill();
        }
        update(){
            x++;
        }
    }

如果我需要 move 矩形，请调用 update() 函数，但这不起作用。抱歉我的英语不好，感谢您的建议和帮助!

Answer 1

1. 将 Canvas 和上下文声明为全局变量(仅一次)。
2. 一个类需要一个构造方法。
3. 我正在更新并再次显示右箭头上的蛇。

希望对您有所帮助。

const c = document.querySelector("canvas");
const ctx = c.getContext("2d");

const width = (c.width = 800);
const height = (c.height = 400);

class Snake {
  constructor() {
    this.x = width / 2;
    this.y = height / 2;
  }
  show() {
    ctx.beginPath();
    ctx.rect(this.x, this.y, 20, 5);
    ctx.fill();
  }
  update() {
    this.x+=20;
  }
}

let snake = new Snake();
snake.show();

window.addEventListener("keydown", e => {
  
  if (e.keyCode == 39) {
    ctx.clearRect(0,0,width,height);
    snake.update();
    snake.show();
  }
});

canvas{border:1px solid}

<canvas id="canvas"></canvas>