Fork me on GitHub

javascript physics made easy
and event management easier


If you don't already have, please take a look at smileyFaces, a little game I developed with boxboxevents, to let you have an overview of the possibilities of the framework.

In the following document, I will explain to you step by step how to make a simple version of smileyFaces to introduce you to boxboxevents.

Like smileyFaces, it is playable on desktop/tablet/mobile in any orientation ...

Try it! - All sources for the following examples

This project includes a simple stylesheet style.css and the following scripts :

1) Creation of the world

First, you create the world, providing the canvas + some options (only canvas is mandatory, see api documentation ).

As you'll see, you can choose to disable some types of event listeners (ex : if your game only uses touch, you don't wan't mouse or key events).

You can apply boundaries to your game (so you won't have to manage them manually).

Try it! (you'll only see an empty world ...)

2) Creation of entities / Walls

Now that we have a world, let's put some walls around (to prevent the ball to get out).

The viewport is smaller than the world and doesn't have the same ratio, so you won't see all your walls. We'll add the panning ability at the end, so you can navigate along your world.

Try it!

3) Creation of entities / Player

Now that we have a stage, let's add the player. As you can see, it has a callback that will turn it back to blue when it hits the bottom wall.

Try it!

4) Creation of entities / Blocks

After the player, let's add some blocks. The blockConfig var acts like a reusable template for each created blocks. As you can see, if the block is hit hard enough by the player, it will turn to black and the player will turn to red, if it hits hard enough the bottom the block will be destroyed.

Try it!

5) Creation of entities / Crates

Finally, like we added some blocks, we add 3 crates.

Try it!

6) Interraction : mouse/touchDraggable (type:eventDrag)

Except for the boundaries of the world, you could do quite everything above with the original boxbox. Now, let's add some interraction with some new features from boxboxevents !

We'll add the ability to launch the player by dragging, with mouse or touch (angry birds like).

Explanation are in the comments in the code.

Try it! (Now, you can launch the player and the viewport tracks down the player)

7) Interraction : mouse/touchDraggable (type:regularDrag)

Previously we used the eventDrag type for mouse/touchDraggable, now we are going to make the crates draggable (multitouch style).

Try it! (Play with the crates, plurality of ones at a time on multitouch - either with more than one touch on each one if you dare !)

8) Interraction : mouse/touchPan + mousewheelZoom

The game is beginning to look good, but still, we can't navigate through the world, let's add some panning/pinching/zooming ability.

Try it! (Now, move your world with your mouse or finger, zoom in/out with your mousewheel or by pinching with your fingers)

9) Viewport api

Center the viewport on your player at the beginning, with only one line of code (you specified the boundaries on your world, boxboxevents will take care about repositionning, rescaling, etc ...)

Try it!


I hope you've found this introduction/tutorial helpful. For further infos, don't hesitate to check out the api documentation, or any of the sources on my github repo.

comments powered by Disqus