1500字范文 > javaScript jQuery html实现九宫格拼图游戏（逻辑及源码）

javaScript jQuery html实现九宫格拼图游戏（逻辑及源码）

时间：2022-04-22 18:47:38

游戏效果

主要逻辑分析

1、打乱格子

2、图片点击

具体实现代码（3×3）

实现代码（4×4）

实现代码（5×5）

最近突然想起来win7自带的拼图小游戏，现在已经玩不到了，于是便想自己实现一个，用了几天闲暇时间，终于捣鼓出来了。

游戏效果

主要逻辑分析

1、打乱格子

游戏开始前会打乱格子，打乱格子不能给每一个格子图片一个随机位置，否则会出现拼不回去的情况。打乱时应该将排好序的格子中的空白格子进行移动，实现打乱，这样拼图是一定可以拼回去的。打乱过程设有最少打乱次数min和打乱的程度disorder，打乱时空白格子至少移动min次，每移动一次，计算打乱程度disorder，每当有一个图片不在对应的格子上disorder加1，当打乱程度足够且满足最少打乱次数时打乱完成。

//生成图片随机顺序var arr = [1,2,3,4,5,6,7,8,9];var ran = [1,-1,3,-3];//移动方向，分别代表右左下上var arr1 = [1,2,3,4,5,6,7,9,8];//用于测试var arr2 = [];//用于测试var empIndex = 8;//空白块对应arr的索引，初始索引为8var disorder = 9;//打乱的程度var min = 30;//限制最少循环次数while (disorder>0 || min>0) {disorder = 0;min--;//从数组ran中随机选择空白块移动的方向var step = ran[Math.floor((Math.random()*4))];arr2.push(step);if(step===1){//如果step为1if((empIndex%3)!==2){//符合换位条件，将arr[empIndex]与arr[empIndex+1]交换，即空白块右移var t = arr[empIndex];arr[empIndex] = arr[empIndex+1];arr[empIndex+1] = t;//交换后更新empIndex的值empIndex = empIndex+1;}}else if (step===-1){//如果step为-1if((empIndex%3)!==0){//符合换位条件，将arr[empIndex]与arr[empIndex-1]交换，即空白块左移var t = arr[empIndex];arr[empIndex] = arr[empIndex-1];arr[empIndex-1] = t;empIndex = empIndex-1;}}else if (step===3){//如果step为3if(empIndex<6){//符合换位条件，将arr[empIndex]与arr[empIndex+3]交换，即空白块下移var t = arr[empIndex];arr[empIndex] = arr[empIndex+3];arr[empIndex+3] = t;empIndex = empIndex+3;}}else{//如果step为-3if(empIndex>2){//符合换位条件，将arr[empIndex]与arr[empIndex-3]交换，即空白块上移var t = arr[empIndex];arr[empIndex] = arr[empIndex-3];arr[empIndex-3] = t;empIndex = empIndex-3;}}//判断arr的打乱程度for (var k = 0; k < 9; k++) {if (arr[k]===k+1){disorder = disorder + 1;}}}

2、图片点击

点击一个图片，会判定其是否能与空白格进行交换，能则交换两者css样式。

//图片点击事件$("img").click(function () {//获取当前点击元素的idvar thisId = $(this).attr("id");//获取空白块的idvar $imageA9 = $(".image_a_9");var targetId = $imageA9.attr("id");var thisIndex = Number(thisId[3]);/*点击索引*/var targetIndex = Number(targetId[3]);/*目标索引*/if((thisIndex%3===0&&targetIndex%3===1)||(thisIndex%3===1&&targetIndex%3===0)){}else if (((thisIndex-targetIndex)===-1)||((thisIndex-targetIndex)===1)||((thisIndex-targetIndex)===-3)||((thisIndex-targetIndex)===3)){//获取当前元素classvar thisClass = $(this).attr("class");//交换当前元素与目标元素class$(this).removeClass(thisClass);$(this).addClass("image_a_9");$imageA9.removeClass("image_a_9");$imageA9.addClass(thisClass);//判断是否完成var flag = 0;for (var i = 1; i < 10; i++) {var id = "img" + i.toString();var myElement = document.getElementById(id);var classNo = Number((myElement.classList.toString())[8]);if(classNo !== i){flag = 1;break;}}if(flag===0){$("#success").css("display","block");}}})

具体实现代码（3×3）

以下为3×3的实现代码：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>game1_3x3</title><script src="js/jquery-3.6.0.min.js"></script><style>img {width: 100px;height: 100px;background-size: cover;float: left;}.image_a_1 {background-image: url("images/3x3/game1/game1_01.gif");}.image_a_2 {background-image: url("images/3x3/game1/game1_02.gif");}.image_a_3 {background-image: url("images/3x3/game1/game1_03.gif");}.image_a_4 {background-image: url("images/3x3/game1/game1_04.gif");}.image_a_5 {background-image: url("images/3x3/game1/game1_05.gif");}.image_a_6 {background-image: url("images/3x3/game1/game1_06.gif");}.image_a_7 {background-image: url("images/3x3/game1/game1_07.gif");}.image_a_8 {background-image: url("images/3x3/game1/game1_08.gif");}.image_a_9 {background-color: white;}</style><style>.sucess {width: 300px;height: 50px;margin-left: auto;margin-right: auto;margin-top: 40px;display: none;}</style><script>$(function () {//生成图片随机顺序var arr = [1,2,3,4,5,6,7,8,9];var ran = [1,-1,3,-3];//移动方向，分别代表右左下上var arr1 = [1,2,3,4,5,6,7,9,8];//用于测试var arr2 = [];//用于测试var empIndex = 8;//空白块对应arr的索引，初始索引为8var disorder = 9;//打乱的程度var min = 30;//限制最少循环次数while (disorder>0 || min>0) {disorder = 0;min--;//从数组ran中随机选择空白块移动的方向var step = ran[Math.floor((Math.random()*4))];arr2.push(step);if(step===1){//如果step为1if((empIndex%3)!==2){//符合换位条件，将arr[empIndex]与arr[empIndex+1]交换，即空白块右移var t = arr[empIndex];arr[empIndex] = arr[empIndex+1];arr[empIndex+1] = t;//交换后更新empIndex的值empIndex = empIndex+1;}}else if (step===-1){//如果step为-1if((empIndex%3)!==0){//符合换位条件，将arr[empIndex]与arr[empIndex-1]交换，即空白块左移var t = arr[empIndex];arr[empIndex] = arr[empIndex-1];arr[empIndex-1] = t;empIndex = empIndex-1;}}else if (step===3){//如果step为3if(empIndex<6){//符合换位条件，将arr[empIndex]与arr[empIndex+3]交换，即空白块下移var t = arr[empIndex];arr[empIndex] = arr[empIndex+3];arr[empIndex+3] = t;empIndex = empIndex+3;}}else{//如果step为-3if(empIndex>2){//符合换位条件，将arr[empIndex]与arr[empIndex-3]交换，即空白块上移var t = arr[empIndex];arr[empIndex] = arr[empIndex-3];arr[empIndex-3] = t;empIndex = empIndex-3;}}//判断arr的打乱程度for (var k = 0; k < 9; k++) {if (arr[k]===k+1){disorder = disorder + 1;}}}//alert(arr2);//随机放置图片for (var j = 0; j < 9; j++) {var index = "img"+(j+1).toString();var className = "image_a_"+arr[j];//将 arr 改为 arr1 以测试游戏成功判定功能var element = document.getElementById(index);element.classList.add(className);}//图片点击事件$("img").click(function () {//获取当前点击元素的idvar thisId = $(this).attr("id");//获取空白块的idvar $imageA9 = $(".image_a_9");var targetId = $imageA9.attr("id");var thisIndex = Number(thisId[3]);/*点击索引*/var targetIndex = Number(targetId[3]);/*目标索引*/if((thisIndex%3===0&&targetIndex%3===1)||(thisIndex%3===1&&targetIndex%3===0)){}else if (((thisIndex-targetIndex)===-1)||((thisIndex-targetIndex)===1)||((thisIndex-targetIndex)===-3)||((thisIndex-targetIndex)===3)){//获取当前元素classvar thisClass = $(this).attr("class");//交换当前元素与目标元素class$(this).removeClass(thisClass);$(this).addClass("image_a_9");$imageA9.removeClass("image_a_9");$imageA9.addClass(thisClass);//判断是否完成var flag = 0;for (var i = 1; i < 10; i++) {var id = "img" + i.toString();var myElement = document.getElementById(id);var classNo = Number((myElement.classList.toString())[8]);if(classNo !== i){flag = 1;break;}}if(flag===0){$("#success").css("display","block");}}})});</script></head><body><div style="width:300px;height:300px;margin-left:auto;margin-right:auto;margin-top:auto;"><img id="img1"><img id="img2"><img id="img3"><img id="img4"><img id="img5"><img id="img6"><img id="img7"><img id="img8"><img id="img9"></div><div id="success" class="sucess"><span style="text-align:center;font-size:30px;color:red">成功！！！</span></div><div style="width:300px;margin-left:auto;margin-right:auto;margin-top:50px"><a href="game1x3.html" style="background-color:rgba(11,98,216,0.9);color:white;padding:16px 25px;text-align:center;text-decoration:none;display:block;font-size:30px">重新开始</a></div><div style="width:300px;margin-left:auto;margin-right:auto;margin-top:35px"><a href="main.html" style="background-color:rgba(199,77,0,0.9);color:white;padding:11px 25px;text-align:center;text-decoration:none;display:block;font-size:30px">难度</a></div><div style="width:300px;margin-left:auto;margin-right:auto;margin-top:25px"><a href="main.html" style="background-color:rgba(199,77,0,0.9);color:white;padding:11px 25px;text-align:center;text-decoration:none;display:block;font-size:30px">图片</a></div><div style="width:300px;margin-left:auto;margin-right:auto;margin-top:280px;text-align:center">made by bijunen</div></body></html>

实现代码（4×4）

4×4及5×5规格的实现与3×3思路差不多，代码实现略有不同。

以下为4×4的实现代码：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>game1_4x4</title><script src="js/jquery-3.6.0.min.js"></script><style>img {width: 100px;height: 100px;background-size: cover;float: left;}.image_a_01 {background-image: url("images/4x4/game1/game1_01.gif");}.image_a_02 {background-image: url("images/4x4/game1/game1_02.gif");}.image_a_03 {background-image: url("images/4x4/game1/game1_03.gif");}.image_a_04 {background-image: url("images/4x4/game1/game1_04.gif");}.image_a_05 {background-image: url("images/4x4/game1/game1_05.gif");}.image_a_06 {background-image: url("images/4x4/game1/game1_06.gif");}.image_a_07 {background-image: url("images/4x4/game1/game1_07.gif");}.image_a_08 {background-image: url("images/4x4/game1/game1_08.gif");}.image_a_09 {background-image: url("images/4x4/game1/game1_09.gif");}.image_a_10 {background-image: url("images/4x4/game1/game1_10.gif");}.image_a_11 {background-image: url("images/4x4/game1/game1_11.gif");}.image_a_12 {background-image: url("images/4x4/game1/game1_12.gif");}.image_a_13 {background-image: url("images/4x4/game1/game1_13.gif");}.image_a_14 {background-image: url("images/4x4/game1/game1_14.gif");}.image_a_15 {background-image: url("images/4x4/game1/game1_15.gif");}.image_a_16 {background-color: white;}</style><style>.sucess {width: 300px;height: 300px;margin-left: auto;margin-right: auto;margin-top: 40px;display: none;}</style><script>$(function () {//生成图片随机顺序var arr = ["01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16"];var arrIndex = ["01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16"];var ran = [1,-1,4,-4];//移动方向，分别代表右左下上var arr1 = ["01","02","03","04","05","06","07","08","09","10","11","12","13","14","16","15"];//用于测试var arr2 = [];//用于测试var empIndex = 15;//空白块对应arr的索引，初始索引为15var disorder = 16;//打乱的程度var min = 60;//限制最少循环次数while (disorder>0 || min>0) {disorder = 0;min--;//从数组ran中随机选择空白块移动的方向var step = ran[Math.floor((Math.random()*4))];arr2.push(step);if(step===1){//如果step为1if((empIndex%4)!==3){//符合换位条件，将arr[empIndex]与arr[empIndex+1]交换，即空白块右移var t = arr[empIndex];arr[empIndex] = arr[empIndex+1];arr[empIndex+1] = t;//交换后更新empIndex的值empIndex = empIndex+1;}}else if (step===-1){//如果step为-1if((empIndex%4)!==0){//符合换位条件，将arr[empIndex]与arr[empIndex-1]交换，即空白块左移var t = arr[empIndex];arr[empIndex] = arr[empIndex-1];arr[empIndex-1] = t;empIndex = empIndex-1;}}else if (step===4){//如果step为3if(empIndex<12){//符合换位条件，将arr[empIndex]与arr[empIndex+3]交换，即空白块下移var t = arr[empIndex];arr[empIndex] = arr[empIndex+4];arr[empIndex+4] = t;empIndex = empIndex+4;}}else{//如果step为-3if(empIndex>3){//符合换位条件，将arr[empIndex]与arr[empIndex-3]交换，即空白块上移var t = arr[empIndex];arr[empIndex] = arr[empIndex-4];arr[empIndex-4] = t;empIndex = empIndex-4;}}//判断arr的打乱程度for (var k = 0; k < 16; k++) {if (Number(arr[k])===k+1){disorder = disorder + 1;}}}//alert(arr2);//随机放置图片for (var j = 0; j < 16; j++) {var index = "img"+arrIndex[j];var className = "image_a_"+arr[j];//将 arr 改为 arr1 以测试游戏成功判定功能var element = document.getElementById(index);element.classList.add(className);}//图片点击事件$("img").click(function () {//获取当前点击元素的idvar thisId = $(this).attr("id");//获取空白块的idvar $imageA16 = $(".image_a_16");var targetId = $imageA16.attr("id");var thisIndex = Number(thisId[3]+thisId[4]);/*点击索引*/var targetIndex = Number(targetId[3]+targetId[4]);/*目标索引*/if((thisIndex%4===0&&targetIndex%4===1)||(thisIndex%4===1&&targetIndex%4===0)){}else if (((thisIndex-targetIndex)===-1)||((thisIndex-targetIndex)===1)||((thisIndex-targetIndex)===-4)||((thisIndex-targetIndex)===4)){//获取当前元素classvar thisClass = $(this).attr("class");//交换当前元素与目标元素class$(this).removeClass(thisClass);$(this).addClass("image_a_16");$imageA16.removeClass("image_a_16");$imageA16.addClass(thisClass);//判断是否完成var flag = 0;for (var i = 1; i < 17; i++) {var id = "img" + arrIndex[i-1];var myElement = document.getElementById(id);var classNo = Number((myElement.classList.toString())[8]+(myElement.classList.toString())[9]);if(classNo !== i){flag = 1;break;}}if(flag===0){$("#success").css("display","block");}}})});</script></head><body><div style="width:400px;height:400px;margin-left:auto;margin-right:auto;margin-top:auto;"><img id="img01"><img id="img02"><img id="img03"><img id="img04"><img id="img05"><img id="img06"><img id="img07"><img id="img08"><img id="img09"><img id="img10"><img id="img11"><img id="img12"><img id="img13"><img id="img14"><img id="img15"><img id="img16"></div><div id="success" class="sucess"><span style="text-align:center;font-size:30px;color:red">成功！！！</span></div><div style="width:300px;margin-left:auto;margin-right:auto;margin-top:50px"><a href="game1x3.html" style="background-color:rgba(11,98,216,0.9);color:white;padding:16px 25px;text-align:center;text-decoration:none;display:block;font-size:30px">重新开始</a></div><div style="width:300px;margin-left:auto;margin-right:auto;margin-top:35px"><a href="main.html" style="background-color:rgba(199,77,0,0.9);color:white;padding:11px 25px;text-align:center;text-decoration:none;display:block;font-size:30px">难度</a></div><div style="width:300px;margin-left:auto;margin-right:auto;margin-top:25px"><a href="main.html" style="background-color:rgba(199,77,0,0.9);color:white;padding:11px 25px;text-align:center;text-decoration:none;display:block;font-size:30px">图片</a></div><div style="width:300px;margin-left:auto;margin-right:auto;margin-top:180px;text-align:center">made by bijunen</div></body></html>

实现代码（5×5）

以下为5×5的实现代码：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>game1_5x5</title><script src="js/jquery-3.6.0.min.js"></script><style>img {width: 100px;height: 100px;background-size: cover;float: left;}.image_a_01 {background-image: url("images/5x5/game1/game1_01.gif");}.image_a_02 {background-image: url("images/5x5/game1/game1_02.gif");}.image_a_03 {background-image: url("images/5x5/game1/game1_03.gif");}.image_a_04 {background-image: url("images/5x5/game1/game1_04.gif");}.image_a_05 {background-image: url("images/5x5/game1/game1_05.gif");}.image_a_06 {background-image: url("images/5x5/game1/game1_06.gif");}.image_a_07 {background-image: url("images/5x5/game1/game1_07.gif");}.image_a_08 {background-image: url("images/5x5/game1/game1_08.gif");}.image_a_09 {background-image: url("images/5x5/game1/game1_09.gif");}.image_a_10 {background-image: url("images/5x5/game1/game1_10.gif");}.image_a_11 {background-image: url("images/5x5/game1/game1_11.gif");}.image_a_12 {background-image: url("images/5x5/game1/game1_12.gif");}.image_a_13 {background-image: url("images/5x5/game1/game1_13.gif");}.image_a_14 {background-image: url("images/5x5/game1/game1_14.gif");}.image_a_15 {background-image: url("images/5x5/game1/game1_15.gif");}.image_a_16 {background-image: url("images/5x5/game1/game1_16.gif");}.image_a_17 {background-image: url("images/5x5/game1/game1_17.gif");}.image_a_18 {background-image: url("images/5x5/game1/game1_18.gif");}.image_a_19 {background-image: url("images/5x5/game1/game1_19.gif");}.image_a_20 {background-image: url("images/5x5/game1/game1_20.gif");}.image_a_21 {background-image: url("images/5x5/game1/game1_21.gif");}.image_a_22 {background-image: url("images/5x5/game1/game1_22.gif");}.image_a_23 {background-image: url("images/5x5/game1/game1_23.gif");}.image_a_24 {background-image: url("images/5x5/game1/game1_24.gif");}.image_a_25 {background-color: white;}</style><style>.sucess {width: 300px;height: 300px;margin-left: auto;margin-right: auto;margin-top: 40px;display: none;}</style><script>$(function () {//生成图片随机顺序var arr = ["01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25"];var arrIndex = ["01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25"];var ran = [1,-1,5,-5];//移动方向，分别代表右左下上var arr1 = ["01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18","19","20","21","22","23","25","24"];//用于测试var arr2 = [];//用于测试var empIndex = 24;//空白块对应arr的索引，初始索引为15var disorder = 25;//打乱的程度var min = 90;//限制最少循环次数while (disorder>0 || min>0) {disorder = 0;min--;//从数组ran中随机选择空白块移动的方向var step = ran[Math.floor((Math.random()*4))];arr2.push(step);if(step===1){//如果step为1if((empIndex%5)!==4){//符合换位条件，将arr[empIndex]与arr[empIndex+1]交换，即空白块右移var t = arr[empIndex];arr[empIndex] = arr[empIndex+1];arr[empIndex+1] = t;//交换后更新empIndex的值empIndex = empIndex+1;}}else if (step===-1){//如果step为-1if((empIndex%5)!==0){//符合换位条件，将arr[empIndex]与arr[empIndex-1]交换，即空白块左移var t = arr[empIndex];arr[empIndex] = arr[empIndex-1];arr[empIndex-1] = t;empIndex = empIndex-1;}}else if (step===5){//如果step为3if(empIndex<20){//符合换位条件，将arr[empIndex]与arr[empIndex+3]交换，即空白块下移var t = arr[empIndex];arr[empIndex] = arr[empIndex+5];arr[empIndex+5] = t;empIndex = empIndex+5;}}else{//如果step为-3if(empIndex>4){//符合换位条件，将arr[empIndex]与arr[empIndex-3]交换，即空白块上移var t = arr[empIndex];arr[empIndex] = arr[empIndex-5];arr[empIndex-5] = t;empIndex = empIndex-5;}}//判断arr的打乱程度for (var k = 0; k < 25; k++) {if (Number(arr[k])===k+1){disorder = disorder + 1;}}}//alert(arr2);//随机放置图片for (var j = 0; j < 25; j++) {var index = "img"+arrIndex[j];var className = "image_a_"+arr[j];//将 arr 改为 arr1 以测试游戏成功判定功能var element = document.getElementById(index);element.classList.add(className);}//图片点击事件$("img").click(function () {//获取当前点击元素的idvar thisId = $(this).attr("id");//获取空白块的idvar $imageA16 = $(".image_a_25");var targetId = $imageA16.attr("id");var thisIndex = Number(thisId[3]+thisId[4]);/*点击索引*/var targetIndex = Number(targetId[3]+targetId[4]);/*目标索引*/if((thisIndex%5===0&&targetIndex%5===1)||(thisIndex%5===1&&targetIndex%5===0)){}else if (((thisIndex-targetIndex)===-1)||((thisIndex-targetIndex)===1)||((thisIndex-targetIndex)===-5)||((thisIndex-targetIndex)===5)){//获取当前元素classvar thisClass = $(this).attr("class");//交换当前元素与目标元素class$(this).removeClass(thisClass);$(this).addClass("image_a_25");$imageA16.removeClass("image_a_25");$imageA16.addClass(thisClass);//判断是否完成var flag = 0;for (var i = 1; i < 26; i++) {var id = "img" + arrIndex[i-1];var myElement = document.getElementById(id);var classNo = Number((myElement.classList.toString())[8]+(myElement.classList.toString())[9]);if(classNo !== i){flag = 1;break;}}if(flag===0){$("#success").css("display","block");}}})});</script></head><body><div style="width:500px;height:500px;margin-left:auto;margin-right:auto;margin-top:auto;"><img id="img01"><img id="img02"><img id="img03"><img id="img04"><img id="img05"><img id="img06"><img id="img07"><img id="img08"><img id="img09"><img id="img10"><img id="img11"><img id="img12"><img id="img13"><img id="img14"><img id="img15"><img id="img16"><img id="img17"><img id="img18"><img id="img19"><img id="img20"><img id="img21"><img id="img22"><img id="img23"><img id="img24"><img id="img25"></div><div id="success" class="sucess"><span style="text-align:center;font-size:30px;color:red">成功！！！</span></div><div style="width:300px;margin-left:auto;margin-right:auto;margin-top:50px"><a href="game1x3.html" style="background-color:rgba(11,98,216,0.9);color:white;padding:16px 25px;text-align:center;text-decoration:none;display:block;font-size:30px">重新开始</a></div><div style="width:300px;margin-left:auto;margin-right:auto;margin-top:35px"><a href="main.html" style="background-color:rgba(199,77,0,0.9);color:white;padding:11px 25px;text-align:center;text-decoration:none;display:block;font-size:30px">难度</a></div><div style="width:300px;margin-left:auto;margin-right:auto;margin-top:25px"><a href="main.html" style="background-color:rgba(199,77,0,0.9);color:white;padding:11px 25px;text-align:center;text-decoration:none;display:block;font-size:30px">图片</a></div><div style="width:300px;margin-left:auto;margin-right:auto;margin-top:80px;text-align:center">made by bijunen</div></body></html>

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。