HTML5 swipe controlled Sokoban game made with Phaser

About one year ago I made a quick 80 levels Sokoban game with PuzzleScript.

I also ported it to iOS (download it! It’s free!) where it was played with some people who found it one of the most difficult free game ever.

Now I am showing you how to make an HTML5 Sokoban game using Phaser.

First, let’s have a look at tht game we are going to create starting from this sprite sheet:

From left to right, respectively from 0 to 6, we have the floor, the wall, the spot where to drop a crate, the crate, the player, the crate over the spot where to drop a crate, and the player over the spot where to drop a crate

You control the player by swiping in the direction you want it to move. Have a try using the mouse:

If you have a mobile device, play it from this link

As usual, making games with Phaser is always fun an quick, as you can see from the fully commented source code:

Can you solve the level? I also can show you how to turn this in a complete game if I receive good feedback. Meanwhile, download the source code of the entire project.

  • James

    I would love to see how you could turn this into a full game! Especially when its touch screen optimised as above! Awaiting your return to this with baited breath!!

  • Yassine

    Thank you for all tutorials done with Phaser.
    just note :
    goFullScreen() function doesn’t work with the latest Phaser 2.2.0

    • Emanuele Feronato

      it’s working with my 2.2.0-RC8 on google chrome. What version and browser are you using?

  • Jacek Miecznikowski

    I’d like to see how to turn in the full functional game.
    Great stuff, thanks!

  • please turn this into a full game! I’m new to Phaser, really need more tutorials

  • Pingback: HTML5 swipe controlled Sokoban game made with Phaser step 2: adding keyboard controls and unlimited undos | Emanuele Feronato()

  • Really nice work as ever, Emanuele: thanks :)

  • Hi, and great tuto.

    I wanted to know, is the ios version developed with phaser ? and if yes which solution did you used to achieve it (cocoon, phonegap …etc)

    thanks.

    • Emanuele Feronato

      Hello Florian,
      I made it with puzzlescript http://www.puzzlescript.net/

      • All right, thank you for the answer.

        So, you don’t use phaser for this one, but have you ever try for another or have you an idea about the best way to put a phaser game into the appstore ?

        Cocoon seem’s to be great, games realised by ludey are all good qualities (especialy Slide Soccer and iBasket) , but as I read over the web, they still exist some issues with phaser.

        Maybe you know more about that.

        thx.

  • Sean.C

    COOL! I like this tutorial very much! Thank you! Hope for the full game version tutorial!

  • Conor Watson

    I seem to get the error “Uncaught TypeError: Cannot read property ‘input’ of undefined” on the following line:
    endX = game.input.worldX;

    Any idea why? Thanks for the tutorial.

  • Shianderu

    Hey, Emmanuele, how is it going?

    I’ve got a question: how can I add states to this prototype game of yours? I mean, if i want this game to have 5 stages, how can I do it?

    I try using “game.state.add(“level2″, level2);” after , but for some reason, it won’t work? Could you lend me some help?

    Thanks!

    • Emanuele Feronato

      Did you create level2 state? What error message do you get?