Gra flappy bird

Witajcie,

Chcę zaimplementować prostą grę bazującą na flappy bird do swojego projektu w Angular, jednak coś mi nie współgra.

Kod html gry:

<router-outlet></router-outlet>

   <canvas id="canvas" width="288" height="512"></canvas>

    <script src="src\app\flappy-lean\flappyLean.js"></script>

Kod JS

var cvs = document.getElementById("canvas");

var ctx = cvs.getContext("2d");

// ładowanie szaty graficznej 

var bird = new Image();

var bg = new Image();

var fg = new Image();

var pipeNorth = new Image();

var pipeSouth = new Image();

bird.src = "src/app/flappy-lean/foto/bird.png";

bg.src = "src/app/flappy-lean/foto/bg.png";

fg.src = "src/app/flappy-lean/foto/fg.png";

pipeNorth.src = "src/app/flappy-lean/foto/pipeNorth.png";

pipeSouth.src = "src/app/flappy-lean/foto/pipeSouth.png";



// deklaracja zmiennych

var gap = 85;

var constant;

var bX = 10;

var bY = 150;

var gravity = 1.5;

var score = 0;

// deklaracja szaty dźwiękowej

var fly = new Audio();

var scor = new Audio();

fly.src = "src\app\flappy-lean\voices\sounds_fly.mp3";

scor.src = "src\app\flappy-lean\voices\sounds_score.mp3";

// sterowanie

document.addEventListener("keydown",moveUp);

function moveUp(){

    bY -= 25;

    fly.play();

}

// zmienne otoczenia

var pipe = [];

pipe[0] = {

    x : cvs.width,

    y : 0

};

// tworzenie otoczenia 

function draw(){

  

    ctx.drawImage(bg,0,0);

  

  

    for(var i = 0; i < pipe.length; i++){

      

        constant = pipeNorth.height+gap;

        ctx.drawImage(pipeNorth,pipe[i].x,pipe[i].y);

        ctx.drawImage(pipeSouth,pipe[i].x,pipe[i].y+constant);

            

        pipe[i].x--;

      

        if( pipe[i].x == 125 ){

            pipe.push({

                x : cvs.width,

                y : Math.floor(Math.random()*pipeNorth.height)-pipeNorth.height

            });

        }

        // sprawdzanie kolizji

      

        if( bX + bird.width >= pipe[i].x && bX <= pipe[i].x + pipeNorth.width && (bY <= pipe[i].y + pipeNorth.height || bY+bird.height >= pipe[i].y+constant) || bY + bird.height >=  cvs.height - fg.height){

            location.reload(); // przeładowanie strony

        }

      

        if(pipe[i].x == 5){

            score++;

            scor.play();

        }

      

      

    }

    ctx.drawImage(fg,0,cvs.height - fg.height);

  

    ctx.drawImage(bird,bX,bY);

  

    bY += gravity;

  

    ctx.fillStyle = "#000";

    ctx.font = "20px Verdana";

    ctx.fillText("Score : "+score,10,cvs.height-20);

  

    requestAnimationFrame(draw);

  

}

draw();

W pliku Angular.json w polu "scripts" dodałem ścieżkę do pliku JS gry, następnie w pliku TypeScript zadeklarowałem funkcje:

declare function moveUp(): any;
declare function draw(): any;

Czy jest jeszcze coś co powinienem uczynić? Wywołać w jakiś sposób funkcje w html ? przez np. {{ moveUp() }} ?

Zdecydowałem się na dynamiczne załadowanie skryptu:

export class FlappyLeanComponent implements OnInit{
  ngOnInit(): void {
    this.loadScript();
  }

  loadScript(): Promise<any> {
    return new Promise((resolve, reject) => {
      const script = document.createElement('script');
      script.src = 'src/app/flappy-lean/flappyLean.js';
      script.async = true;
      script.defer = true;
      document.body.appendChild(script);
    });
  }
}

<canvas id="canvas" width="288" height="512"> </canvas>
<button (click)="loadScript()">Start</button>


<router-outlet></router-outlet>

Jednak nadal nie funkcjonuje :/