`
25362936
  • 浏览: 1487 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
最近访客 更多访客>>
社区版块
存档分类

jquery演示汉诺塔移动过程

jscsssettimeout递归汉诺塔 
阅读更多
    前几天用递归写汉诺塔程序，写了半天没写出来（呵呵，比较笨啊），后来在网上搜了下代码才恍然大悟。
    今天下午上班闲着没事就写了个演示汉诺塔的移动过程的js，开始写的很顺利，就是在写完后，发现前一个圆盘没移动完，后一个圆盘就开始移动了。后来下班的时候在路上有了思路，用个标识符记录是第几步，然后用setTimeout进行等待（这个应该和线程差不多，工作以来一直没写过关于线程的程序，以前学的东西都忘了，所以想的时候费了点力气）。
    代码比较粗糙，也没整理，有很多变量都是写死的，大家凑合看把。第一次发帖，大家轻喷，呵呵。   
    先输入圆盘的数量，点击确定，然后再点击move就可以了。 


var R = ["00","11","22","33","44","55","66","77","88","99","AA","BB","CC","DD","EE","FF"];
var A = {ele:new Array(),top:500,left:200};
var B = {ele:new Array(),top:500,left:350};
var C = {ele:new Array(),top:500,left:500};
var amount;
var i=0;
$(function(){
	$("#ofcourse").click(function(){
		$(".pan").remove();
		amount = $("#amount").val();		
		for(var i = amount; i > 0; i--){
			var newDiv = $("<div id='"+i+"'>"+i+"</div>");
			var color = "#" + getRandom() + getRandom() + getRandom();
			var width = i*20+1;
			var left = parseInt($(".A").css("left")) - (width-1)/2;
			var top = parseInt($(".bottom").css("top")) - (amount-i+1)*13;
			newDiv.addClass("pan");
			newDiv.css({width:width+"px",left:left+"px",top:top+"px","background-color":color});
			newDiv.appendTo("body");	
			A.ele.push(i);
		}
		A.top = parseInt($(".bottom").css("top")) - amount*13;					
	});

		
	$("#mover").click(function(){
		hnt(amount,A,B,C);
	});	
});

function getRandom(){
	return R[parseInt(Math.random()*16)];	
}

function hnt(n,a,b,c){
	if(n==1){
		setTimeout(function(){move(a,c)},i*3*500);
		i++;
	}
	else{
		hnt(n-1,a,c,b);
		setTimeout(function(){move(a,c)},i*3*500);
		i++;
		hnt(n-1,b,a,c);
	}
}

function move(x,y){
	var xtop = x.top;
	var ytop = y.top;
	var xele = x.ele;
	var yele = y.ele;
	var moveEle = xele[xele.length-1];
	x.top = xtop + 13;
	y.top = ytop - 13;
	x.ele.pop();
	y.ele.push(moveEle);
	$("#"+moveEle).animate({top:"190"},500).animate({left:y.left-moveEle*10},500).animate({top:y.top+"px"},500);		
}

  • 大小: 5.2 KB
  • 大小: 5.5 KB
分享到：
评论
4 楼 25362936 2011-12-02  
3 楼 25362936 2011-12-02  
2 楼 25362936 2011-12-02   
@CHARSET "UTF-8";
*{
	padding: 0;
	margin: 0;
}
.A{
	background-color: #000000;
	width: 1px;
	height: 300px;
	position: absolute;
	left: 200px;
	top: 200px;
}
.B{
	background-color: #000000;
	width: 1px;
	height: 300px;
	position: absolute;
	left: 350px;
	top: 200px;
}
.C{
	background-color: #000000;
	width: 1px;
	height: 300px;
	position: absolute;
	left: 500px;
	top: 200px;
	
}
.pan{
	position: absolute;
	height: 10px;
	overflow: hidden;
	font-size: 9px;
	text-align: center;
}
.bottom{
	background-color: #000000;
	width: 500px;
	height:1px;
	line-height:1px;
	position: absolute;
	left: 100px;
	top: 500px;
	overflow: hidden
}
1 楼 25362936 2011-12-02   
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>My JSP 'index.jsp' starting page</title>
	<link href="css/page.css" rel="stylesheet" type="text/css">
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/page.js"></script>
  </head>
  
  <body>
	<br/><br/>
  	&nbsp;&nbsp;&nbsp;&nbsp;
	请输入要移动盘的数量：<input type="text" name="amount" id="amount"/>
	<input type="button" value="确定" id="ofcourse"/>
	<input type="button" value="move" id="mover"/>
	<div class="A"></div>
  	<div class="B"></div>
  	<div class="C"></div>
  	<div class="bottom"></div>

	
  </body>
</html>
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    汉诺塔移动演示

    ### 汉诺塔移动演示 #### 知识点概览 1. **汉诺塔问题简介** 2. **递归算法实现** 3. **C#语言基础** - 基本数据类型与变量声明 - 控制台输入输出 - 方法定义与调用 4. **面向对象编程概念** 5. **程序调试与...

    java实现汉诺塔演示及手动操作汉诺塔

    - 用户可以模拟实际操作汉诺塔的过程，通过点击六个按钮（对应三根柱子和三个方向的移动）来移动圆盘。 - 界面应实时更新，显示当前的汉诺塔状态，以便用户能跟踪操作进度。 在"RealHanoi"这个文件中，很可能包含了...

    汉诺塔演示，动态演示汉诺塔的移动过程，用户可以选择塔的数量和设置塔移动的速度

    动态演示汉诺塔的移动过程，用户可以选择塔的数量和设置塔移动的速度。

    汉诺塔图形演示（自动,手动,含源码)

    它允许用户输入圆盘的数量，然后开始自动或手动演示移动过程。调速功能使用户能够根据自己的理解速度调整演示的速度，这对于初学者来说非常有用，因为他们可以逐步观察每个步骤。 手动操作模式让玩家可以直接参与...

    汉诺塔演示MFCWindows

    2)按“开始”菜单演示汉诺塔移动过程，按“结束”菜单结束汉诺塔演示过程。 3)在客户区正确显示当前移动图示过程。 4)在客户区正确显示当前移动总次数、各金盘的移动次数和各针上发生的移动次数。 按“单步演示”...

    动态演示汉诺塔的自动搬运过程

    本项目“动态演示汉诺塔的自动搬运过程”旨在通过可视化的方式，帮助初级程序员理解和掌握递归思想以及图形界面开发技术。下面将详细阐述相关知识点。 首先，汉诺塔游戏的核心在于将所有盘子从一根柱子移动到另一根...

    OPENGL编写的演示汉诺塔

    在这款程序中，OpenGL被用来绘制汉诺塔的图形界面，包括三个柱子和若干个盘子，使得用户能够直观地看到盘子的移动过程。利用OpenGL的绘图函数，程序员可以精确控制盘子和柱子的形状、颜色、位置等特性，实现动态的...

    汉诺塔_汉诺塔移动步骤与步数_

    在提供的压缩包文件中，"2-3.c"可能是实现上述算法的C源代码文件，而"2-3.exe"是编译后的可执行程序，用于实际运行和演示汉诺塔问题的解决过程。通过运行这个程序，你可以输入圆盘层数，它会显示出最小的移动步数和...

    汉诺塔问题图形演示

    通过响应按钮点击事件，调用递归函数并更新界面状态，以展示汉诺塔问题的移动过程。 总的来说，汉诺塔问题的图形演示结合了递归算法、C++编程以及图形用户界面设计，为学习者提供了直观理解复杂问题解决策略的机会...

    java动态演示汉诺塔

    在这个项目中，AWT用于构建动画界面，展示盘子的移动过程。 4. **图形界面编程**：创建汉诺塔的动态演示需要对GUI编程有深入理解，包括布局管理器、事件监听和处理、组件的绘制等。在这个程序中，可能使用了Canvas...

    jQuery实现的汉诺塔游戏

    2. **自动演示**：当用户选择自动演示模式时，使用递归算法计算出所有移动步骤，并依次执行这些移动，通过改变盘子的位置来模拟移动过程。递归算法基于汉诺塔问题的解决方案，即A柱子上的n个盘子移到C柱子，借助B...

    汉诺塔移动动画

    汉诺塔移动动画则是通过可视化的方式，生动地演示了这个过程。这个.exe文件很可能是程序，当你运行它时，会显示一个交互式的界面，用动画形式演示如何按照正确步骤移动圆盘，帮助玩家理解并学习汉诺塔问题的解决策略...

    汉诺塔算法教学源码，给出了计算结果和塔盘移动过程

    描述中的"给出了计算结果和塔盘移动过程"意味着这个源码不仅实现了汉诺塔算法，还可能包含可视化界面，能够动态显示每个步骤，帮助初学者更好地理解这个过程。通过这样的可视化演示，用户可以直观地看到每个圆盘的...

    图示移动过程的汉诺塔程序

    图示移动过程的汉诺塔程序，盘子数量和移动数独可选择

    汉诺塔游戏的演示C代码

    汉诺塔游戏是一种经典的逻辑谜题，源自印度的古老传说，目标是将一叠大小不一的圆盘从一根柱子移动到另一根柱子，每次只能移动一个圆盘，并且大盘子不能位于小盘子之上。在这个过程中，还需要借助第三个柱子作为临时...

    汉诺塔 实现移动 C语言

    在实际编码过程中，理解递归的思想至关重要，这不仅适用于汉诺塔问题，还广泛应用于许多其他算法和数据结构的实现，如树的遍历、图的搜索等。通过这个过程，你不仅能学习到C语言的基础，还能深入理解递归的概念和...

    汉诺塔演示程序(包含二叉树的演示动画）

    汉诺塔演示程序结合了二叉树的演示动画，为学习和理解这两种计算机科学基础知识提供了一个生动直观的方式。首先，我们来深入探讨一下汉诺塔问题及其解决方案。 汉诺塔是一个经典的递归问题，由三个柱子和一堆大小...

    汉诺塔动画演示

    汉诺塔动画演示则是将这一逻辑过程通过可视化的方式展示出来，帮助用户更好地理解和学习汉诺塔问题的解决策略。 在使用Visual Studio 2013开发汉诺塔动画演示时，开发者可能采用了C#或C++等编程语言，利用Windows ...

    汉诺塔图形演示过程

    汉诺塔运行过程的图形演示 下载代码直接可以运行

Magicbox
Global site tag (gtag.js) - Google Analytics