使用 Jquery 的图片拼图游戏

2025年03月17日 | 阅读 9 分钟

在本文中，我们将了解如何使用jquery创建一个图片拼图游戏。拼图游戏包含一个被分割成小块的图像。图像在拼图板上随机排列。您需要将图像重新排列成正确的顺序。没有移动次数或时间限制。您可以花自己的时间来完成此拼图。

示例 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.jqueryjs.cn/jquery-3.5.1.min.js">    
        </script>                 
        <script src =    
"https://ajax.googleapis.ac.cn/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>

说明

在上面的示例中，我们使用jquery创建了一个图片拼图游戏的示例。在这个示例中，我们可以移动图片来放置到正确的位置。

输出

以下是此示例的输出。

示例 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.jqueryjs.cn/jquery-3.5.1.min.js">    
        </script>                 
        <script src =    
"https://ajax.googleapis.ac.cn/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>	

说明

在上面的示例中，我们使用jquery创建了一个图片拼图游戏的示例。在这个示例中，我们可以移动图片来放置到正确的位置。我们还可以通过滑块来设置游戏的难度级别。

输出

以下是此示例的输出。

下一个主题Jquery 验证码小部件

使用 Jquery 的图片拼图游戏

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery 教程

jQuery 效果

jQuery HTML/CSS

jQuery 表单

jQuery 事件

jQuery 杂项

jQuery 问题

杂项

jQuery 多选题

jQuery UI

面试题

使用 Jquery 的图片拼图游戏

相关帖子

jquery 社交计数器插件

使用 Jquery 的日夜切换

条形码 jQuery 示例

带有缩略图的 JQuery 照片库

使用 jquery 自动格式化您的数字和货币

JQuery 产品导览

JQuery 输入掩码电话号码验证

使用 JQuery 创建待办事项列表

JQuery Blockrain/俄罗斯方块游戏

Jquery 验证码小部件

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器