Question

我正在为一个学校项目创建一个网站，并且想要实现一个JavaScript游戏，在遇到此错误之前，我已经走了很远。大多数错误是我已经可以解决，但是我无法解决。我的老师也不知道答案，希望我能在这里找到帮助

这是我的代码

            var player;

            function startgame() {
                gamearea.start();
                playerupdater();
                player = new component(30, 30, "blue", 10, 120);
            }

            var gamearea = {
                canvas : document.createElement("canvas"),
                start : function() {
                    this.canvas.width = 480;
                    this.canvas.height = 270;   
                    this.context = this.canvas.getContext("2d");
                    document.body.insertBefore(this.canvas, document.body.childNodes[0]);
                    this.interval = setInterval(updateplayer, 50);
                },
                clear : function(){
                    console.log(this)
59------>           this.canvas.clearRect(0, 0, this.canvas.width, this.canvas.height); <-
                }
            }

            function playerupdatetimeout(){
                setTimeout(playerupdater, 25)
            }

            function playerupdater(){
                setInterval(gamearea.clear, 50);
            }

            function component(width, height, color, x, y) {
                this.width = width;
                this.height = height;
                this.speedx = 0;
                this.speedy = 1;
                this.x = x;
                this.y = y; 
                this.update = function(){   
                    ctx = gamearea.context;
                    ctx.fillStyle = color;
                    ctx.fillRect(this.x, this.y, this.width, this.height);
                }
                this.newpos = function(){
                    this.x += this.speedx;
                    this.y += this.speedy;
                }
            }

            function updateplayer(){
                player.update();
            }

            function movup(){
                player.speedy -=1;  
            }

            function movdown(){
                player.speedy +=1;
            }

            function movright(){
                player.speedx -=1;
            }

            function movleft(){
                player.speedx +=1;
            }

控制台指出第59行有错误（代码本身已指出）

如果您想自己查看错误，请访问我的网站，这里是 https://jessep2000.github.io./home.html

，我用于此页面的所有代码都在此存储库中 https://github.com/Jessep2000/Jessep2000.github.io/tree/master

希望有人知道答案，在此先感谢！

Answer 1

第59行的this.canavas未定义，因为您试图从同一对象内访问对象密钥。制作另一个对象，例如：-

let obj ={
clear : function(){       
   this.gamearea.canavas.clearRect(0, 0, this.canvas.width, this.canvas.height); <-
    }
}

要使用清除功能时，只需使用：

obj.clear()

Answer 2

感谢Roland Starke和Shivendra Gupta解决了我的问题，这是最终的结果：

var player;
function startgame() {
                gamearea.start();
                playerupdater();
                player = new component(30, 30, "blue", 10, 120);
            }
                let obj ={
                    clear : function(){       
                         this.gamearea.canvas.clearRect(0, 0, this.canvas.width, this.canvas.height); 
                     }
                }
            var gamearea = {
                canvas: document.createElement("canvas"),
                start: function () {
                    this.canvas.width = 480;
                    this.canvas.height = 270;
                    this.context = this.canvas.getContext("2d");
                    document.body.insertBefore(this.canvas, document.body.childNodes[0]);
                    this.interval = setInterval(updateplayer, 50);
                },
                clear: function() {
                    let ctx = this.canvas.getContext("2d")
                    ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
                }
            }
            function playerupdatetimeout(){
                setTimeout(playerupdater, 25)
            }
            function playerupdater(){
                setInterval(gamearea.clear.bind(gamearea), 50);
            }
            function component(width, height, color, x, y) {
                this.width = width;
                this.height = height;
                this.speedx = 0;
                this.speedy = 1;
                this.x = x;
                this.y = y; 
                this.update = function(){   
                    ctx = gamearea.context;
                    ctx.fillStyle = color;
                    ctx.fillRect(this.x, this.y, this.width, this.height);
                }
                this.newpos = function(){
                    this.x += this.speedx;
                    this.y += this.speedy;
                }
            }
            function updateplayer(){
                player.update();
            }
            function movup(){
                player.speedy -=1;  
            }
            function movdown(){
                player.speedy +=1;
            }
            function movright(){
                player.speedx -=1;
            }
            function movleft(){
                player.speedx +=1;
            }

我现在正在努力获取清除和播放器更新功能的时间。谢谢你们的帮助！

制作JavaScript游戏困难

2 个答案: