Vanilla JS Web Components неожиданный неопределенный атрибут при втором вызове функции - PullRequest
Новая
       14

Vanilla JS Web Components неожиданный неопределенный атрибут при втором вызове функции

0 голосов
/ 08 апреля 2020

Я пытаюсь написать простую игру с использованием веб-компонентов в Vanilla JS. Тем не менее, у меня возникают некоторые проблемы, когда речь идет о перерисовке элемента canvas. Первый вызов всегда в порядке, и он требует aws круга, как я хочу, но когда вызывается requestAnimationFrame (draw), все атрибуты становятся неопределенными. Почему это происходит и как мне обойти это? вот мой код 

class GamePanel extends HTMLElement{
    constructor() {
        super();
        this.shadow = this.attachShadow({ mode: "open" });
        this.rightPressed = false;
        this.leftPressed = false;
        this.upPressed = false;
        this.downPressed = false;
        this.canvas = document.createElement("canvas");
        this.canvas.width = 1000;
        this.canvas.height = 500;
        this.canvas.style.backgroundColor = "black";
        this.shadow.appendChild(this.canvas);
        this.ctx = this.canvas.getContext("2d");
        this.x = this.canvas.width/2;
        this.y = this.canvas.height-30;
        this.dx = 2;
        this.dy = 2;
        this.ballRadius = 10;
        this.addEventListener("keydown", this.keyDownHandler, false);
      }
      draw(){
        console.log(this.ctx);
        console.log(this.x);
        console.log(this.y);
        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
        this.drawBall();
        if(this.rightPressed){
            this.x += this.dx;
        }
        else if(this.leftPressed){
            this.x -=this.dx;
        }
        if(this.downPressed){
            this.y+= this.dy;
        }
        else if(this.upPressed){
            this.y-=this.dy
        }
        if(this.x+this.dx > this.canvas.width + this.ballRadius) this.x = 0;
        else if(this.x - this.dx < 0 - this.ballRadius) this.x = this.canvas.width
        if(this.y+this.dy > this.canvas.height + this.ballRadius) this.y = 0;
        else if(this.y - this.dy < 0 - this.ballRadius) this.y = this.canvas.height;
        requestAnimationFrame(this.draw);
    }
    drawBall(){
        this.ctx.beginPath();
        this.ctx.arc(this.x, this.y, this.ballRadius, 0, Math.PI*2);
        this.ctx.fillStyle = "#0095DD";
        this.ctx.fill();
        this.ctx.closePath();
    }
    keyDownHandler(e){
        if(e.key == "Right" || e.key == "ArrowRight") {
            this.rightPressed = true;
            this.leftPressed = false;
        }
        else if(e.key == "Left" || e.key == "ArrowLeft") {
            this.leftPressed = true;
            this.rightPressed = false;
        }
        if(e.key == "Up" || e.key == "ArrowUp"){
            this.upPressed = true;
            this.downPressed = false;
        }
        else if(e.key =="Down" || e.key == "ArrowDown"){
            this.downPressed = true;
            this.upPressed = false;
        }
    }
}

customElements.define("game-panel", GamePanel);
document.getElementsByTagName("game-panel")[0].draw();

ошибка, которую я получаю: Uncaught TypeError: Cannot read property 'ctx' of undefined at draw (script.js:24)

...