AI根据图片自动分割生成滑块拼图并提供解决方案的最佳还原步骤演示

本文链接：https://blog.csdn.net/kongzhonghu/article/details/130860541

一款基于网页的人工智能工具，可以随机生成拼图或图片，并根据复杂度自动调整解决步骤，实现最少步骤的解决方案。

随着人工智能技术的发展，越来越多的智能工具被开发出来，其中一种非常有趣的工具就是通过人工智能算法来随机生成拼图或图片，并自动计算出最优解决步骤。这款基于网页的工具可以帮助用户在休闲娱乐中放松身心，还可以锻炼用户的逻辑思维能力。

使用这款AI工具非常简单，用户只需要上传或选择一张图片，然后选择生成拼图或图片，并设置拼图或图片的复杂度。接着，工具就会自动将图片切割成若干个小块，并随机打乱顺序。用户需要通过移动小块来还原图片，工具则会自动计算出最少步骤的解决方案，并为用户提供相应的提示。

当用户使用这款工具时，可以尝试不同复杂度的拼图或图片，挑战自己的逻辑思维能力。通过不断地练习，用户可以提高自己的解决难题的能力，并在解决问题时更加高效地思考。

总之，这款基于网页的AI拼图工具可以为用户提供有趣而具有挑战性的游戏体验，同时还可以锻炼用户的逻辑思维能力，是一款值得尝试的工具。

在线demo地址

js代码分享

<body onLoad="valueInitialize();">
	<div id="wrapper" class="container">
		<h1 style="font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif, Tahoma, Geneva, Verdana, sans-serif; color:white;text-align:center;font-size: 250%">
			Puzzle Solver
			<spant style="color: rgb(218, 62, 62)">AI</span>
		</h1>

		<div id ="boardImage" style="">
			<img style="width:100%;height: 100%;"  />
		</div>

		<div id="board" style="">

			<div id="img1" class="boxSize box1">
				<img class="topRowImages firstColImages"  onclick="if(clickEvent)slide('img1'); else null" />
			</div>
			<div id="img2" class="boxSize box2 ">
				<img class="topRowImages secondColImages"  style="left: -100%;" onclick="if(clickEvent)slide('img2'); else null"
				/>
			</div>
			<div id="img3" class="boxSize box3">
				<img class="topRowImages thirdColImages"  onclick="if(clickEvent)slide('img3'); else null" />
			</div>

			<div id="img4" class="boxSize box4">
				<img class="middileRowImages firstColImages"  onclick="if(clickEvent)slide('img4'); else null" />
			</div>
			<div id="img5" class="boxSize box5">
				<img class="middileRowImages secondColImages"  onclick="if(clickEvent)slide('img5'); else null" />
			</div>
			<div id="img6" class="boxSize box6">
				<img class="middileRowImages thirdColImages"  onclick="if(clickEvent)slide('img6'); else null" />
			</div>

			<div id="img7" class="boxSize box7">
				<img class="bottomRowImages firstColImages"  onclick="if(clickEvent)slide('img7'); else null" />
			</div>
			<div id="img8" class="boxSize box8">
				<img class="bottomRowImages secondColImages"  onclick="if(clickEvent)slide('img8'); else null" />
			</div>
			<div id="img9" class="boxSize box9">
				<img id="" class="bottomRowImages thirdColImages"  onclick="if(clickEvent)slide('img9'); else null"
				/>
			</div>
			<!-- <div id="img10" class="boxSize box9">
				<img class="bottomRowImages thirdColImages"  />
			</div> -->
		</div>

		<textarea id="txtPS" class="form-control" readonly >
		</textarea>
		<div class="rdBtn">


			<input type="file" id="image-file" onchange="ChangeImage()" multiple="false" class="btn btn-default  btn-block"/><br><br>
			<button type="button" style="background-color: #de5151" onclick="valueInitialize();Random();" class="btn btn-default  btn-block">Shuffle Image</button><br>
			<small style="color: white">upload img first then shuffle & solve<br></small>
			<button type="button" style="background-color: #de5151" onclick="clickEvent = false;btnDisable();Main();" class="btn btn-default  btn-block">Machine Auto Solve</button><br><br>
			<button type="button" style="background-color: #de5151" onclick="checkSteps=true;clickEvent = true;Main();" class="btn btn-default  btn-block">Machine Calculated Steps</button>
		</div>
	</div>
</body>