Ждуждужду.

Не норм. requestAnimationFrame (далее RAF) будет вызываться 60 раз в секунду. Его нужно запускать примерно так:

function loop() {

  // код отрисовки

  // передаём эту же функцию в RAF
  requestAnimationFrame(loop);

}

А у тебя сейчас выходит что ты в цикле отрисовки один раз фон загружаешь и всё.

И ещё, когда в изображение назначаешь src, нужно ждать когда оно отрисуется с помощью img.addEventListener("load").

да столкнулся с этим

function loop() {

  // код отрисовки

  // передаём эту же функцию в RAF
  requestAnimationFrame(loop);

}

только не понимаю где 60 раз он будет вызываться

Он будет стараться вызываться 60 раз в секунду чтобы поддерживать приемлемый уровень FPS. Причём, если нагрузка будет высокая то он сам будет тротлить FPS (снижать), вплоть до полной остановки. Ну и там другие оптимизации, при переключении вкладки тоже будет останавливать.

решение?

function loop() {

  // код отрисовки

  // передаём эту же функцию в RAF
  requestAnimationFrame(loop);

}

Вот же.

А, я кажется понял о чём ты. У тебя он не будет вызываться, а он должен вызываться. Иначе зачем ты используешь его? :)

Чтобы отобразить картинки? насколько я понял, он запускает запланированные таски

Ну я про это и говорю. Ты в нём должен выполнять код, отвечающий за отрисовку каждого кадра. А ты его используешь не по назначению. Нужно либо в петле его запускать, либо не использовать. 🤷🏻‍♂️

class Game {
   constructor(ctx, sprites) {
       this.ctx = ctx;
       this.sprites = sprites
   }
   init() {
       this.ctx = document.getElementById('canvas').getContext("2d");
   };

  preload() {
       this.sprites = {
           ball: null,
           background: null,
           platform: null
       };
       let loaded = 0;
       let required = Object.keys(this.sprites).length;
       for (let key in this.sprites) {
           this.sprites[key] = new Image();
           this.sprites[key].src = img/${key}.png;
           this.sprites[key].addEventListener('load', () => {
               loaded++;
               console.log(loaded === required);
               if(loaded >= required) {
                   this.run();
               }
           })
       }
   }

   render() {
       this.ctx.drawImage(this.sprites.background, 0, 0)
       this.ctx.drawImage(this.sprites.ball, 0, 0)
       this.ctx.drawImage(this.sprites.platform, 0, 0)
   }
   run() {
      this.loop();
   }
   loop() {
       this.render();
       requestAnimationFrame(loop);
   }
   start() {
       this.init();
       this.preload();
   }
};

Уже лучше. Ну и бэкграунд обычно выносят в отдельный канвас. Так как он самый тяжёлый и его не нужно перерисовывать каждый раз. Просто через zIndex его нижним сделай.

хм такая игра не подойдет для учебного занятия, поэтому не буду просить пример кода 😆

чето я нифига не пойму почему условие  ИЛИ не работает?

let auth = "Вася";

if (auth = "Петя" || "Оля" ){
 console.log("Вход в парк разрешен");
}
else{
 console.log("Вход запрещен");
};

Выдает все равно "Вход в парк разрешен"