javascript实现汉诺塔动画效果
javascript实现汉诺塔动画效果
当初以为不用html5也很简单，踩了javascript单线程的大坑后终于做出来了，没事可以研究下，对理解javascript的执行过程还是很有帮助的，代码很烂大家凑合着看。
<html>
<head>
<meta charset="UTF-8">
<title>Tower of Hanoi 2.0.0</title>
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js"></script>
<style>
table {
border: 1px solid #eee;
float: left;
}
td {
width: 15px;
height: 10px;
}
caption {
text-align: center;
}
</style>
<script>
$(function() {
var tr = $('<tr></tr>');
for (var i = 0; i < 17; i++) {
tr.append($('<td></td>').clone());
}
$('table').each(function() {
for (var i = 0; i < 9; i++) {
$(this).append(tr.clone());
}
});
InitCanva();
});
var polA = [];
var polB = [];
var polC = [];
var Steps = [];
polA.pol = "A";
polB.pol = "B";
polC.pol = "C";
//inti canva
function InitCanva() {
polA = [];
polB = [];
polC = [];
polA.pol = "A";
polB.pol = "B";
polC.pol = "C";
Steps = [];
var level = $('#level').val();
$("td").css("background", "#FFF");
for (var i = 1; i <= level; i++) {
polA.push(i * 2 - 1);
}
Draw(polA);
$("#step").click();
}
function Step() {
if (Steps.length > 0) {
var s = Steps.shift();
DrawUI(s);
} else {
clearInterval(window.t);
}
}
function Draw(pol) {
var tmp = [];
tmp.pol = pol.pol;
for (var i = 0; i < pol.length; i++) {
tmp.push(pol[i]);
}
Steps.push(tmp);
}
function DrawUI(pol) {
var tb = $('#pole' + pol.pol);
var level = pol.length;
tb.find("td").css("background", "#FFF");
var trs = tb.find("tr:gt(" + (9 - level - 1) + ")");
for (var i = 0; i < trs.length; i++) {
var min = 8 - (pol[i] + 1) / 2;
var max = 8 + (pol[i] + 1) / 2 - 1;
$(trs[i]).find("td:gt(" + min + ")").css("background", "#000");
$(trs[i]).find("td:gt(" + max + ")").css("background", "#FFF");
}
}
function MoveHanoi(level, pol_A, pol_B, pol_C) {
if (level == 1) {
console.log(pol_A.pol + '-->' + pol_C.pol);
var m = pol_A.shift();
pol_C.reverse();
pol_C.push(m);
pol_C.reverse();
Draw(pol_A);
Draw(pol_C);
} else {
MoveHanoi(level - 1, pol_A, pol_C, pol_B);
MoveHanoi(1, pol_A, pol_B, pol_C);
MoveHanoi(level - 1, pol_B, pol_A, pol_C);
}
}
function Play() {
InitCanva();
var level = $('#level').val();
MoveHanoi(level, polA, polB, polC);
window.t = setInterval(function() {
$("#step").click();
}, 300);
}
function Delay(minseconds) {
var t = +new Date();
while (+new Date() - t < minseconds) {}
}
</script>
</head>
<body>
Level:
<select name="level" id="level" onchange="InitCanva()">
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
<button onclick="Play()" class="btn-primary">Play</button>
<button id="step" onclick="Step()" class="btn-primary" style="display:none;">Step</button>
<hr>
<div>
<table id="poleA">
<caption>
<h3>Pole A</h3></caption>
</table>
<table id="poleB">
<caption>
<h3>Pole B</h3></caption>
</table>
<table id="poleC">
<caption>
<h3>Pole C</h3></caption>
</table>
</div>
</body>
</html>
转载请注明出处, 原文链接: http://www.cnblogs.com/wancy86/p/hanoi_tower.html
