Build 10 games and learn game development along the way in this fast paced game development course

Get the source code of 12 commercial games, loaded 50+ million times, and learn the secrets of game design

Learn how to make a successful Flash game from a real world example. Fully commented source code

Create realistic Flash physics games from scratch with advanced features, from Angry Birds to Crush the Castle

Creation of a Sokoban game with jQuery

When I said there are games you must be able to make in less than a day, obviously I meant in any language.

This is the jQuery version of the Sokoban game I made in less than 2Kb.

Or, more precisely, it’s the javascript version, powered by jQuery.

You should know the rules… click in the iframe and play using WASD keys.

Let’s take look at the script:

Line 7: loading jQuery

Line 9: function to be executed when the document is ready

Lines 10-16: map initialization. Unfortunately javascript does not support multi-dimensional array creation on the fly…

Lines 17-46: drawing the map. As you can see, all map elements are divs of different classes placed according to their position in the map. Movig objects, such as the player and the crates, are stylized with an high z-index to always stay on top of the map. Various objects are mapped this way:

0: empty tile
1: wall
2: place where to drop a crate
3: crate – crate divs are created with an unique id to indentify them when it’s time to be pushed by the player
4: player
5: crate on a place where to drop a crate (3+2)
6: player on a place where to drop a crate (4+2)

Lines 47-87: Core function… checks for a possible move, eventually moves player and crates and sees if the game is solved.

A game is solved where there are not places where to drop a crate without a crate on them. That is, there isn’t any 2 in the map.

Every time I move a crate, I change its id according to its new position.

Lines 88-103: Checking for key presses.

Hope you enjoy it.

Rate this post: 1 Star2 Stars3 Stars4 Stars5 Stars (12 votes, average: 4.50 out of 5)
Loading ... Loading ...
Learn how to make a successful commercial Flash game from a real world example: get the fully commented source code of Globez, a Flash game played millions of times which generated a four figure income. Limited copies available.

Get it now
Be my fan on Facebook and follow me on Twitter! Exclusive content for my Facebook fans and Twitter followers

This post has 14 comments

  1. Jason L.

    on June 14, 2010 at 8:47 pm

    Pretty cool! And just a heads up, Google Chrome threw a “malicious site” warning. I wasn’t able to get the source that threw it, but watch out.

  2. Emanuele Feronato

    on June 14, 2010 at 10:43 pm

    Thank you! Removed!!!

  3. majenn

    on March 5, 2011 at 8:25 am

    r u really the creator of sokoban game?
    im playing STAND ALONE VERSION just now i discover this game and it is really cool.

  4. Creation Of A Skoban Game With jQuery | jQuery Wisdom

    on March 31, 2011 at 6:34 pm

    […] Web Site Demo Download Share and Enjoy: […]

  5. art gabriel

    on May 21, 2011 at 2:34 am

    :) very nice…

  6. 10 Cool jQuery Developed Games | Code to Preload

    on October 11, 2011 at 5:59 am

    […] A Skoban gam completely made using jQuery. This is based on my previous Skoban game which was made using Flash. Source […]

  7. Alex

    on May 4, 2012 at 2:45 pm

    R button should be for restart:)

  8. Vincent

    on April 10, 2013 at 5:20 am

    I’m wondering if I can use your jquery code for myself. I have already used it and tweaked it up a bit containing a total of 10 levels of my own. I would like to have your permission to use your code before I go any farther.

  9. Emanuele Feronato

    on April 10, 2013 at 3:11 pm

    sure, use it as you want

  10. noone

    on June 29, 2013 at 12:49 pm

    This code don’t work!

  11. Create HTML5 tile based games like Sokoban in a quick with PuzzleScript - Emanuele Feronato

    on November 22, 2013 at 11:45 pm

    […] a fan of Sokoban game, if you are an old time reader of the blog you should remember at least the creation of a Sokoban game with jQuery, the complete Flash Sokoban game in less than 2KB, the Flash 3D Sokoban prototype with Flare3D and […]

  12. CodeTrain

    on April 9, 2014 at 5:24 am

    I was looking at the code and messing around and I want to know how to make multiple crates be able to be move by the player?

  13. Learn jQuery with jQuery 2.0 Development Cookbook, and start making games with it - Emanuele Feronato

    on April 10, 2014 at 11:09 pm

    […] the sole use of jQuery I was able to made complete prototypes of games like Sokoban, Bejeweled and […]

  14. 10 Cool jQuery Developed Games | jQuery4U | No.1 Resource for jQuery Developers

    on April 23, 2014 at 5:51 am

    […] A Skoban gam completely made using jQuery. This is based on my previous Skoban game which was made using Flash. Source […]

Thank you for the download!!

I hope you will find it useful and make something interesting out of it

To keep up to date with the blog, why don't you like my Facebook page and follow me on Twitter?

Want to learn more? Don't miss this:

Learn how to make a successful commercial Flash game from a real world example: get the fully commented source code of Globez, a Flash game played millions of times which generated a four figure income. Limited copies available.

Get it now

×