Complete Bejeweled prototype made with jQuery

Read all posts about "" game

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.

$(document).ready(function(){
	$("body").append('
').css({"background-color":"black","margin":"0"}); $("#marker").css({"width":"52px","height":"52px","border":"5px solid white","position":"absolute"}).hide(); var selectedRow=-1 var selectedCol=-1 var posX; var posY; var jewels=new Array(); var movingItems=0; var gameState="pick"; var bgColors=new Array("magenta","mediumblue","yellow","lime","cyan","orange","crimson","gray"); for(i=0;i<8;i++){ jewels[i]=new Array(); for(j=0;j<8;j++){ jewels[i][j]=-1; } } for(i=0;i<8;i++){ for(j=0;j<8;j++){ do{ jewels[i][j]=Math.floor(Math.random()*8); }while(isStreak(i,j)); $("#gamefield").append('
'); $("#gem_"+i+"_"+j).css({"top":(i*60)+10+"px","left":(j*60)+10+"px","width":"50px","height":"50px","position":"absolute","border":"1px solid white","cursor":"pointer","background-color":bgColors[jewels[i][j]]}); } } $(".gem").live("click",function(){ if(gameState=="pick"){ posY=$(this).position().top; posX=$(this).position().left; $("#marker").show(); $("#marker").css("top",posY-5).css("left",posX-5); if(selectedRow==-1){ selectedRow=(posY-10)/60; selectedCol=(posX-10)/60; } else{ posY=(posY-10)/60; posX=(posX-10)/60; if((Math.abs(selectedRow-posY)==1 && selectedCol==posX)||(Math.abs(selectedCol-posX)==1 && selectedRow==posY)){ $("#marker").hide(); gameState="switch"; gemSwitch(); } else{ selectedRow=posY; selectedCol=posX; } } } }); function checkMoving(){ movingItems--; if(movingItems==0){ switch(gameState){ case "revert": case "switch": if(!isStreak(selectedRow,selectedCol) && !isStreak(posY,posX)){ if(gameState!="revert"){ gameState="revert"; gemSwitch(); } else{ gameState="pick"; selectedRow=-1; } } else{ gameState="remove"; if(isStreak(selectedRow,selectedCol)){ removeGems(selectedRow,selectedCol); } if(isStreak(posY,posX)){ removeGems(posY,posX); } gemFade(); } break; case "remove": checkFalling(); break; case "refill": placeNewGems(); break; } } } function placeNewGems(){ var gemsPlaced = 0; for(i=0;i<8;i++){ if(jewels[0][i]==-1){ jewels[0][i]=Math.floor(Math.random()*8); $("#gamefield").append('
'); $("#gem_0_"+i).css({"top":"10px","left":(i*60)+10+"px","width":"50px","height":"50px","position":"absolute","border":"1px solid white","cursor":"pointer","background-color":bgColors[jewels[0][i]]}); gemsPlaced++; } } if(gemsPlaced){ gameState="remove"; checkFalling(); } else{ var combo=0 for(i=0;i<8;i++){ for(j=0;j<8;j++){ if(j<=5 && jewels[i][j]==jewels[i][j+1] && jewels[i][j]==jewels[i][j+2]){ combo++; removeGems(i,j); } if(i<=5 && jewels[i][j]==jewels[i+1][j] && jewels[i][j]==jewels[i+2][j]){ combo++; removeGems(i,j); } } } if(combo>0){ gameState="remove"; gemFade(); } else{ gameState="pick"; selectedRow=-1; } } } function checkFalling(){ var fellDown=0; for(j=0;j<8;j++){ for(i=7;i>0;i--){ if(jewels[i][j]==-1 && jewels[i-1][j]>=0){ $("#gem_"+(i-1)+"_"+j).addClass("fall").attr("id","gem_"+i+"_"+j); jewels[i][j]=jewels[i-1][j]; jewels[i-1][j]=-1; fellDown++; } } } $.each($(".fall"),function(){ movingItems++; $(this).animate({ top: "+=60" },{ duration: 500, complete: function(){ $(this).removeClass("fall"); checkMoving(); } }); }); if(fellDown==0){ gameState="refill"; movingItems=1; checkMoving(); } } function gemFade(){ $.each($(".remove"),function(){ movingItems++; $(this).animate({ opacity:0 },{ duration: 500, complete: function(){ $(this).remove(); checkMoving(); } }); }); } function gemSwitch(){ var yOffset=selectedRow-posY; var xOffset=selectedCol-posX; $("#gem_"+selectedRow+"_"+selectedCol).addClass("switch").attr("dir","-1"); $("#gem_"+posY+"_"+posX).addClass("switch").attr("dir","1"); $.each($(".switch"),function(){ movingItems++; $(this).animate({ left: "+="+xOffset*60*$(this).attr("dir"), top: "+="+yOffset*60*$(this).attr("dir") },{ duration: 500, complete: function(){ checkMoving(); } }).removeClass("switch") }); $("#gem_"+selectedRow+"_"+selectedCol).attr("id","temp"); $("#gem_"+posY+"_"+posX).attr("id","gem_"+selectedRow+"_"+selectedCol); $("#temp").attr("id","gem_"+posY+"_"+posX); var temp=jewels[selectedRow][selectedCol]; jewels[selectedRow][selectedCol]=jewels[posY][posX]; jewels[posY][posX]=temp; } function removeGems(row,col){ var gemValue = jewels[row][col]; var tmp = row; $("#gem_"+row+"_"+col).addClass("remove"); if(isVerticalStreak(row,col)){ while(tmp>0 && jewels[tmp-1][col]==gemValue){ $("#gem_"+(tmp-1)+"_"+col).addClass("remove"); jewels[tmp-1][col]=-1; tmp--; } tmp=row; while(tmp<7 && jewels[tmp+1][col]==gemValue){ $("#gem_"+(tmp+1)+"_"+col).addClass("remove"); jewels[tmp+1][col]=-1; tmp++; } } if(isHorizontalStreak(row,col)){ tmp = col; while(tmp>0 && jewels[row][tmp-1]==gemValue){ $("#gem_"+row+"_"+(tmp-1)).addClass("remove"); jewels[row][tmp-1]=-1; tmp--; } tmp=col; while(tmp<7 && jewels[row][tmp+1]==gemValue){ $("#gem_"+row+"_"+(tmp+1)).addClass("remove"); jewels[row][tmp+1]=-1; tmp++; } } jewels[row][col]=-1; } function isVerticalStreak(row,col){ var gemValue=jewels[row][col]; var streak=0; var tmp=row; while(tmp>0 && jewels[tmp-1][col]==gemValue){ streak++; tmp--; } tmp=row; while(tmp<7 && jewels[tmp+1][col]==gemValue){ streak++; tmp++; } return streak>1 } function isHorizontalStreak(row,col){ var gemValue=jewels[row][col]; var streak=0; var tmp=col while(tmp>0 && jewels[row][tmp-1]==gemValue){ streak++; tmp--; } tmp=col; while(tmp<7 && jewels[row][tmp+1]==gemValue){ streak++; tmp++; } return streak>1 } function isStreak(row,col){ return isVerticalStreak(row,col)||isHorizontalStreak(row,col); } });

Happy swapping. Would you add any feature?

Get the most popular Phaser 3 book

Through 202 pages, 32 source code examples and an Android Studio project you will learn how to build cross platform HTML5 games and create a complete game along the way.

Get the book

214 GAME PROTOTYPES EXPLAINED WITH SOURCE CODE
// 1+2=3
// 100 rounds
// 10000000
// 2 Cars
// 2048
// A Blocky Christmas
// A Jumping Block
// A Life of Logic
// Angry Birds
// Angry Birds Space
// Artillery
// Astro-PANIC!
// Avoider
// Back to Square One
// Ball Game
// Ball vs Ball
// Ball: Revamped
// Balloon Invasion
// BallPusher
// Ballz
// Bar Balance
// Bejeweled
// Biggification
// Block it
// Blockage
// Bloons
// Boids
// Bombuzal
// Boom Dots
// Bouncing Ball
// Bouncing Ball 2
// Bouncy Light
// BoxHead
// Breakout
// Bricks
// Bubble Chaos
// Bubbles 2
// Card Game
// Castle Ramble
// Chronotron
// Circle Chain
// Circle Path
// Circle Race
// Circular endless runner
// Cirplosion
// CLOCKS - The Game
// Color Hit
// Color Jump
// ColorFill
// Columns
// Concentration
// Crossy Road
// Crush the Castle
// Cube Jump
// CubesOut
// Dash N Blast
// Dashy Panda
// Deflection
// Diamond Digger Saga
// Don't touch the spikes
// Dots
// Down The Mountain
// Drag and Match
// Draw Game
// Drop Wizard
// DROP'd
// Dudeski
// Dungeon Raid
// Educational Game
// Elasticity
// Endless Runner
// Erase Box
// Eskiv
// Farm Heroes Saga
// Filler
// Flappy Bird
// Fling
// Flipping Legend
// Floaty Light
// Fuse Ballz
// GearTaker
// Gem Sweeper
// Globe
// Goat Rider
// Gold Miner
// Grindstone
// GuessNext
// Helicopter
// Hero Emblems
// Hero Slide
// Hexagonal Tiles
// HookPod
// Hop Hop Hop Underwater
// Horizontal Endless Runner
// Hundreds
// Hungry Hero
// Hurry it's Christmas
// InkTd
// Iromeku
// Jet Set Willy
// Jigsaw Game
// Knife Hit
// Knightfall
// Legends of Runeterra
// Lep's World
// Line Rider
// Lumines
// Magick
// MagOrMin
// Mass Attack
// Math Game
// Maze
// Meeblings
// Memdot
// Metro Siberia Underground
// Mike Dangers
// Mikey Hooks
// Nano War
// Nodes
// o:anquan
// One Button Game
// One Tap RPG
// Ononmin
// Pacco
// Perfect Square!
// Perfectionism
// Phyballs
// Pixel Purge
// PixelField
// Planet Revenge
// Plants Vs Zombies
// Platform
// Platform game
// Plus+Plus
// Pocket Snap
// Poker
// Pool
// Pop the Lock
// Pop to Save
// Poux
// Pudi
// Pumpkin Story
// Puppet Bird
// Pyramids of Ra
// qomp
// Quick Switch
// Racing
// Radical
// Rebuild Chile
// Renju
// Rise Above
// Risky Road
// Roguelike
// Roly Poly
// Run Around
// Rush Hour
// SameGame
// SamePhysics
// Save the Totem
// Security
// Serious Scramblers
// Shrink it
// Sling
// Slingy
// Snowflakes
// Sokoban
// Space Checkers
// Space is Key
// Spellfall
// Spinny Gun
// Splitter
// Spring Ninja
// Sproing
// Stabilize!
// Stack
// Stick Hero
// String Avoider
// Stringy
// Sudoku
// Super Mario Bros
// Surfingers
// Survival Horror
// Talesworth Adventure
// Tetris
// The Impossible Line
// The Moops - Combos of Joy
// The Next Arrow
// Threes
// Tic Tac Toe
// Timberman
// Tiny Wings
// Tipsy Tower
// Toony
// Totem Destroyer
// Tower Defense
// Trick Shot
// Tunnelball
// Turn
// Turnellio
// TwinSpin
// vvvvvv
// Warp Shift
// Way of an Idea
// Whack a Creep
// Wheel of Fortune
// Where's my Water
// Wish Upon a Star
// Word Game
// Wordle
// Worms
// Yanga
// Yeah Bunny
// Zhed
// zNumbers