Declare loadAssets()
Declare onLoadSuccess()
Declare onLoadError()
Declare gameLoop()
Declare resizeScreen(Center.b = #False)

Structure newSprite
  id.i
  x.i
  y.i
  vy.i
EndStructure

Global ball.newSprite

Global background, demo

OpenScreen(400, 600, 32, "")

;If you want to remove the blue background
!$('html').css('background-image', 'none');

;If you want to Change background color
!$('html').css('background-color', '#E2C29E');

BindEvent(#PB_Event_Loading, @onLoadSuccess())
BindEvent(#PB_Event_LoadingError, @onLoadError())
BindEvent(#PB_Event_RenderFrame, @gameLoop())
loadAssets()

Procedure loadAssets()
  background = LoadSprite(#PB_Any, "assets/sprites/background.png", #PB_Sprite_AlphaBlending)
  demo = LoadSprite(#PB_Any, "assets/sprites/demo.png", #PB_Sprite_AlphaBlending)
  ball\id = LoadSprite(#PB_Any, "assets/sprites/ball.png", #PB_Sprite_AlphaBlending)
EndProcedure

Procedure onLoadSuccess()
  Static CountElement

  CountElement + 1

  If IsSprite(ball\id)
    With Ball
      \x = 200
      \y = 150
      \vy = 3
    EndWith
  EndIf

  If IsSprite(demo)
    RotateSprite(demo, -15, #PB_Absolute)
  EndIf

  If CountElement = 3
    FlipBuffers()
  EndIf
EndProcedure

Procedure onLoadError()
EndProcedure

Procedure gameLoop()
  resizeScreen(#True)

  ClearScreen(RGB(205, 92, 92))
  DisplayTransparentSprite(background, 0, 0)
  DisplayTransparentSprite(demo, 10, 20)
  RotateSprite(ball\id, 1, #PB_Relative)
  DisplayTransparentSprite(ball\id, ball\x, ball\y)

  With ball
    \y + \vy
    If \y < 0 Or \y > ScreenHeight() - 100
      \vy * -1
    EndIf
  EndWith

  FlipBuffers()
EndProcedure

Procedure resizeScreen(Center.b = #False)
   !var canvas = document.getElementsByTagName("CANVAS")[0];
   !var canvasRatio = canvas.height / canvas.width;
   !var windowRatio = window.innerHeight / window.innerWidth;
   !var width;
   !var height;

   !if (windowRatio < canvasRatio) {
   !    height = window.innerHeight;
   !    width = height / canvasRatio;
   !} else {
   !    width = window.innerWidth;
   !    height = width * canvasRatio;
   !}

   !canvas.style.width = width + 'px';
   !canvas.style.height = height + 'px';

   If Center = #True
   !    var style = canvas.style;
   !    style.marginLeft = "auto";
   !    style.marginRight = "auto";
   !    var parentStyle = canvas.parentElement.style;
   !    parentStyle.textAlign = "center";
   !    parentStyle.width = "100%";
    EndIf
EndProcedure