jquery演示汉诺塔移动过程

        前几天用递归写汉诺塔程序，写了半天没写出来（呵呵，比较笨啊），后来在网上搜了下代码才恍然大悟。
    今天下午上班闲着没事就写了个演示汉诺塔的移动过程的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);		
}

 
   
     
       

         
• 汉诺塔.rar (27.4 KB)

         
         
• 下载次数: 24

       

     
   
     
        <ul style="display:none;">
         

<img src='http://dl.iteye.com/upload/attachment/599196/72d3e0fa-6386-359d-866b-859bc0c44a2d-thumb.png' class='magplus' title='点击查看原始大小图片' />

         
         

大小: 5.2 KB

        </ul>
     
   
     
        <ul style="display:none;">
         

<img src='http://dl.iteye.com/upload/attachment/599198/66d521b7-c372-394a-8ba6-a9a1a539f4cd-thumb.png' class='magplus' title='点击查看原始大小图片' />

         
         

大小: 5.5 KB

        </ul>
     
   
   
     

       
• 查看图片附件