-
Notifications
You must be signed in to change notification settings - Fork 12
/
Copy pathHanoiAll.htm
511 lines (470 loc) · 12.4 KB
/
HanoiAll.htm
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>汉诺塔迭代算法</title>
<style>
*{margin:0;padding:0;}
h1{margin:15px 0;}
body{width:100%;height:100%}
#content{text-align:center;}
#control{line-height:30px;margin:20px;}
#log{width:800px;text-align:center;margin:0 auto;}
#view{width:800px;height:400px;background-color: rgb(225, 248, 252);margin:20px auto;vertical-align: bottom;}
#view,#txtlog,#detaillog,.dizuo,.block{border:1px solid black;position: relative;}
.dizuo{position: absolute;width:200px;height:20px;background-color:black;top:380px;color:white;}
.shugun{position: absolute;height:380px;width:4px;background-color:black;}
.sg1{left:148px;}
.sg2{left:398px;}
.sg3{left:648px;}
.dz1{left:50px;}
.dz2{left:300px;}
.dz3{left:550px;}
#block{position:absolute;}
.block{position:absolute;background-color:rgb(172,172,235);z-index:9999;}
.log{width:228px;float:left;text-align:left;margin:0 4px;}
</style>
<script type="text/javascript" src="jquery.min.js"></script>
<script>
/**
思路:
将所有的位置变化存储到一个数组，算法执行速度很快，最后在执行动画
**/
var Hnt = (function(){
var Hnt = {};
//存储动画的数组
var movie = new Array();
//动画的顺序
var order = 0;
//前台的日志输出
var $txt = undefined;
var $detaillog = undefined;
//3个底座的数组
Hnt.A = new Array();
Hnt.B = new Array();
Hnt.C = new Array();
//3个底座的名字
Hnt.A.name = 'A';
Hnt.B.name = 'B';
Hnt.C.name = 'C';
//三个底座的顺序号
Hnt.A.val = 1;
Hnt.B.val = 2;
Hnt.C.val = 3;
//底座的top值
Hnt.defTop = 0;
//盘子的高度
Hnt.height = 0;
//已经开始动画
Hnt.isStart = false;
//动画完成
Hnt.complete = false;
//日志对象赋值
Hnt.setText = function(elem1,elem2){
$txt = $(elem1);
$detaillog = $(elem2);
}
//显示日志
Hnt.showText = function(targ,str){
if(targ!=undefined){
targ.text(targ.text()+'\n'+str);
targ.scrollTop(targ[0].scrollHeight);
}
}
//清空日志
Hnt.clearText = function(targ){
if(targ!=undefined){
targ.text('');
}
}
//获取数组的下一个位置的top
Hnt.getArrNextTop = function(arr){
var length = arr.length;
return Hnt.defTop - (length+1)*Hnt.height;
}
//获取数组的当前的top
Hnt.getArrCurrTop = function(arr){
var length = arr.length;
if(length == 0){
return Hnt.defTop;
}
else{
return Hnt.defTop - (length)*Hnt.height;
}
}
//默认属性
Hnt.options = {
speed:500, //移动速度
highlight:true,//移动过程是否变色
color:'red', //移动过程中变色
xjg:250 //横向间隔 250px
};
/**
* _from :从哪个位置 A,B,C
* _to :到哪个位置 A,B,C
* options:参数
**/
Hnt.movie = function(_from,_to,options){
//获取当前对象的属性 - 判断盘子先上还是下，上下高度是多少...不遮挡
if(_from.length==0){
//没有可以移动的盘子
console.err(_from.name+'中不存在可移动的盘子');
return;
}
var opt = $.extend(Hnt.options,options);
//获取当前的高度
var _ftop = Hnt.getArrCurrTop(_from);
//取出要移动的盘子
var _felem = _from.pop();
//获取目标位置高度
var _ttop = Hnt.getArrNextTop(_to);
//上面获取高度后，就可以将对象_felem放进去了
_to.push(_felem);
//计算两者间距
var _jg = Math.abs(_from.val - _to.val);
//通过_fx来表示方向
var _fx = (_from.val - _to.val)>0?-1:1;
//间距1为相邻，间距2为隔一个..隔一个的时候，需要考虑中间的高度，中间的必然是Hnt.B
if(_jg == 1){
//直接比较两者高度..
if(_ftop == _ttop){
//横着移动过去就OK
movie.push({
elem:_felem,
from:_from.name,
to:_to.name,
end:{left:_fx*opt.xjg},
options:opt
});
}
else if(_ftop<_ttop){
//横移
movie.push({
elem:_felem,
from:_from.name,
to:_to.name,
end:{left:_fx*opt.xjg},
options:opt,
log:false
});
//下落
movie.push({
elem:_felem,
from:_from.name,
to:_to.name,
end:{top:_ttop},
options:opt
});
}
else{
//向上移动
movie.push({
elem:_felem,
from:_from.name,
to:_to.name,
end:{top:_ttop},
options:opt,
log:false
});
//横移
movie.push({
elem:_felem,
from:_from.name,
to:_to.name,
end:{left:_fx*opt.xjg},
options:opt
});
}
}
else{
//next - 因为要从B上面经过...
var _btop = Hnt.getArrNextTop(Hnt.B);
//获取最高值
var _min = Math.min.call({},_btop,_ftop,_ttop);
if(_min == _btop){
if(_min<_ftop){
//向上移动
movie.push({
elem:_felem,
from:_from.name,
to:_to.name,
end:{top:_min},
options:opt,
log:false
});
}
//横移
movie.push({
elem:_felem,
from:_from.name,
to:_to.name,
end:{left:_fx*opt.xjg*2},
options:opt
});
if(_min<_ttop){
//下落
movie.push({
elem:_felem,
from:_from.name,
to:_to.name,
end:{top:_ttop},
options:opt,
log:false
});
}
}
else if(_min == _ftop){
//横移
movie.push({
elem:_felem,
from:_from.name,
to:_to.name,
end:{left:_fx*opt.xjg*2},
options:opt
});
if(_min<_ttop){
//下落
movie.push({
elem:_felem,
from:_from.name,
to:_to.name,
end:{top:_ttop},
options:opt,
log:false
});
}
}
else if(_min == _ttop){
if(_min<_ftop){
//向上移动
movie.push({
elem:_felem,
from:_from.name,
to:_to.name,
end:{top:_min},
options:opt,
log:false
});
}
//横移
movie.push({
elem:_felem,
from:_from.name,
to:_to.name,
end:{left:_fx*opt.xjg*2},
options:opt
});
}
}
}
//该方法用于前台获取该数组，测试使用 - 实际代码中没有用到
Hnt.getMovie = function(){
return movie;
}
//播放动画
function play(){
if(!Hnt.isStart){
alert('终止运行');
return;
}
if(order<movie.length){
var time = movie[order].options.speed;
Hnt.movie.move(movie[order],order);
order++;
setTimeout(play,time<300?300:time);
}
else{
setTimeout(function(){
Hnt.complete = true;
Hnt.showText($txt,'移动完成');
Hnt.showText($txt,'结束时间:'+new Date().toLocaleTimeString());
alert('移动完成!');
},1000);
}
}
//执行播放动画
Hnt.movie.play = function(){
if(movie.length>0&&order==0){
//执行动画
Hnt.showText($txt,'开始时间:'+new Date().toLocaleTimeString());
play();
}
}
//移动对象 - 动画
Hnt.movie.move = function(param,order){
if("top" in param.end){
$(param.elem).animate({top:param.end.top},param.options.speed,function(){
if('log' in param){
}
else{
Hnt.showText($txt,param.from+' - > '+param.to);
}
Hnt.showText($detaillog,'order:'+order+' elem:'+param.elem+' --\> top:'+param.end.top);
});
}
else{
$(param.elem).animate({left:'+='+param.end.left+'px'},param.options.speed,function(){
if('log' in param){
}
else{
Hnt.showText($txt,param.from+' - > '+param.to);
}
Hnt.showText($detaillog,'order:'+order+' elem:'+param.elem+' --\> left:'+param.end.left);
});
}
}
//初始化
//num : 盘子数量
Hnt.initBlock = function(num){
//清空原有内容
$('#block').empty();
//清空数组
Hnt.A.length = 0;
Hnt.B.length = 0;
Hnt.C.length = 0;
movie.length = 0;
order = 0;
Hnt.clearText($txt);
Hnt.clearText($detaillog);
Hnt.isStart = false;
var opt = {
maxWidth:180,
minWidth:20,
height:360,
minHeight:5
},
//起始坐标
start = {top:380,left:60},
_height,_width,_wstep;
_height = opt.height/num -1;
Hnt.defTop = start.top;
Hnt.height = _height+1;
if(start.top-num*(_height)<0){
alert("输入的数量太大，以至于块的高度超出范围,请重试!");
return;
}
_wstep = (opt.maxWidth - opt.minWidth)/(2*num);
if(_wstep == 0){
alert("输入的数量太大,以至于每个块的宽度差小于2px,请重试!");
return;
}
//开始创建 - 数字小的在最上面
for(var i = 0;i<num;i++){
Hnt.createBlock(
{
order:(num-i),
top:start.top-((i+1)*(_height+1)),
left:(start.left+_wstep*i),
height:_height,
width:opt.maxWidth - i*2*_wstep
});
}
}
//创建盘子
Hnt.createBlock = function(position){
$('<div>').addClass('block')
.addClass('bl'+position.order)
.css({
top:position.top,
left:position.left,
height:position.height,
width:position.width
})
.appendTo($('#block'));
Hnt.A.push('.bl'+position.order);
}
//开始
Hnt.start = function(n){
Hnt.move(n,Hnt.A,Hnt.B,Hnt.C);
};
//汉诺塔移动算法
Hnt.move = function(n,a,b,c){
if(n>=1){
Hnt.move(n-1,a,c,b);
Hnt.movie(a,c,{});
Hnt.move(n-1,b,a,c);
}
}
//返回该对象
return Hnt;
})();
$(function(){
//设置日志对象
Hnt.setText('#txtlog','#detaillog');
//开始
$('#start').click(function(){
if(!Hnt.isStart){
Hnt.isStart = true;
Hnt.start($('#num').val());
Hnt.movie.play();
}
});
//初始化
$('#init').click(function(){
Hnt.initBlock($('#num').val());
});
//数字正则
var regx = /[1-9]+[0-9]*/g
//改变时间
$('#speed').change(function(){
if(regx.test(this.value)){
if(this.value>=100&&this.value<=10000){
//ok
Hnt.options.speed = this.value;
}
else{
alert('请输入100到10000之间的整数');
return;
}
}
else{
alert('请输入100到10000之间的整数');
return;
}
});
});
</script>
<style>
#test{width:500px;height:200px;position: relative;background-color: yellow;}
.t1,.t2{width:100px;height:20px;background-color:red;position: absolute;}
.t1{top:0px;}
.t2{top:50px;}
</style>
</head>
<body>
<div id="content">
<div id="control">
<h1>汉诺塔演示程序<a href="http://blog.csdn.net/isea533" style="text-decoration:none;">@isea533</a></h1>
<label for="num">数量:</label>
<input type="text" id="num" value="4" />
<label for="speed">速度(单位ms):</label>
<input type="text" id="speed" value="500" />
<input type="button" value="初始化" id="init" />
<input type="button" value="开始" id="start" />
</div>
<div id="view">
<div id="block">
<!-- 这里存放各种块 -->
</div>
<div class="shugun sg1"></div>
<div class="shugun sg2"></div>
<div class="shugun sg3"></div>
<div class="dizuo dz1">A</div>
<div class="dizuo dz2">B</div>
<div class="dizuo dz3">C</div>
</div>
<div id="log">
<div class="log">移动步骤</div><div class="log" style="width:500px;">详细操作(上下左右移动操作会分步执行 - 对应一个order)</div>
<div style="clear:both;">
<textarea name="txtlog" id="txtlog" cols="30" rows="10"></textarea>
<textarea name="detaillog" id="detaillog" cols="77" rows="10"></textarea>
<!--[if IE]>
<script type="text/javascript">
$('#detaillog').attr('cols',64);
</script>
<![endif]-->
</div>
</div>
</div>
</body>
</html>