Picture Puzzle Game using Jquery

In this article, we will understand how to create a picture puzzle game with the help of jquery. Puzzle game consists of an image which is divided into small parts. Images are randomly arranged on the puzzle board. You have to rearrange the images in proper order. There are no limitations for moves or time. You can take your own time to complete this puzzle.

Example 1:

<! DOCTYPE html>    
<html>    	
    <head>    
        <meta http-equiv = "Content-Type"    
            content = "text/html; charset=UTF-8" />    
        <title> Example of  countdown timer using jquery </title>    
        <meta name = "description"/>    
        <meta content = "width=800, initial-scale=1"    
        name = "viewport" />    
<script src =    
"https://code.jquery.com/jquery-3.5.1.min.js">    
        </script>                 
        <script src =    
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"> </script>            
<style>  
@import url(https://fonts.googleapis.com/css?family=Titillium+Web:400,200,200italic,300,300italic,900,700italic,700,600italic,600,400italic);  
<style>
body {
  margin: 0 auto;
  width: 100%;
  height: 100%;
background-color: #c7c7c7;
}
html {
  margin: 0 auto;
  width: 100%;
  height: 100%;
background-color: #c7c7c7;
background-image: url("data:image/svg+xml,%3Csvg width='42' height='44' viewBox='0 0 42 44' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Page-1' fill='none' fill-rule='evenodd'%3E%3Cg id='brick-wall' fill='%23404040' fill-opacity='0.4'%3E%3Cpath d='M0 0h42v44H0V0zm1 1h40v20H1V1zM0 23h20v20H0V23zm22 0h20v20H22V23z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
h1 {  
  font-weight: 200;  
  font-size: 20px;  
  padding: 10;  
  margin: 0;  
  line-height: 1;  
  color: red;  
  letter-spacing: 1px;  
  text-align: center;  
}
#container {
  width: 835px;
  height: 400px;
  padding: 0;
  position: absolute;
  top: 8%;
  left: 50%;
  transform: translate(-48%, -0%);
}
.me {
  position: relative;
  background-size: 800px 400px;
  background-repeat: no-repeat;
  display: inline-block;
  margin: 2.2px;
  margin-top: -0.5px;
  border-radius: 10px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  transition: .2s;
}
.full {
  height: 400px;
  width: 800px;
  border-radius: 15px;
}
.prevent_click{
    pointer-events: none;
}
.correct {
  border-radius: 0px;
  box-shadow: 0 0 0 transparent, 0 0 0 transparent;
  animation: corect .5s ease;
  animation-delay: .2s;
}

@keyframes corect {
  0% {
    transform: scale(1);
    border-radius: 10px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  }
  50% {
    transform: scale(1.25);
    border-radius: 5px;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
  }
  100% {
    transform: scale(1);
    border-radius: 0px;
    box-shadow: 0 0 0 transparent, 0 0 0 transparent;
  }
}
.pre_img{
    margin-top: 10px; 
    width: 100%;
    position: absolute;
    left: 100px;
  }

  .pre_img li {
    display: inline-block;
    list-style: none;
  }
  .pre_img li img{
    width: 150px;
    height: 75px;
    position: relative;
    cursor: pointer;
  }

.cover {
  display: none;
  position: absolute;
  background-color: rgba(0,0,0,0.38);
  width: 100%;
  height: 100%;
  z-index: 9999;
}

.score {
  margin: 13% auto;
  padding: 20px;
  background: #fff;
  border: 1px solid #666;
  width: 300px;
  box-shadow: 0 0 50px rgba(0,0,0,0.8);
  position: relative;
}

#scr_head {
  text-align: center;
  font-weight: 600;
  font-size: 30px;
  font-family: cursive;
  color: #3d3d3d;
}

#scr_time {
  text-align: center;
  font-weight: 600;
  font-size: 22px;
  font-family: cursive;
  color: #3d3d3d;
}

#scr_moves {
  text-align: center;
  font-weight: 600;
  font-size: 22px;
  font-family: cursive;
  color: #3d3d3d;
}
.start {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 18px 45px;

}

.reset {
  position: absolute;
  margin: 0 auto;
  padding: 18px 45px;
  left: 50%;
  transform: translate(-50%,120px);
}

.OK {
  padding: 8px 25px;
  float: right;
  cursor: pointer;
}
.button { 
  margin: 0px 10px 10px 0px;
  border-radius: 10px;
  font-family: cursive;
  font-size: 25px;
  color: #FFF;
  text-decoration: none;
  background-color: #E74C3C;
  border-bottom: 5px solid #BD3E31;
  text-shadow: 0px -2px #BD3E31;
  z-index: 999;
  transition: all 0.1s;
  -webkit-transition: all 0.1s;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
.button:active {
  border-bottom: 1px solid #BD3E31;
}
.i {
	text-align: center;
	font-family: cursive;
	font-weight: 550;
	color: #3c3c3c;
}
</style>
<body>
<h1> Example Puzzle picture game using Jquery </h1>
<div id = "container">	
	<a href="#" class="button start"> Start </a>
	<div class="box">	
		<div class="me full"> </div>
	</div>
	<div class = "pre_img">	
		<li data-bid="0"> <img src="https://preview.ibb.co/kMdsfm/kfp.png"> </li>
		<li data-bid="1"> <img src="https://preview.ibb.co/kWOEt6/minion.png"> </li>
		<li data-bid="2"> <img src="https://preview.ibb.co/e0Rv0m/ab.jpg"> </li>	
		<li data-bid="3" id="upfile1"><img src="https://image.ibb.co/cXSomR/upload1.png" /></li>
		<input type="file" name="image" id="file1" style="display: none">
	</div>
	<div align="center"><a href="#" class="button reset" align="center">Reset</a> </div>
</div>

<div class="cover" >
	<div class="score">
		<p id="scr_head"> ? Puzzel Solved ? </p>
		<p id="scr_time"> Time : <span id="min">00</span> Min <span id="sec"> 00 </span> Sec </p>
		<p id="scr_moves"> Moves : <span id="moves"> </span> </p>
		<p class="i">developed by mayur birle</p>
		<div class="button OK"> OK </div>
	</div>
</div>
$(document).ready(function() {
	var box = $(".box"),
		orginal = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17],
		temp = orginal,
		x = [],
		sec = 0,
		date1,date2,
		moves = 0,
		mm = 0,
		ss = 0,
		upIMG,
		images = ["https://preview.ibb.co/kMdsfm/kfp.png","https://preview.ibb.co/kWOEt6/minion.png","https://preview.ibb.co/e0Rv0m/ab.jpg"]
		img = 0;
	$('.me').css({"background-image" : 'url('+images[0]+')'});
	$(".start").click(function() {
		$(".start").addClass('prevent_click');
		$(".start").delay(100).slideUp(500);
		$(".full").hide();
		$(".pre_img").addClass("prevent_click");
		
		date1 = new Date();
		Start();
		return 0;
	});
	function Start() {
		randomTile();
		changeBG(img);
		var count = 0,
			a,
			b,
			A,
			B;
		$(".me").click(function() {
			count++;
			if (count == 1) {
				a = $(this).attr("data-bid");
				$('.me_'+a).css({"opacity": ".65"});
			} else {
				b = $(this).attr("data-bid");	
				$('.me_'+a).css({"opacity": "1"});
				if (a == b) {
				} else {
					$(".me_" + a)
						.addClass("me_" + b)
						.removeClass("me_" + a);
					$(this)
						.addClass("me_" + a)
						.removeClass("me_" + b);
					$(".me_" + a).attr("data-bid", a);
					$(".me_" + b).attr("data-bid", b);
				}
				moves++;
				swapping(a, b);
				checkCorrect(a);
				checkCorrect(b);
				a = b = count = A = B = 0;
			}
			if (arraysEqual(x)) { 
				date2 = new Date();
				timeDifferece();
				showScore();
				return 0;
			}
		});
		return 0;
	}

	function randomTile() {
		var i;
		for (i = orginal.length-1; i >= 0; i--) {
			var flag = getRandom(0, i);
			x[i] = temp[flag];
			temp[flag] = temp[i];
			temp[i] = x[i];
		}
		for (i = 0; i < orginal.length; i++) {
			box.append(
				'<div  class="me me_' + x[i] + ' tile" data-bid="' + x[i] + '"></div>'
			);
			if ((i + 1) % 6 == 0) box.append("<br>");
		}
		i = 17;
		return 0;
	}

	function arraysEqual(arr) {
		var i;
		for (i = orginal.length - 1; i >= 0; i--) {
			if (arr[i] != i) return false;
		}
		return true;
	}
	function checkCorrect(N1) {
		var pos = x.indexOf(parseInt(N1, 10));
		if (pos != N1) {
			return;
		}
		$(".me_" + N1).addClass("correct , prevent_click ");
		return;
	}
	function swapping(N1, N2) {
		var first = x.indexOf(parseInt(N1, 10)),
			second = x.indexOf(parseInt(N2, 10));
		x[first] = parseInt(N2, 10);
		x[second] = parseInt(N1, 10);
		return 0;
	}
	function getRandom(min, max) {
			return Math.floor(Math.random() * (max - min + 1)) + min;
		}
	function timeDifferece(){
		var diff = date2 - date1;
		var msec = diff;
		var hh = Math.floor(msec / 1000 / 60 / 60);
		msec -= hh * 1000 * 60 * 60;
	 	mm = Math.floor(msec / 1000 / 60); // Gives Minute
		msec -= mm * 1000 * 60;
		ss = Math.floor(msec / 1000);		// Gives Second
		msec -= ss * 1000;
		return 0;
	}
	function changeBG(img){	
		if(img != 3){
		$('.me').css({
			"background-image" : "url("+images[img]+")"
		});
		return
		}
		else
			$('.me').css({"background-image" : "url("+upIMG+")"});
	}
	$('.pre_img li').hover(function(){
			img = $(this).attr("data-bid");
			changeBG(img);

		});
	function showScore(){
		$('#min').html(mm);
		$('#sec').html(ss);
		$('#moves').html(moves);
		setTimeout(function(){
		$('.cover').slideDown(350);
		},1050);
		return 0;
	}
	$('.OK').click(function(){
		$('.cover').slideUp(350);
	});
	$('.reset').click(function(){
		$(".tile").remove();
		$("br").remove();
		$(".full").show();
		$(".start").show();
		$(".pre_img, .start").removeClass("prevent_click");	
		temp = orginal;
		x = [];
		moves =  ss = mm = 0;
		return 0;
	});
	$("#upfile1").click(function () {
 	   $("#file1").trigger('click');
	});

	$("#file1").change(function(){
        readURL(this);
    });
});	
</script>
</body>
</html>

Explanation:

In the above example, we created an example of picture puzzle game using jquery. In this we can move the pictures to place in exact poistion.

Output:

Folowing is the output of this example.

Example 2:

<! DOCTYPE html>    
<html>    
    <head>    
        <meta http-equiv = "Content-Type"    
            content = "text/html; charset=UTF-8" />    
        <title> Example of  countdown timer using jquery </title>    
        <meta name = "description"/>    
        <meta content = "width=800, initial-scale=1"    
        name = "viewport" />    
<script src =    
"https://code.jquery.com/jquery-3.5.1.min.js">    
        </script>                 
        <script src =    
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"> </script>            
<style>  
@import url(https://fonts.googleapis.com/css?family=Titillium+Web:400,200,200italic,300,300italic,900,700italic,700,600italic,600,400italic);  
<style>
body {
  margin: 10 auto;
  width: 100%;
  height: 100%;
background-color: #c7c7c7;
background-image: url("data:image/svg+xml,%3Csvg width='42' height='44' viewBox='0 0 42 44' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Page-1' fill='none' fill-rule='evenodd'%3E%3Cg id='brick-wall' fill='%23404040' fill-opacity='0.4'%3E%3Cpath d='M0 0h42v44H0V0zm1 1h40v20H1V1zM0 23h20v20H0V23zm22 0h20v20H22V23z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
html {
  margin: 0 auto;
  width: 100%;
  height: 100%;
background-color: #c7c7c7;
}
h1 {  
  font-weight: 400;  
  font-size: 20px;  
  padding: 0;  
  margin: 0;  
  line-height: 1;  
  color: red;  
  letter-spacing: 1px;  
  text-align: center;  
}
</style>
<body>
<h1> Example Puzzle picture game using Jquery </h1>
<center>
<canvas id="canvas"> </canvas>
<br />
<label for="difficulty"> Difficulty </label>
<input type="range" min="2" max="16" value="4" id="difficulty" />
<script>
 const PUZZLE_HOVER_TINT = "#009900";
const img = new Image();
const canvas = document.querySelector("#canvas");
const stage = canvas.getContext("2d");
let difficulty = 4;
let pieces;
let puzzleWidth;
let puzzleHeight;
let pieceWidth;
let pieceHeight;
let currentPiece;
let currentDropPiece;
let mouse;
img.addEventListener("load", onImage, false);
img.src = "https://asyncbanana.github.io/html5-canvas-puzzle/mke.jpg";
function initPuzzle() {
  pieces = [];
  mouse = {
    x: 0,
    y: 0
  };
  currentPiece = null;
  currentDropPiece = null;
  stage.drawImage(
    img,
    0,
    0,
    puzzleWidth,
    puzzleHeight,
    0,
    0,
    puzzleWidth,
    puzzleHeight
  );
  createTitle("Click to Start Puzzle");
  buildPieces();
}
function setCanvas() {
  canvas.width = puzzleWidth;
  canvas.height = puzzleHeight;
  canvas.style.border = "1px solid black";
}

function onImage() {
  pieceWidth = Math.floor(img.width / difficulty);
  pieceHeight = Math.floor(img.height / difficulty);
  puzzleWidth = pieceWidth * difficulty;
  puzzleHeight = pieceHeight * difficulty;
  setCanvas();
  initPuzzle();
}
function createTitle(msg) {
  stage.fillStyle = "#000000";
  stage.globalAlpha = 0.4;
  stage.fillRect(100, puzzleHeight - 40, puzzleWidth - 200, 40);
  stage.fillStyle = "#FFFFFF";
  stage.globalAlpha = 1;
  stage.textAlign = "center";
  stage.textBaseline = "middle";
  stage.font = "20px Arial";
  stage.fillText(msg, puzzleWidth / 2, puzzleHeight - 20);
}
function buildPieces() {
  let i;
  let piece;
  let xPos = 0;
  let yPos = 0;
  for (i = 0; i < difficulty * difficulty; i++) {
    piece = {};
    piece.sx = xPos;
    piece.sy = yPos;
    pieces.push(piece);
    xPos += pieceWidth;
    if (xPos >= puzzleWidth) {
      xPos = 0;
      yPos += pieceHeight;
    }
  }
  document.onpointerdown = shufflePuzzle;
}
function shufflePuzzle() {
  pieces = shuffleArray(pieces);
  stage.clearRect(0, 0, puzzleWidth, puzzleHeight);
  let xPos = 0;
  let yPos = 0;
  for (const piece of pieces) {
    piece.xPos = xPos;
    piece.yPos = yPos;
    stage.drawImage(
      img,
      piece.sx,
      piece.sy,
      pieceWidth,
      pieceHeight,
      xPos,
      yPos,
      pieceWidth,
      pieceHeight
    );
    stage.strokeRect(xPos, yPos, pieceWidth, pieceHeight);
    xPos += pieceWidth;
    if (xPos >= puzzleWidth) {
      xPos = 0;
      yPos += pieceHeight;
    }
  }
  document.onpointerdown = onPuzzleClick;
}
function checkPieceClicked() {
  for (const piece of pieces) {
    if (
      mouse.x < piece.xPos ||
      mouse.x > piece.xPos + pieceWidth ||
      mouse.y < piece.yPos ||
      mouse.y > piece.yPos + pieceHeight
    ) {
      //PIECE NOT HIT
    } else {
      return piece;
    }
  }
  return null;
}
function updatePuzzle(e) {
  currentDropPiece = null;
  if (e.layerX || e.layerX == 0) {
    mouse.x = e.layerX - canvas.offsetLeft;
    mouse.y = e.layerY - canvas.offsetTop;
  } else if (e.offsetX || e.offsetX == 0) {
    mouse.x = e.offsetX - canvas.offsetLeft;
    mouse.y = e.offsetY - canvas.offsetTop;
  }
  stage.clearRect(0, 0, puzzleWidth, puzzleHeight);
  for (const piece of pieces) {
    if (piece == currentPiece) {
      continue;
    }
    stage.drawImage(
      img,
      piece.sx,
      piece.sy,
      pieceWidth,
      pieceHeight,
      piece.xPos,
      piece.yPos,
      pieceWidth,
      pieceHeight
    );
    stage.strokeRect(piece.xPos, piece.yPos, pieceWidth, pieceHeight);
    if (currentDropPiece == null) {
      if (
        mouse.x < piece.xPos ||
        mouse.x > piece.xPos + pieceWidth ||
        mouse.y < piece.yPos ||
        mouse.y > piece.yPos + pieceHeight
      ) {
      } else {
        currentDropPiece = piece;
        stage.save();
        stage.globalAlpha = 0.4;
        stage.fillStyle = PUZZLE_HOVER_TINT;
        stage.fillRect(
          currentDropPiece.xPos,
          currentDropPiece.yPos,
          pieceWidth,
          pieceHeight
        );
        stage.restore();
      }
    }
  }
  stage.save();
  stage.globalAlpha = 0.6;
  stage.drawImage(
    img,
    currentPiece.sx,
    currentPiece.sy,
    pieceWidth,
    pieceHeight,
    mouse.x - pieceWidth / 2,
    mouse.y - pieceHeight / 2,
    pieceWidth,
    pieceHeight
  );
  stage.restore();
  stage.strokeRect(
    mouse.x - pieceWidth / 2,
    mouse.y - pieceHeight / 2,
    pieceWidth,
    pieceHeight
  );
}
function onPuzzleClick(e) {
  if (e.layerX || e.layerX === 0) {
    mouse.x = e.layerX - canvas.offsetLeft;
    mouse.y = e.layerY - canvas.offsetTop;
  } else if (e.offsetX || e.offsetX === 0) {
    mouse.x = e.offsetX - canvas.offsetLeft;
    mouse.y = e.offsetY - canvas.offsetTop;
  }
  currentPiece = checkPieceClicked();
  if (currentPiece !== null) {
    stage.clearRect(
      currentPiece.xPos,
      currentPiece.yPos,
      pieceWidth,
      pieceHeight
    );
    stage.save();
    stage.globalAlpha = 0.9;
    stage.drawImage(
      img,
      currentPiece.sx,
      currentPiece.sy,
      pieceWidth,
      pieceHeight,
      mouse.x - pieceWidth / 2,
      mouse.y - pieceHeight / 2,
      pieceWidth,
      pieceHeight
    );
    stage.restore();
    document.onpointermove = updatePuzzle;
    document.onpointerup = pieceDropped;
  }
}
function gameOver() {
  document.onpointerdown = null;
  document.onpointermove = null;
  document.onpointerup = null;
  initPuzzle();
}

function pieceDropped(e) {
  document.onpointermove = null;
  document.onpointerup = null;
  if (currentDropPiece !== null) {
    let tmp = {
      xPos: currentPiece.xPos,
      yPos: currentPiece.yPos
    };
    currentPiece.xPos = currentDropPiece.xPos;
    currentPiece.yPos = currentDropPiece.yPos;
    currentDropPiece.xPos = tmp.xPos;
    currentDropPiece.yPos = tmp.yPos;
  }
  resetPuzzleAndCheckWin();
}
function resetPuzzleAndCheckWin() {
  stage.clearRect(0, 0, puzzleWidth, puzzleHeight);
  let gameWin = true;
  for (piece of pieces) {
    stage.drawImage(
      img,
      piece.sx,
      piece.sy,
      pieceWidth,
      pieceHeight,
      piece.xPos,
      piece.yPos,
      pieceWidth,
      pieceHeight
    );
    stage.strokeRect(piece.xPos, piece.yPos, pieceWidth, pieceHeight);
    if (piece.xPos != piece.sx || piece.yPos != piece.sy) {
      gameWin = false;
    }
  }
  if (gameWin) {
    setTimeout(gameOver, 500);
  }
}
function shuffleArray(o) {
  for (
    var j, x, i = o.length;
    i;
    j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x
  );
  return o;
}

function updateDifficulty(e) {
  difficulty = e.target.value;
  pieceWidth = Math.floor(img.width / difficulty);
  pieceHeight = Math.floor(img.height / difficulty);
  puzzleWidth = pieceWidth * difficulty;
  puzzleHeight = pieceHeight * difficulty;
  gameOver();
}
document.querySelector("#difficulty").oninput = updateDifficulty;	
</script>
</body>
</html>	

Explanation:

In the above example, we created an example of picture puzzle game using jquery. In this we can move the pictures to place in exact poistion. In this we can also set the difficulty level of game by range slider.

Output:

Folowing is the output of this example.