2017-05-18

Get Started

This is just a short overview how to setup a very simple game loop with ES6 (JavaScript) using classes.

The following code sections are pretty easy to understand

Note that in many cases you need to use ES6's arrow operator => to make sure, you are accessing the correct this. Otherwise you will often get the error "this.method is not a function". That happens because when accessing this from anonymous methods, this points to the object of the anonymous method, not the object your calling it from.

In the HTML snippet, we set up a simple X3D scene with a ground and a small bar.

In the JavaScript main.js we create a game object. In Game.js the constructor sets up the game object and initializes the game loop to be triggered every 10 ms. We keep track of the pressed buttons (WASD) with booleans and move the bar accordingly.

This is what you will see, you can move the bar around with the WASD keys.

Have fun :)

PS: To develop this into a real game, have a look at the tutorial at MDN Developers, which is for 2D games with canvas, but much of it can be applied to our system as well: Tutorial