Сложность создания игры на JavaScript

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

Спасибо Ролану Старке и Шивендре Гупте за решение моей проблемы, это конечный результат:

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;
            }

Сейчас я работаю над тем, чтобы определить время сброса и обновления игрока. Спасибо вам, ребята, за вашу помощь!

Answer 2

В строке 59 this.canavas не определено , потому что вы пытаетесь получить доступ к ключу объекта из того же объекта. Сделайте еще один объект, например: -

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

Если вы хотите использовать функцию очистки, просто используйте:

obj.clear()