📄 hanoi.htm

📁 JavaScript实例教程,有99个例子
💻 HTM
字号:
<html>
<head>
<title>河内塔问题</title>
<style>
.10pt{font-size:9pt;color:red}
.30pt{font-size:30pt;font-family:文鼎行楷碑体;color:#BBB7F4}
</style>
</head>
<body>
<script LANGUAGE="JavaScript">
function preload() {
this.length = preload.arguments.length;
for (var i = 0; i < this.length; i++) {
this[i] = new Image();
this[i].src = preload.arguments[i];
  }
}
var pics = new preload("disk1.gif","disk2.gif",
  "disk3.gif","disk4.gif","disk5.gif","disk6.gif",
  "disk7.gif","pole.gif", "disk1h.gif","disk2h.gif",
  "disk3h.gif","disk4h.gif","disk5h.gif","disk6h.gif",
  "disk7h.gif");

var selectedr = null;
var selectedc = null;
var maxposts = 3;
var maxdisks = 7;
var all_posts = 3;
var startpost = 1;
var endpost = (startpost-1 < 0 ? maxposts-1 : startpost-1);
var disks = 7;
var imgwidth = 160;
var imgheight = 14;
var game_is_over = false;
var board = new Array(maxposts);
board[0] = new Array(maxdisks + 1);
board[1] = new Array(maxdisks + 1);
board[2] = new Array(maxdisks + 1);

function initboard(startpost, disks) {
var len = board[0].length;
selectedc = null;
selectedr = null;
game_is_over = false;
endpost = (startpost-1 < 0 ? maxposts-1 : startpost-1);
for (i = 0; i < len; i++) {
board[0][i] = 0;
board[1][i] = 0;
board[2][i] = 0;
}
for (i = len-disks, j = 0; i < len; i++, j++) {
board[startpost][i] = len - j - 1;
   }
}

function drawall() {
for (j=0; j<board.length; j++) {
for (i=0; i<board[j].length; i++) {
draw(j,i, getName( board[j][i]));
   }
}
message("可以开始了!选择一块碟子来移走.");
}

function restart(start) {
startpost = start;
disks = document.forms[0].disc.options[document.forms[0].disc.selectedIndex].text;
initboard(startpost,disks);
drawall();
}
initboard(startpost, disks);

function getName( num ) {
if (num == 0) return "post.gif";
return "disk" + num + ".gif";
}

function message(str) {
if (!game_is_over)
document.disp.message.value = str;
}

function isempty(num) {
for (i = 0; i < board[num].length; i++) {
if ( board[num][i] != 0) return false;
}
return true;
}

function topmost(num) {
for (i = 0; i < board[num].length; i++) {
if (board[num][i] != 0) return  i;
}
return -1; 
}

function ispost(i,j) {
return (board[j][i] == 0);
}

function istopdisk(i,j) {
return (board[j][i-1] == 0);
}

function drawboard() {
document.writeln("<CENTER><h2>The Towers of Hanoi</h2><p>");
document.writeln("<table cellspacing=0 cellpadding=0 border=0>");
document.write("<tr>");
for (j = 0; j < board.length; j++) {
  document.write("<td>");
  document.write("<a href='javascript:clicked("+0+","+j+")'>");
  document.write("<img src='posttop.gif' ");
  document.write("border=0></a><br>");
  for (i=0; i< board[0].length; i++) {
    document.write("<a href='javascript:clicked("+i+","+j+")'>");
    document.write("<img src='");
    document.write(getName(board[j][i]) + "' name='pos"+ j + i + "' ");
    document.write("border=0><br>");
    document.write("</a>");
  }
  document.writeln("</td>");
}
document.write("</tr><tr align=center><td>A<td>B<td>C")
document.write("</tr></table>");

document.write("<form name='disp'><textarea name='message' ");
document.write("wrap=virtual rows=1 class=10pt cols=40></textarea><br>");
document.write("碟子数目: <select name=\"disc\" ");
document.write("size=1><option>3<option>4<option>5");
document.write("<option>6<option selected>7</select>");
document.write("<input type=button value=\"开始游戏\" ");
document.write("onClick=\"restart(startpost);\"><input ");
document.write("type=button value=\"作弊模式!\" onClick=\"restart(startpost); ");
document.write("setTimeout('hanoi(disks,startpost,endpost)',400)\"></form>");
}

function draw(x,y,name) {
document.images["pos"+x+""+y].src =name;
}

function clicked(i,j) {
document.forms[0].message.focus();
if (game_is_over)  restart(startpost = endpost);
if (!isselection() && ispost(i,j)) {
message("选择碟子移动。"); return; }
if (!ispost(i,j)) { toggle(j); return; };
if (ispost(i,j) && selectedc == j) {
message("Move the piece to a different post."); return; }
if (!legalmove(j)) {
message("移动非法。请重新选择。"); return; }
move(j); return;
}

function legalmove(j) {
if (isempty(j)) return true;
return (board[j][topmost(j)] < board[selectedc][selectedr]);
}

function isselection() {
return selectedc != null;
}

function toggle( num ) {
var toppos = topmost(num);
if (selectedc == num && selectedr == toppos) {
selectedc = null; selectedr = null;
draw(num,toppos,"disk" + board[num][toppos] + ".gif");
message("选择碟子移动。");
return;
}
if (isselection()) {
draw(selectedc,selectedr,"disk" + board[selectedc][selectedr] + ".gif");
}
selectedc = num; selectedr = toppos;
draw(num,toppos,"disk" + board[num][toppos] + "h.gif");
message("单击想要移到的位置.");
}

function move( num ) {
var toppos = (!isempty(num) ? topmost(num) : board[num].length);
board[num][toppos-1] = board[selectedc][selectedr];
board[selectedc][selectedr] = 0;
draw(selectedc,selectedr,"post.gif");
draw(num,toppos-1,"disk" + board[num][toppos-1] + ".gif");
selectedc = null; selectedr = null;
message("选择碟子移动。");
game_over();
}

function hanoi(no_of_disks, start_post, goal_post) {
if (no_of_disks > 0) {
var free_post = all_posts - start_post - goal_post;
hanoi (no_of_disks - 1, start_post, free_post);
toggle(start_post);
delay(1000);
move(goal_post);
delay(1000);
hanoi (no_of_disks - 1 , free_post, goal_post);
  }
}

function delay(num) {
for (i = 0; i < num; i++) ;
}

function game_over() { 
var filledpost = null;
var val = 0;
for (k = 0; k < board.length; k++)  { 
val += ( isempty(k) ? 1 : 0 ); 
if (!isempty(k)) filledpost = k;
}
if (val == 2 && isempty(startpost)) {
message("你赢了!");
game_is_over = true;
endpost = filledpost;
}
return game_is_over;
}

drawboard();
message("可以开始了!选择一块碟子来移走.");
</script>
<center>
<font class=30pt>
河内塔问题<br>
这是一个流传很久的游戏:
</font>
<table class=30pt>
<tr><td>1.有三根杆子A,B,C。B杆上有若干碟子
</tr><tr><td>2.每次移动一块碟子,小的只能叠在大的上面
</tr><tr><td>3.把所有碟子从B杆全部移到A杆上.
</tr>
</table>
<center>
</body>
</html>
⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -