Complete Bejeweled prototype made with jQuery

Bejeweled is one of the best games to code to learn the basics of programming. I already showed you how to build a working prototype of the game in my book, and I also published a 2KB version of the game (you can also find a more legible version here).

This time I am going to show you a fully working jQuery version. Everything, from the containers divs to the styles, have been made with jQuery, there isn’t a single HTML or CSS line.

This is the result, featuring gem swap, multiple combos, and everything you need to have in a Bejeweled game:

And this is the source code, without any comment, but quite clear. I can make a step by step tutorial if I receive a good feedback.

Happy swapping. Would you add any feature?

  • Awesome example! What about we add some score? Is possible to add some animation, like a particle falling when the color block is complete?

  • Bwakathaboom

    That’s pretty epic. +1 internets to you, good sir!

  • Christian

    A counter would be fine. People love counters.
    Haven’t dived into the code yet — did you implement a function that checks for the case where no further squares/tiles match?

  • Emanuele Feronato

    Featured to be added so far:

    * score or counter
    * no more moves check

  • Yvon

    is there any way to continue playing while new blocks are falling down? I’m not sure if that’s included in the original version, but the blocks fall a bit slowly and it interrupts the flow of the game.

    Also, the speed of the blocks falling- is this the fastest it can go, or is it CPU based?

  • Mehdi

    lol wow this is pure shit

  • Pingback: Elegant D » Complete Bejeweled prototype made with jQuery – Emanuele …()

  • Emanuele Feronato

    @yvon: no, it’s not cpu based, every animation has been set to a speed of 500ms. This value can be changed, so blocks can fall down more quickly.

  • That is very awesome!

  • Hi! Would you please consider adding this to github as a project? You would then get the benefit of allowing others to share it, update it when needed, and others could contribute back with pull requests, etc. It could really take off as a great basis for folks to make js games.

  • Emanuele Feronato

    good idea. I am trying to do it right now. By the way, it’s my 1st git so be patient…

  • Emanuele Feronato

    (one hour later)

    hmmm not my favorite mode to share the code… almost an hour has gone and what I got is an empty README file…

    https://github.com/triqui/jQuery-Bejeweled

    … :(

  • Gil

    Why do you bother working with JavaScript if Flash is the next gaming “platform”?

  • yhfea

    Umm… you cannot call your self a “PROgrammer” if you don’t know git.

  • awesome! you always give me a lot of things to learn, how long could I catch up with you !

  • Emanuele Feronato

    @yhfea: you’re right, anyway I refuse to use prompt line commands in 2011. Going to uninstall MINGW32, if there’s something better let me know.

    @Gil: messing with any kind of language is good to upgrade your skills. Probably this bejeweled game is useless, but you can learn a lot about jQuery animations from it. And use the new knowledge in your web projects

  • Diego

    Really good example, thanks :)

  • Bruce F

    Hey Emanuele,
    there’s something i’d really like you to give a tutorial on, or at least explain some of the theory behind it.
    that something is a flash game called “Slime Laboratory” and it has some really neat physics to it.
    a link is:
    http://www.miniclip.com/games/slime-laboratory/en/

    I’m sure the way that that little slime ball character is made is very confusing, but it’s so cool that i’d love to have a basic understanding of how it works.
    love your work and tutorials man, keep it up.
    thanks, bye

  • Hi Everyone

    Firstly I have to say I love this prototype, it is highly addictive. Anyway I have seen a few people asking for a counter/score functionality, if you add this (see below) after line 167 in the complete function on gemFade and add a div with ID score with a span inside it will create a very basic score system (you can easily change where it updates to).

    i = parseInt($(“#score span”).text());
    $(“#score span”).text((i+10));

    Anyway huge respect to Emanuelefor creating this prototype, I am going to keep working on it and once I have progressed it a little further I will upload my source code (Anyone progressed a no more moves function yet?).

    Cheers

  • Ayatullah

    Thaks for your efforts :)
    When I download the source code and try to play the game it become less effcient than the one in this page.

  • Richnou

    I tried to change the source to understand and take control of the code, and I’m confused on two points …
    – The “magic number 8” troubles me greatly: 8 colors, a grid of 8×8 squares … If I try to change (for say a 12×9 grid in 6 colors) it’s panic, nothing works. I’m probably wrong in my changes, but why not have created specific variables?
    – Variables i and j appear to be used for cols / rows and sometimes for rows or cols (in a square grid it does not matter)… But disturbing. In my “version”, i always use x and y for the same thing (but perhaps not in the correct way)

    Apart from these “details” (maybe I solve it by looking at your other sources) very good work!

  • cervi

    thanks, thanks thanks!!

  • Thanks a lot… this help me to create a game for practice my code… ;) Thanks really!!! Ur awesome!!!

  • Emanuele, thank you for the wonderful tutorial.

    There is a problem running this code with the latest jQuery because function “live” has been removed from jQuery. To run this example with the latest jQuery we need to replace line 27
    $(“.gem”).live(“click”,function(){
    with
    $(document).on(“click”,”.gem”, function(){

    I enjoy your HTML5 tutorials and examples. Keep them coming! :)

  • I suppose there is a missing somewhere?

  • Hi, maybe I am missing something elementary, but…

    I made a page with

    -html tag
    -head tag
    -script tag
    -URL for jquery CDN
    -close script tag
    -script tag
    the code above
    -close head tag
    -body tag
    -close body tag
    -close html tag

    and all I get is a blank page. What am I doing wrong? (I also tried to put
    the code in the body rather than in the head, with the same result). Could anyone
    help me please?

  • Ok, I managed to make it to work by linking to the version 1.8.3 of jquery. But I have
    been unable to put scores on as says Sistem3, all I get instead of the score is
    the string “NaN”… Could anyone help with this one?

  • Marin

    Anyone can make it “clean” diagonal lines also?

  • MD

    awesome post! i just on question if you don’t mind also, how can i alert user if they can match those button. only alert visitor if they can drag or swap and match 3 color. can’t figure it out.

    Thanks!

  • estelle

    Hi Emanuele,

    Cool stuff here ;)
    Have you a match3 game like this in html5, with annotations or with your great 5 hours support ?

    Warm regards ;)
    Estelle