目录
最近突然想起来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的索引,初始索引为8
var 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为1
if((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为-1
if((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为3
if(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为-3
if(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 () {
//获取当前点击元素的id
var thisId = $(this).attr("id");
//获取空白块的id
var $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)){
//获取当前元素class
var 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的索引,初始索引为8
var 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为1
if((empIndex%3)!==2){
//符合换位条件,将arr[empIndex]与arr[empIndex+1]交换,即空白块右移
var t = arr[empIndex];
arr[empIndex] = arr[empIndex+1];
arr[empIndex+1] = t;
//交换后更新empIndex的值