Learn how Phaser manages draggable objects by making the HTML5 engine behind Rush Hour game

Do you know Rush Hour game?

From Wikipedia: Rush Hour is a sliding block puzzle invented by Nob Yoshigahara in the 1970s. It was first sold in the United States in 1996. It is now being manufactured by ThinkFun (formerly Binary Arts).

The goal of the game is to get the red car out of a six-by-six grid full of automobiles by moving the other vehicles out of its way. However, the cars and trucks (set up before play according to a puzzle card) obstruct the path which makes the puzzle harder.

This is the perfect game to create to show you the features Phaser puts at our disposal when it’s time to drag objects. You can define a sprite to be draggable, lock it on an axis, make it snap to a grid when you drag it or when you release it, define a bounding box which the sprite cannot cross while dragging, and there are events to trigger functions when you start and stop dragging.

This way, using only draggable sprites, I made this prototype of the first level:

Each rectangle is a car or a truck, drag them around to see how they move, snap and react as if there was some kind of collision system. But there isn’t. You are just dragging sprites with some constraints.

Here is the source code, with all required comments:

Have fun designing your own levels, and download the source code.

  • miriam

    HI!!

    first of all thank you! it’s amazing learn with this website!

    This code up there is javascript?

    I tried to download the code of rush hour game but when I opened in my browser (the html) I can’t see anything (all the sources are in the sabe folder – i only dowloaded from here).

    Tks!

    • Emanuele Feronato

      You should have a web server installed on your computer, try WAMP http://www.wampserver.com/en/ or MAMP https://www.mamp.info/en/ according to the OS you are using

      • miriam

        I could not…
        I tried to get the code that you left up here and put in a html file and also could not ..

        The only thing I did was open
        pasted the code that you put here
        and

        thanks in advance!

  • Adibas03

    Thanks a bunch, this just saved my ass.
    Been looking for this for about 6 months.

  • Pingback: Phaser Progress. – Site Title()