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);
}





[list]
[*][url=http://dl.iteye.com/topics/download/27da5c69-69bd-336b-8ab9-e43a84693d7b]汉诺塔.rar[/url] (27.4 KB)


[*]下载次数: 24

[/list]



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


[*]大小: 5.2 KB

</ul>



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


[*]大小: 5.5 KB

</ul>



[list]
[*][url=#]查看图片附件[/url]

[/list]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值