Building HTML5/Javascript Games with Delphi

[oldschoolguy]

Hello PGD Users,

In my database projects, I use TMS Webcore for web applications with Delphi. It's a transpiler that translates Pascal to JavaScript. I'm currently experimenting with whether it can also be used for web games.
The goal is to build PWA games that work both in the browser and on mobile.

These are just experiments, so they're not clean and still have many bugs, but in principle, they work surprisingly well.
The handling in the shooter Game is bad, it was the first try. Keyboard on the PC and Buttons on mobile devices. Android Google Pixel works well. Apple not yet.
But the jump and run "The Santa Game" seems usefull. Much work ahead of course.

https://sqlmanagement.de/tmstest/TMSShooter.html

https://sqlmanagement.de/Santa/TheSantaGame.html

Remember: Only experiments :-) quick and dirty

But I think usefull to know that this works with Delphi!

Comments welcome!


Greetings
Ralf

[SilverWarior]

I often wondered how powerful TMS Webcore can be for game development.

Would you be willing to tel how you managed to make these? Like what components did you use? How do you manage the game loop etc?

[oldschoolguy]

I often wondered how powerful TMS Webcore can be for game development.

Would you be willing to tel how you managed to make these? Like what components did you use? How do you manage the game loop etc?

Yes, of course.

With TMS Web Core, you program normally in Pascal. The ASM block is used to integrate JavaScript directly into the Pascal code.


I use the JavaScript method requestanimationframe(). requestAnimationFrame calls the animation function before each refresh of the browser window and creates smooth transitions from one frame to the next.
This is one of the few places where you have to lend a little help with JavaScript.

  asm
  requestAnimationFrame($mod.PascalProc);
  end

A Pascal procedure is passed. This is again written in regular Pascal and renders the game.


The shooter still used a timer, which is why it stutters. Requestanimationframe(), as used in Santagame, is much better. By passing the call time, the usual time methods are used to avoid constant speed and stuttering.


TWebPaintbox and TWebHTMLDiv are essentially used here.

Procedure PascalProc(time:double);
var
  starttime:TDatetime;
  deltatime:integer;
begin
  starttime:=now;
  deltatime:=MilliSecondOf(starttime-frmmain.lasttime);




  if frmMain.gamerunning then
  begin
    ...
    if not frmMain.gameover and not frmMain.gamefinished then
      frmmain.updategame(deltatime);
    frmmain.rendergame(deltatime);
    ...
  end;
  frmmain.lasttime:=starttime;


  if not frmMain.exitlevel then
  asm
    requestAnimationFrame($mod.PascalProc);
  end
  else
  asm
    location.reload();;
  end;
end;