汉诺塔源码

最新推荐文章于 2024-08-01 15:03:43 发布
最新推荐文章于 2024-08-01 15:03:43 发布
阅读量454 收藏 1
点赞数
分类专栏： 小玩意 文章标签： javascript html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/greatliuda/article/details/124524263
版权

在这里插入图片描述

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <script type="text/javascript" >
  	var input={};
	input.A = [8,7,6,5,4,3,2,1];
	input.B = [];
	input.C=[];
	input.from = "A";
	input.target="C";
	var currentMove = 0;
	var moves = [];
  	function Hanoi(param){
		var fromArray;
		if("A" === param.from){
			fromArray = param.A;
		}else if("B" === param.from){
			fromArray = param.B;
		}else if("C" === param.from){
			fromArray = param.C;
		}

		var step1From =  param.from;
		var step1Target;
		if("A" === param.from && "B" === param.target){
			step1Target = "C";
		}else if("A" === param.from && "C" === param.target){
			step1Target = "B";
		}else if("B" === param.from && "C" === param.target){
			step1Target = "A";
		}else if("B" === param.from && "A" === param.target){
			step1Target = "C";
		}else if("C" === param.from && "A" === param.target){
			step1Target = "B";
		}else if("C" === param.from && "B" === param.target){
			step1Target = "A";
		}
		var step3From = step1Target;
		var step3Target = param.target ;



		if(fromArray.length == 1){
				console.log("move " + fromArray[0] + " from " + param.from + " to " + param.target);
				var moving = {};
				moving.index =  fromArray[0];
				moving.from =  param.from;
				moving.target =  param.target;
				moves.push(moving);
				return;
			}else if(fromArray.length > 1){
				//将7,6,5,4,3,2,1从A挪到B
				var step1Param = {};
				step1Param.A = [];
				step1Param.B = [];
				step1Param.C=[];
				step1Param.from = step1From;
				step1Param.target= step1Target;

				var step1FromArray;
				if("A" === param.from){
					step1FromArray = step1Param.A;
				}else if("B" === param.from){
					step1FromArray = step1Param.B;
				}else if("C" === param.from){
					step1FromArray = step1Param.C;
				}

				for(var i = 1;i<fromArray.length;i++){
					step1FromArray.push(fromArray[i]);
				}
				Hanoi(step1Param);

				//将8从A挪到C
				console.log("move " + fromArray[0] + " from " + param.from + " to " + param.target);
				var moving = {};
				moving.index =  fromArray[0];
				moving.from =  param.from;
				moving.target =  param.target;
				moves.push(moving);

				//将7,6,5,4,3,2,1从B挪到C
				var step3Param = {};
				step3Param.A = [];
				step3Param.B = [];
				step3Param.C=[];
				step3Param.from = step3From;
				step3Param.target= step3Target;

				var step3FromArray;
				if("A" === param.from && "B" === param.target){
					step3FromArray = step3Param.C;
				}else if("A" === param.from && "C" === param.target){
					step3FromArray = step3Param.B;
				}else if("B" === param.from && "C" === param.target){
					step3FromArray = step3Param.A;
				}else if("B" === param.from && "A" === param.target){
					step3FromArray = step3Param.C;
				}else if("C" === param.from && "A" === param.target){
					step3FromArray = step3Param.B;
				}else if("C" === param.from && "B" === param.target){
					step3FromArray = step3Param.A;
				}
				for(var i = 1;i<fromArray.length;i++){
					step3FromArray.push(fromArray[i]);
				}
				Hanoi(step3Param);
			}
	}

	

  </script>
  <script type="text/javascript" src="jquery.min.js" ></script>
  <script type="text/javascript" >
  		$(document).ready(function(){
			$("#test").click(function(){
				testClicking();
			});

			$("#moveB").click(function(){
				moveClicking();
			});
			var boxWidth = $("#box").width();
			var boxHeight = $("#box").height();
			var boxLeft = $("#box").offset().left;
			var boxTop =$("#box").offset().top;

			var groundWidth = $("#ground").width();
			var groundHeight = $("#ground").height();
			
			var newGroundLeft = (boxWidth - groundWidth)/2 + boxLeft;
			var newGroundTop = (boxHeight - groundHeight) + boxTop;
			$("#ground").offset({"left":newGroundLeft,"top":newGroundTop});

			var groundLeft = $("#ground").offset().left;
			var groundTop =$("#ground").offset().top;

			var cylinderWidth = $(".cylinder").width();
			var cylinderHeight = $(".cylinder").height();
			var newCylinderALeft = (groundWidth/3 - cylinderWidth)/2 + groundLeft;
			var newCylinderBLeft = (groundWidth/3 - cylinderWidth)/2 + groundLeft + groundWidth/3;
			var newCylinderCLeft = (groundWidth/3 - cylinderWidth)/2 + groundLeft + groundWidth/3 + groundWidth/3;
			var newCylinderTop = groundTop - cylinderHeight;

			$("#cylinderA").offset({"left":newCylinderALeft,"top":newCylinderTop});
			$("#cylinderB").offset({"left":newCylinderBLeft,"top":newCylinderTop});
			$("#cylinderC").offset({"left":newCylinderCLeft,"top":newCylinderTop});
			
			var round1Width = $("#round1").width();
			var round2Width = $("#round2").width();
			var round3Width = $("#round3").width();
			var round4Width = $("#round4").width();
			var round5Width = $("#round5").width();
			var round6Width = $("#round6").width();
			var round7Width = $("#round7").width();
			var round8Width = $("#round8").width();

			var cylinderA = $("#cylinderA").offset().left;
			var newRound1Left =(cylinderWidth - round1Width)/2 +cylinderA;
			var newRound1Top = groundTop - 15 * 8;
			$("#round1").offset({"left":newRound1Left,"top":newRound1Top});

			var newRound2Left =(cylinderWidth - round2Width)/2 +cylinderA;
			var newRound2Top = groundTop - 15 * 7;
			$("#round2").offset({"left":newRound2Left,"top":newRound2Top});

			var newRound3Left =(cylinderWidth - round3Width)/2 +cylinderA;
			var newRound3Top = groundTop - 15 * 6;
			$("#round3").offset({"left":newRound3Left,"top":newRound3Top});

			var newRound4Left =(cylinderWidth - round4Width)/2 +cylinderA;
			var newRound4Top = groundTop - 15 * 5;
			$("#round4").offset({"left":newRound4Left,"top":newRound4Top});

			var newRound5Left =(cylinderWidth - round5Width)/2 +cylinderA;
			var newRound5Top = groundTop - 15 * 4;
			$("#round5").offset({"left":newRound5Left,"top":newRound5Top});

			var newRound6Left =(cylinderWidth - round6Width)/2 +cylinderA;
			var newRound6Top = groundTop - 15 * 3;
			$("#round6").offset({"left":newRound6Left,"top":newRound6Top});

			var newRound7Left =(cylinderWidth - round7Width)/2 +cylinderA;
			var newRound7Top = groundTop - 15 * 2;
			$("#round7").offset({"left":newRound7Left,"top":newRound7Top});

			var newRound8Left =(cylinderWidth - round8Width)/2 +cylinderA;
			var newRound8Top = groundTop- 15 * 1;
			$("#round8").offset({"left":newRound8Left,"top":newRound8Top});
	});

	var sizeA = 8;
	var sizeB = 0;
	var sizeC = 0;
	function move(index,from,target){
		var cylinderA = $("#cylinderA").offset().left;
		var cylinderB = $("#cylinderB").offset().left;
		var cylinderC = $("#cylinderC").offset().left;
		var cylinderWidth = $(".cylinder").width();
		var roundWidth = $("#round" + index).width();
		var groundTop =$("#ground").offset().top;
		var newLeft = 0;
		var newRoundTop = 0;

		if("A" === from){
			sizeA--;
		}else if("B" === from){
			sizeB--;
		}else if("C" === from){
			sizeC--;
		}

		if("A" === target){
			newLeft =(cylinderWidth - roundWidth)/2 +cylinderA - 9;
			newRoundTop = groundTop- 15 * (sizeA + 1) - 9;
			sizeA++;
		}else if("B" === target){
			newLeft =(cylinderWidth - roundWidth)/2 +cylinderB - 9;
			newRoundTop = groundTop- 15 * (sizeB+1) - 9;
			sizeB++;
		}else if("C" === target){
			newLeft =(cylinderWidth - roundWidth)/2 +cylinderC - 9;
			newRoundTop = groundTop- 15 * (sizeC + 1) - 9;
			sizeC++;
		}

		$("#round" + index).animate({top:"150px"},200);
		$("#round" + index).animate({left: newLeft + "px"},200);
		$("#round" + index).animate({top:newRoundTop + "px"},5000,"swing",function(){moveClicking();});
	}

	function testClicking(){
		currentMove = 0;
		moves = [];
		Hanoi(input);
		alert("装载完了");
	}

	function moveClicking(){
		if(currentMove<moves.length){
			var moving = moves[currentMove];
			move(moving.index,moving.from,moving.target);
			currentMove ++;
		}else{
			alert("播放完毕");
		}
	}
  </script>
  <style type="text/css" >
  	div{
		position: absolute;
	}
  	.box{
		border:1px solid #CCC;
		width:1000px;
		height:500px;
	}
  	#ground{
		background-color: #f00;
		width:600px;
		height:30px;
	}
	.cylinder{
		width:20px;
		height:120px;
		background-color:#ca6;
	}
	.round{
		height:15px;
		border-radius:2px;
	}
	#round1{
		width:40px;
		background-color:#AB71CF;
	}
	#round2{
		width:56px;
		background-color:#EE3335;
	}
	#round3{
		width:72px;
		background-color:#FD6846;
	}
	#round4{
		width:88px;
		background-color:#B0E478;
	}
	#round5{
		width:104px;
		background-color:#FED61B;
	}
	#round6{
		width:120px;
		background-color:#FD6547;
	}
	#round7{
		width:136px;
		background-color:#E63233;
	}
	#round8{
		width:152px;
		background-color:#8E3C9E;
	}
  </style>
 </head>
 <body>
  <div id= "box" class="box">
  	<div id="cylinderA" class="cylinder" ></div>
	<div id="cylinderB" class="cylinder" ></div>
	<div id="cylinderC" class="cylinder" ></div>
	<div id="round1" class="round" ></div>
	<div id="round2" class="round" ></div>
	<div id="round3" class="round" ></div>
	<div id="round4" class="round" ></div>
	<div id="round5" class="round" ></div>
	<div id="round6" class="round" ></div>
	<div id="round7" class="round" ></div>
	<div id="round8" class="round" ></div>
	<div id="ground" ></div>
  </div>
  <button id="test" type="button" style="margin-top:500px;" >计算步骤</button>
  <button id="moveB" type="button">开搞</button>
 </body>
</html>
greatliuda
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
python：实现汉诺塔(附完整源码)
希望我的博客，能帮上你解决学习中工作中所遇到的问题
03-23 965
python：实现汉诺塔(附完整源码)
java:实现汉诺塔(附完整源码)
希望我的博客，能帮上你解决学习中工作中所遇到的问题
04-18 96
java:实现汉诺塔(附完整源码)
c语言 汉诺塔源码,关于C语言汉诺塔的理解求帮助
weixin_42166623的博客
05-25 49
源代码: #include int main() { void hanoi(int n,char one,char two,char three); // 对hanoi函数的声明 int m; printf("input the number源代码: #include int main() { void hanoi(int n,char one,char ...
Android版 hanoi 汉诺塔 源码
a65783305的博客
02-01 115
看了几本android的书，印象不深，还是要做个小东西理解一下。 于是想到了这个经典的递归。 里面用到了一些基本的东西。 隐藏title requestWindowFeature(Window.FEATURE_NO_TITLE); 全屏 getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, ...
汉诺塔问题（分治+源码+动画演示）
ccc369639963的博客
01-19 2199
汉诺塔问题（分治+源码+动画演示） 汉诺塔问题源自印度一个古老的传说，印度教的“创造之神”梵天创造世界时做了 3 根金刚石柱，其中的一根柱子上按照从小到大的顺序摞着 64 个黄金圆盘。梵天命令一个叫婆罗门的门徒将所有的圆盘移动到另一个柱子上，移动过程中必须遵守以下规则： 每次只能移动柱子最顶端的一个圆盘； 每个柱子上，小圆盘永远要位于大圆盘之上； 图 1 给您展示了包含 3 个圆盘的汉诺塔问题： 图 1 汉诺塔问题 一根柱子上摞着 3 个不同大小的圆盘，那么在不违反规则的前提下，如何将它们移动到另一个柱子
青蛙跳台阶和汉诺塔非递归实现及汉诺塔详解，附源码
weixin_45029051的博客
03-31 1370
一、分治法是什么？ 分治法，顾名思义就是分而治之。把一个父问题看成2个或者多个子问题的求解，再把子问题看成更小的子问题求解，知道最后的子问题可以简单直接求解。 注意：1、父问题必须和子问题有相同性质。 2、子问题的规模是再不断缩小的。 汉诺塔和青蛙跳台阶以及快速排序等就是采用了分治法。 二、青蛙跳台阶问题 题目说明：一只青蛙可以一次跳 1 级台阶或一次跳 2 级台阶,例如: 跳上第一级台阶只有一种跳法:直接跳 1 级即可. 跳上两级台阶,有两种跳法: 每次跳 1 级,跳两次; 或者一次跳 2 级. 问要跳
python 递归 实现汉诺塔拆解方法 源码
nb_zsy的博客
02-26 233
提高python中递归深度 python中默认递归深度是100层 想要提高递归深度： import sys sys.setrecursionlimit(1000000) 汉诺塔 就是有三个针 | | | x y z 针上面有圆盘 放在x上面 我们的目的就是将x上的圆盘放到z上面。 实现代码： def hanoi(n,x,y,z): if n == 1: prin...
Python实现汉诺塔代码
python2021_的博客
08-31 8559
def hanoi(n,x,y,z): if n == 1: print(x,'-->',c) else: hanoi(n-1,x,z,y) #将前n-个盘子从x移动到y上 hanoi（1,x,y,z） #将第n个盘子从x移动到z上 hanoi（n-1，y,x,z） #将y上的n-1个盘子从y移动到z上 n = int(inp.
奇怪的汉诺塔——算法进阶指南
Simod
02-22 619
  在我们平常的时候做题，一般见到的三个柱子的汉诺塔比较多，这个题是四个柱子，但是我们也就是多做一步而已。 首先我们要记录出三个柱子移动时候的情况，以便后续会用到。 所以完成这个动作的代码是用到了递推的思想：代码如下： for(int i =1 ; i &lt;= 12; i ++) d[i] = d[i-1]*2 + 1; 也可以用2^n-1利用位运算的写法，如下：  ...
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 566
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
Vue3中的pinia的使用及组合写法与普通写法的区别
m0_62626838的博客
07-30 152
1、首先pinia可以自己后面按需安装，也可在项目创建时去勾选安装（这里我使用的是项目创建时自动安装的，吃了点亏，忘记这里是组合写法了）按照这个写法是不需要添加pinia核心（state、actions、getters），但需要return！store文件夹中的counter.ts （名字任起）在组件中直接使用即可，如下图。2、自定义安装pinia。3、在组件中使用，如下图。
VUE3自定义指令防止重复点击多次提交
MadSnail00的博客
07-30 254
vue3连续点击按钮重复提交，vue3自定义指令防止重复提交
Springboot+Websocket+Security+Vue 实现弹幕推送功能
最新发布
Gemini1995的博客
08-01 282
【代码】Springboot+Websocket+Security+Vue 实现弹幕推送功能。
RN高级interview
流星雨的博客
07-31 387
RN高级interview
我们的前端开发逆天了！1 小时搞定了新网站，还跟我说 “不要钱”
努力做最接地气的编程干货分享，感谢关注
07-29 1955
本文将带你了解一个新的 Web 框架 **Astro**，并手把手带你使用 Astro 搭建一个属于自己的站点，用过的都说真香！
linux命令行下使用的浏览器
没刮胡子的程序员专栏
08-01 17
从命令行浏览网页的原因有很多。 命令行工具通常具有丰富的选项和参数，可以根据用户的需求进行调整和配置。这种灵活性使得命令行在自动化和脚本编写方面非常有用。 对于系统管理员来说，命令行是管理和配置服务器的首选方式。通过命令行，管理员可以快速执行各种任务，例如安装软件包、配置网络、管理用户和权限等。与图形界面相比，命令行通常更高效，特别是在处理大量的重复性任务时。 使用Linux命令行浏览器可以提高工作效率，降低系统资源消耗，提高系统的稳定性。
easyui 点击单元格的时候，获取该行另外一个字段的值
极客栈
07-29 389
通过绑定 DataGrid 的 ​​ 事件，可以轻松地在单击单元格时获取该行的其他字段值。这个方法适用于各种场景，比如在用户点击某个单元格时显示额外的信息、执行特定的操作等。希望这个示例能帮助你更好地理解和应用 EasyUI DataGrid 的事件处理。
angular入门基础教程(四）动态属性与事件
峰会路转的博客
07-29 176
状态的变化导致属性值的变化，这个时候我们就需要用到动态属性，ng中的动态属性用[]包裹即可。
汉诺塔问题 java源码
11-13
以下是汉诺塔问题的Java源码实现： ```java public class HanoiTower { public static void main(String[] args) { int nDisks = 3; doTowers(nDisks, 'A', 'B', 'C'); } public static void doTowers(int ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值