对象不随按键移动javascript + canvas

问题描述

在这段代码中，我一直在尝试使用键盘上的箭头键移动一个矩形。我已经根据 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,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>

解决方法

好吧，在为一个愚蠢的问题苦苦挣扎并深入研究网站后，我终于发现了错误并已修复。

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

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

,

错误太多，这里是一个固定版本：

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,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>