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

jQuery-only working game like “Threes” (or “1024″, or “2048″, or…)

Did you play Threes or one of its “inspired-by” games like 1024 or 2048?

There is a grid filled with numbers, and you have to make them slide up, down, left and right. If two numbers with the same value get in touch, they merge into a new number which is the sum of previous number.

Have a look at the free 2048 game to see what I mean.

Here you will find a jQuery only version of 2048 using only sliding «div»s to make it work – I did not even use an array to store grid information – with only a different way to calculate the score and the “combo” feature: placing three “two”s in a row won’t give you a “4″ and a “2″ but an “8″. A smart way to quickly get higher numbers.

Try the game:

Slide numbers with WASD keys. What’s your best score?

And this is the jQuery only source code:

I did not include any comment because a jQuery only game is just an exercise. Soon I will show you how to make an HTML5 version of the game with some popular framework, and you’ll get commented code.

Meanwhile you can download the source code of the game.

Rate this post: 1 Star2 Stars3 Stars4 Stars5 Stars (7 votes, average: 4.00 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 9 comments

  1. acebow

    on March 28, 2014 at 8:55 pm

    Thanks for the interesting example. Good code! Thanks.

  2. Game 2048 « Jogos, Quebra-Cabeças, Tutoriais para Games – WacaWaca

    on March 28, 2014 at 11:27 pm

    […] se tornou bastante popular na internet e tem feito muitos fãs ultimamente. O excelente programador Emanuele Feronato criou uma versão do game inteiramente em Javascript e utilizando somente DIVs. O resultado é esse […]

  3. PlayGB

    on March 29, 2014 at 10:21 pm

    Very good, thanks for sharing the source code, but I have a question. If I develop HTML5 or jQuery games, they can stole my source code and modify the game, right? Is there a way to protect the code and resources?

  4. MC

    on March 30, 2014 at 6:41 pm

    it does not work for me.
    i’m using firefox 26.0 on pc, OS: windows 7
    … it worked on chrome

  5. Sevas

    on April 1, 2014 at 6:20 am

    169472

  6. Best of JavaScript, HTML & CSS – Week of March 24, 2014 | Flippin' Awesome

    on April 2, 2014 at 2:23 pm

    […] Emanuele Feronato shares the source code for building a game like Threes using HTML and jQuery.jQuery-only working game like “Threes” (or “1024?, or “2048?, or…) […]

  7. How to create a complete HTML5 “2048″ game with Phaser - Emanuele Feronato

    on April 4, 2014 at 5:35 pm

    […] days ago I showed you ho to create a jQuery-only working game like “Threes” (or “1024?, or “2048?, or…). Now it’s time to do the same game using HTML5 with Phaser […]

  8. Marcio Andrey Oliveira

    on April 5, 2014 at 4:56 am

    PlayGB: protection of HTML code was a concern of mine too but unfortunately there is no way you can prevent your code to be stolen.

  9. Y8

    on May 24, 2014 at 1:54 pm

    @PlayGb , @Marcio Andrey Oliveira
    You can protect javascript code with https://jscrambler.com
    Register in that site to learn more

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

×