
HTML5 Games Workshop: Make a Platformer Game with JavaScript - mariuz
https://hacks.mozilla.org/2017/04/html5-games-workshop-make-a-platformer-game-with-javascript/
======
TazeTSchnitzel
This teaches a bad practice: frame-rate-dependent movement speed. Perhaps it
runs fine on your 3GHz 16-thread i7 Chromebook Pixel with a single tab open
that achieves a consistent 60fps, but it makes the game unplayable on machines
achieving slower or less consistent framerates (like mine, which has a
somewhat overburdened Firefox process on a mere 4-thread mobile i5).

If you're writing a game which, like this one, does not run at a fixed
guaranteed framerate, you should vary movement speed based on the time delta
between frames, i.e. instead of `x += 2.5` on every frame, do `x += (2.5 * 60)
* seconds_since_last_frame`.

~~~
CJefferson
No, that's also a terrible idea. It makes problems like jumps that are easier,
or harder (maybe impossible) to achieve based on frame rate. Games used to do
this, now noone does as it leads to impossible to fix bugs and weird physics
problems.

The best idea (but i don't know how to do this in is) is to run your engine at
60fps (say), then skip drawing if you are behind (but then always draw at
least every third frame, if someone's computer isn't good enough to even run
the engine). If you want to go above 60fps, then extrapolate between two
states.

EDIT: If you want to see an example of this, see for example
[https://www.quake3world.com/forum/viewtopic.php?f=13&t=2170](https://www.quake3world.com/forum/viewtopic.php?f=13&t=2170)
, which is a big investigation into the "best frame rate" to play Quake 3 at,
to run fastest / jump highest.

~~~
p0nce
Fully agreed. You can certainly deal with some aspects of variable framerate
integration. But it's by far a better solution, more future proof even, to
just have a fixed number of iterations by second and don't account for time
deltas in integration.

My physics-based game is using the method argued against. Never again,
integrating every behaviour over time got sometimes surprisingly hard. It also
costs a lot of exp() and log() calls.
[https://auburnsounds.itch.io/vibrant](https://auburnsounds.itch.io/vibrant)
(of course multiplayer is impossible now)

Some of the AI is still framerate-dependent, because:

    
    
        // fixed framerate
        if (randomFloat0To1() < 0.1f)
            doThis();
    

becomes a Poisson distribution sampling.

~~~
strainer
We do also loose much accuracy/stability of physics info when varying
timesteps, without adjusting velocities to the new half timestep (eg. verlet
type refinement) which is a bit demanding to do most accurately.

------
james-skemp
I was wondering what framework they used, and am glad to see them use Phaser.

The TypeScript definitions are pretty nice (at least for the last official 2.x
release), so if you're interested in learning TypeScript it's a great way to
start.

Life has gotten in the way so I've slowed down, but I kept track of the Phaser
tutorials I followed at
[https://github.com/JamesSkemp/PhaserTutorials](https://github.com/JamesSkemp/PhaserTutorials)
(and converted the later tutorials to TypeScript while I was following them).

~~~
k__
Phaser is a good choice for TypeScript, as most game engines it has a rather
big API and TypeScript makes working with it a charm.

------
JohnHammersley
Am I the only one who clicked the link expecting to see Citadel Minatures
recreated in 2D in HTML5?

~~~
SketchySeaBeast
In the grim darkness of the far future, there is only <canvas>!

------
exodust
I had hopes, but then played the game. It's very basic and doesn't work on
mobile browsers such as Firefox on Android and iOS, nor iOS Safari. Doesn't
load in desktop IE11. No touch support.

HTML5 games seem to be stuck in a pattern of ultra-simple design, limited
browser support and poor responsive characteristics - what HTML should be good
at. Even a graceful degrade is absent.

Very simple games should counter-balance that simplicity with awesome cross
browser and mobile support.

Not trying to discredit the educational efforts, but perhaps making a
dedicated windows or native app game would have been better to teach things
like animating sprites and physics, where the end result sits more comfortably
on the platform it was made for.

~~~
Blaiz0r
It can be done. but I don't feel it was the purpose of the article.

This game has better support: not mobile however...

[http://wilds.io/](http://wilds.io/)

------
z3t4
Developing a "HTML5" game is a very great experience. The only HTML you need
though is <!DOCTYPE html><meta charset="utf8"><canvas></canvas><script> ...
</script> The rest is just JavaScript and interaction with the canvas. And
writing a server in NodeJS is almost trivial if you already know JavaScript. I
recommend not using a game engine or framework! And as a general advice,
actually don't do much abstraction at all! In-line all functions within the
animation/render/game loop. Your next weekend project should be a ".io" game,
it's a lot of fun!

------
irrational
I'm going to try going through this workshop with my kids. One of the
challenges of teaching my kids to program is finding interesting projects that
are within their scope of interest. I've tried MindStorms, Ardrino, and
various online tutorials but so far nothing has interested them for very long.
Maybe making games will interest them.

~~~
paulcole
Maybe programming's just not their thing?

------
0XAFFE
CrossCode[1] is written in Impact[2] and its a realy awesome game.

So this seem to be possible.

[1] [http://www.cross-code.com/](http://www.cross-code.com/) [2]
[http://impactjs.com/](http://impactjs.com/)

------
1ba9115454
Looks like you can develop in the cloud [https://phaser.io/tutorials/getting-
started/part3](https://phaser.io/tutorials/getting-started/part3)

I've used Cloud9 for ruby on rails and it's a great way to develop.

~~~
movedx
I've recently been using vim inside of tmux on a remote server to "replicate"
what C9 offers. It's rather nice and I'm enjoying it a lot, but I also found
C9 to be pretty awesome too.

------
vatotemking
I want to learn more about js game dev. What other frameworks are there (other
than phaser)?

------
twoquestions
Has anyone here used Phaser (the framework in the article) or any other JS
technology to make a game that they ultimately made money off of?

I understand engines like Unity and Unreal can now target JS as a compile
target, but most of the games I play are native.

~~~
dmwallin
I actually currently work at a company that makes playable mobile
advertisement games using web technologies. We have our own engine though.

~~~
kranner
TreSensa?

~~~
dmwallin
Yup!

~~~
kranner
Cool :) I have a game published with you guys.

------
jeppz
A Warhammer platformer? sounds odd.. wait, not that games workshop

------
richardboegli
REMOVED

