按下键时对象不移动（javascript + canvas）

Question

在这段代码中，我一直在尝试使用键盘上的箭头键移动一个矩形。我已经根据this tutorial编写了条件，但是我的项目略有不同所以我更改了代码但问题仍然存在的对象。

我有 2 个事件侦听器用于按键被按下和未按下，并且我使用了一些标志变量来查看按钮的状态并根据它移动对象。

对不起，如果我的问题很愚蠢，我是这个编程领域的新手，我已经花了几个小时来解决这个问题。

    <script>
            //canvas
            var canvas = document.getElementById("gameScreen");
            var ctx = canvas.getContext("2d");          
            const width = 1000;
            const height = 700;
            
            //user controllers
            var rightPressed = false;
            var leftPressed = false;
            var upPressed = false;
            var downPressed = false;

            //keydown handler
            document.addEventListener("keydown",(e)=>{
                if(e.key == "Up" || e.key == "ArrowUp"){
                    upPressed = true;
                } 
                else if(e.key == "Down" || e.key == "ArrowDown"){
                    downPressed = true;
                }
                else if(e.key == "Right" || e.key == "ArrowRIght"){
                    rightPressed = true;
                }
                else if(e.key == "Left" || e.key == "ArrowLeft"){
                    leftPressed = true;
                }
            }, false);

            //keyup handler
            document.addEventListener("keyup",(e)=>{
                if(e.key == "Up" || e.key == "ArrowUp"){
                    upPressed = false;
                } 
                else if(e.key == "Down" || e.key == "ArrowDown"){
                    downPressed = false;
                }
                else if(e.key == "Right" || e.key == "ArrowRIght"){
                    rightPressed = false;
                }
                else if(e.key == "Left" || e.key == "ArrowLeft"){
                    leftPressed = false;
                }
            }, false);          
            
            // Player Object
            let Player = function(x,y){
                this.x = x;
                this.y = y; 
                this.width = 50;
                this.height = 50;

                this.getDirection = function(){
                    if(downPressed){
                        this.y -= 10;
                    }else if(upPressed){
                        this.y += 10;
                    }else if(rightPressed){
                        this.x += 10;
                    }else if(leftPressed){
                        this.x -= 10;
                    }
                }
                
                this.update = function(){
                    this.getDirection();
                    this.draw();
                                                        
                };

                this.draw = function(){
                    ctx.clearRect(0,0,width,height);
                    ctx.fillRect(this.x,this.y,this.width,this.height);
                    ctx.fill();
                };
            }

            let player = new Player(200,200)            
            let callback = player.update();

            requestAnimationFrame(callback)

            
            
        </script>

Answer 1

好吧，经过几个小时的努力解决一个愚蠢的问题并深入研究网站后，我终于得到了错误并且我已经修复了它。

错误发生在我使用requestAnimationFrame 的地方，这完全是因为我对requestAnimationFrame 的功能缺乏了解。

如果你想在requestAnimationFrame中使用一个函数，你应该使用一个空函数并使用它里面的main函数，这样它就会成为一个回调。

Answer 2

错误太多了，这里有一个修正版本：

canvas {
  width: 100vw;
  height: 100vh;
}

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

<script>
            //canvas
            var canvas = document.getElementById("gameScreen");
            var ctx = canvas.getContext("2d");          
            const width = 1000;
            const height = 700;
            
            //user controllers
            var rightPressed = false;
            var leftPressed = false;
            var upPressed = false;
            var downPressed = false;

            //keydown handler
            document.addEventListener("keydown",(e)=>{
                if(e.key == "Up" || e.key == "ArrowUp"){
                    upPressed = true;
                } 
                else if(e.key == "Down" || e.key == "ArrowDown"){
                    downPressed = true;
                }
                else if(e.key == "Right" || e.key == "ArrowRight"){
                    rightPressed = true;
                }
                else if(e.key == "Left" || e.key == "ArrowLeft"){
                    leftPressed = true;
                }
            }, false);

            //keyup handler
            document.addEventListener("keyup",(e)=>{
                if(e.key == "Up" || e.key == "ArrowUp"){
                    upPressed = false;
                } 
                else if(e.key == "Down" || e.key == "ArrowDown"){
                    downPressed = false;
                }
                else if(e.key == "Right" || e.key == "ArrowRight"){
                    rightPressed = false;
                }
                else if(e.key == "Left" || e.key == "ArrowLeft"){
                    leftPressed = false;
                }
            }, false);          
            
            // Player Object
            let Player = function(x,y){
                this.x = x;
                this.y = y; 
                this.width = 50;
                this.height = 50;

                this.getDirection = () => {
                    if(downPressed){
                        this.y += 10;
                    }else if(upPressed){
                        this.y -= 10;
                    }else if(rightPressed){
                        this.x += 10;
                    }else if(leftPressed){
                        this.x -= 10;
                    }
                }
                
                this.update = () => {
                    this.getDirection();
                    this.draw();
                                                        
                };

                this.draw = () => {
                    ctx.fillStyle = 'red';
                    ctx.clearRect(0,0,width,height);
                    ctx.fillRect(this.x,this.y,this.width,this.height);
                    ctx.fill();
                    requestAnimationFrame(this.update)
                };
            }

            let player = new Player(10,10);          
            let callback = player.update;

            requestAnimationFrame(callback)
</script>