Javascript：在画布上移动对象（尝试学习面向对象编程）

所以基本上我想做一个简单的蛇游戏，但是我已经被移动部分卡住了

如果我制作一个按钮onclick=“snake.show（）”，当我单击按钮时，矩形会移动，那么这就是代码。（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();
        }
        update(){
            x++;
        }
    }

如果需要移动矩形，则调用update（）函数，但这不起作用。对不起，我的英语不好，谢谢你的建议和帮助

将画布和上下文声明为全局变量（仅一次）

类需要一个构造函数方法

我正在更新并再次显示右箭头键上的蛇 我希望有帮助

const c=document.querySelector（“canvas”）；
const ctx=c.getContext（“2d”）；
常数宽度=（c.width=800）；
常数高度=（c.高度=400）；
蛇类{
构造函数（）{
这.x=宽度/2；
这.y=高度/2；
}
show（）{
ctx.beginPath（）；
ctx.rect（this.x，this.y，20,5）；
ctx.fill（）；
}
更新（）{
这个.x+=20；
}
}
让蛇=新蛇（）；
snake.show（）；
window.addEventListener（“keydown”，e=>{
如果（e.keyCode==39）{
ctx.clearRect（0,0，宽度，高度）；
snake.update（）；
snake.show（）；
}
});
canvas{border:1px solid}

将画布和上下文声明为全局变量（仅一次）
类需要一个构造函数方法
我正在更新并再次显示右箭头键上的蛇
我希望有帮助


const c=document.querySelector（“canvas”）；
const ctx=c.getContext（“2d”）；
常数宽度=（c.width=800）；
常数高度=（c.高度=400）；
蛇类{
构造函数（）{
这.x=宽度/2；
这.y=高度/2；
}
show（）{
ctx.beginPath（）；
ctx.rect（this.x，this.y，20,5）；
ctx.fill（）；
}
更新（）{
这个.x+=20；
}
}
让蛇=新蛇（）；
snake.show（）；
window.addEventListener（“keydown”，e=>{
如果（e.keyCode==39）{
ctx.clearRect（0,0，宽度，高度）；
snake.update（）；
snake.show（）；
}
});
canvas{border:1px solid}
类确实需要构造函数，但您不必自己指定。如果省略，将使用默认构造函数。类确实需要构造函数，但您不必自己指定。如果省略，将使用默认构造函数。
    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++;
        }
    }