[Beginner] Javascript browser game from scratch

[ciro64 ciro64]

I made a tutorial!

Rectangle Game Tutorial

I introduce concepts one by one. Or rather, I throw them at you and you see immediately what it does. It's not a proper introduction to programming concepts in a more isolated way, so people who never touched code before might feel a little overwhelmed. For that reason, I intend to do another tutorial bridging that gap if my motivation keeps up, and then more advanced ones after that.

Let me know what you think of it, or if there's any problems or questions.

Thanks for reigniting my gamedev passion, RGT!

 

[jul]

I would have used requestAnimationFrame instead of setInterval

The frequency of calls to the callback function will generally match the displayrefresh rate.

For that specific reason

Window: requestAnimationFrame() method - Web APIs | MDN

The window.requestAnimationFrame() method tells the browser you wish to perform an animation. It requests the browser to call a user-supplied callback function before the next repaint.

developer.mozilla.org

 

[JustLooking123]

I would have used requestAnimationFrame instead of setInterval

I think the main goal in this tutorial is to provide a general idea about how things would work for beginners.

Using requestAnimationFrame is better, but i think it can be considered as a technical detail.

I think this tutorial is well designed overall, and fulfills its purpose.
Also, ciro64 said he might create more tutorials to fill the gaps.

 

[ciro64 ciro64]

I would have used requestAnimationFrame instead of setInterval



For that specific reason

Window: requestAnimationFrame() method - Web APIs | MDN

The window.requestAnimationFrame() method tells the browser you wish to perform an animation. It requests the browser to call a user-supplied callback function before the next repaint.

developer.mozilla.org

Thank you for looking at the tutorial!

I decided to use setInterval for the sake of simplicity.

If I used requestAnimationFrame instead, I'd either have to:

1. Multiply the movement with delta time. While it would have been fine for this game, I plan to make tutorials that build on top of this one, introducing concepts of acceleration, gravity and platforming. In those more complex cases, it's a bad idea to use delta time in the logic loop because it introduces instabilities in the game physics, which can affect the gameplay quite a lot.
   
   I don't think delta time is a bad thing on its own, but I've seen tutorials and even game engines in the past create a bad habit in developers by encouraging them to use it everywhere.
   .
2. Handle the drawing at every requestAnimationFrame call and the game loop in some other way. A good way I found to do this is to calculate how much time has passed from the last animation frame and advance logic frames accordingly. This method also compensate for stutters unlike setInterval.
   
   But like @JustLooking123 said, I want to keep things simple by introducing them one by one. But in a future tutorial, I might introduce complex loop handling.

 

[jul]

I think the main goal in this tutorial is to provide a general idea about how things would work for beginners.

Using requestAnimationFrame is better, but i think it can be considered as a technical detail.

I think this tutorial is well designed overall, and fulfills its purpose.
Also, ciro64 said he might create more tutorials to fill the gaps.

I understand that, setInterval is definitely the most concise and straight forward approach, however animation stuttering tends to ruin everything, no matter how well your sprites look, no matter how hard you tried to optimize the rest of the code, end result still is disappointing and there's nothing you can do about it, except sync with refresh rate...