ホーム へ       サンプルページ   ハノイの塔 hanois.htm(説明・応用マニュアル)

ハノイの塔(ゲーム)。  ディスクを最少回数で、右端に移動させる。  □小Win版、タイマー付き。  DHTML。   配色などのカスタマイズはテキストエディターなどで可。  all 対応。  コピー、編集し、簡単にWebで応用できまっ、(^ ^)。

デモ : hanoi.htm のクリック。  再開 : [F5]キー、[@更新] 。  タイマー : クリックでリセット。 

 

< ご使用方法 >

 ・ 保存hanois.htm(説明)、hanoi.htmtimer1.htm を右クリック、【名前を付けてリンクを保存】 - <保存する場所>: ……、などで。  ※: 変わってしまった、ファイル名や、*.htm 中のパスは要修正。

 ・ ペーストは、hanoi.htm をテキストエディターで開き、ホームページ作成ソフトなどの ”テキストモード で、新しいページや hogehoge.htm(=任意の挿入先ファイル名) の、 <head> 〜 </head> の任意の行間に (*1)を、さらに <body> 〜 </body>の任意の行間に (*2) をペーストします。   ※: テキストモードコード/HTMLタグ挿入/HTMLメニュー など。

 ・ 編集 : hogehoge.htm に テキストモードでペースト 後は、ホームページ作成ソフトのデザインや通常モード、テキストモード、テキストエディターで編集します。  下記の(例) (*1) と、(*2) を参考に太字部分の編集を任意に行います。 

※: 外部ドメイン(サイト)にアップロートの画像などの使用は、非表示に注意。  画像の alt タグは不可、サイズ指定の pt などの省略は注意。  スクリプト構文中への 改行混入に注意。

 ・ アップロードは、hogehoge.htm と同じホルダーに、使用してる画像、*.htm をアップロードします。   別ホルダーの場合は、hogehoge.htm の該当パス注意。

 ・ 作動テストは Edge〜 などで。  更新の確認は、ブラウザーなどのキャッシュのクリア後に実施。  (1) [F5]キ- or Ctrl+Rキー を押し、最新データ読み込みで。  更に、(2) Edgeを全て閉じ、再起動を行い、【Edge】 - 右上 [……] - [設定] - [プライバシー、検索、サービス] - [閲覧デ-タをクリア] - [クリア-するデ-タの選択] - [v]閲覧の履歴 -[今すくクリア] をクリック。  留めに、(3) サーバーのファイルを一旦削除。

 ・ 関連情報 : 色記号色記号5〃6フォントスタイルシートリファレンスホームページ開設入門HTMLをテキストエギタ-で編集

 

(*1) : hanoi.htm (例)         挿入先の  <head> 〜 </head> の、 部分にペーストします。

 HTMLの編集方法   (*1) をテキストエディターで開き、下記↓のHTMLを挿入先ファイルにペースト、太字部分を編集し使用。
〔この列ペースト不要〕   

シフトJIS使用(削除不可)

ieなどに表示するアイコンファイル名(削除可)

<style type= </style>は(削除可)
(*1)〜(*3)表タイトル背景

body 文字色 背景色 下線
ハイパーリンク 〃
表示済みの〃
マウスオーバー時の〃
クリック中の〃
フォント

リンクを新しいWinで開くを標準(削除可)※:target= いろいろ
同じフレーム=_self、ページ全体=_top、親フレーム=_parent
お気に入り、タスクバーに表示するページ名(≠ファイル名)

 

 

 

 

 

 

 

 

PCからのメッッセージ
以下、同じ。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

プレイ方法の説明

 

<meta http-equiv="Content-Type" content="text/html; charset=x-sjis">

<link REL="SHORTCUT ICON" href="favicon.ico">

<style type="text/css"><!--
.xxx0 { background: #F9F8F9 url('wttec.gif'); }
.xxx1 { background-color:#E3E0DC; }
.xxx2 { background-color:#FFFFFF; }
body { color:#000000; background: #F9F8F9 url('wttec.gif'); text-decoration:none; }
a:link { color:#3C0055; background-color:#FBFAFE; text-decoration:none; }
a:visited { color:#270037; background-color:#EDECEF; text-decoration:none; }
a:hover { color:#1F002E; background-color:#D2F3F4; text-decoration:underline; }
a:active { color:#1F002E; background-color:#F5FFD2; text-decoration:underline; }
font { font-size:12px;line-height:13px;}
body,tr,td,form{ font-family:MS PGothic,MS Gothic,Verdana; font-size: 12px}
 --></style>

<base target="_blank">

<title>サンプルページ  ハノイの塔</title>

<!-- ☆ ---------- ↓ この間をコピー、編集、ペーストします。 ---------- -->
<style type="text/css">
table {font:bold 13px Verdana}
p {font:normal 11px Tahoma,Verdana}
input,select {font:normal 12px Tahoma,Verdana}
select {width:40px}

====  この間、説明を省略。  ====

}
}
f.minmove.value=f.diskno.options[f.diskno.options.selectedIndex].value;
f.yourmove.value=0;
}

function newGame(obj){
if (movectr>0 && !gameOver && !stop){
if (confirm("このままでは、ゲームはうまくいきません。 中止(やり直し)しますか?。")){
initVars();
drawDisks(parseInt(obj.options[obj.options.selectedIndex].text));
}
else document.hanoi.diskno.options.selectedIndex=prevIndex;
}
else {
initVars();
drawDisks(parseInt(obj.options[obj.options.selectedIndex].text));
}
}

function initializeDrag(disk,e){
if (!e) e=event;
if (stop){
alert("[取り消し]ボタンを押せば、ゲームは終わりです。 [再開]ボタン押すか、ディスク選択を止めます。");
return;
}

====  この間、説明を省略。  ====

if (gameStatus) {
f.btnUndo.disabled=true;
minmove = parseInt(f.minmove.value);
if (movectr==minmove) msg="\nおめでとう、ございます!!、\^o^/ (^o^)。 "+minmove+" 回、最少回数で、ございます。"
else if (movectr>minmove) msg="\nもっとうまく、できますよ!。"
else msg="";
alert("完了、!!、…*。"+msg);
gameOver=true;
}
return;

====  この間、説明を省略。  ====


function solve(btn){
if (btn.value=="Solve"){
if (movectr>0 && !gameOver && !stop)
if (!confirm("このままでは、ゲームはうまくいきません。 中止(やり直し)しますか?。")) return;
btn.value="Stop";
initVars();
stop=false;
demo=true;
var f=document.hanoi;
f.btnIns.disabled=true;
f.btnRes.disabled=true;
f.btnUndo.disabled=true;
disknum = parseInt(f.diskno.options[f.diskno.options.selectedIndex].text);
drawDisks(disknum);
getMoves(0, 2, 1, disknum);
t=window.setTimeout("moveDisk()",delay);
}
else {
if (t) {
window.clearTimeout(t);
btn.value="Solve";
frm.btnIns.disabled=false;
frm.btnRes.disabled=false;
t = null;
stop=true;
demo=false;
}

}
}

function moveDisk(){
frm = document.hanoi;
disk=disksOnTowers[arrFr[pos]][0];
pushDisk(disk,arrTo[pos]+1);
getNewTop(arrFr[pos]+1,null);
getNewTop(arrTo[pos]+1,disk);
movectr++;
frm.yourmove.value=movectr;
pos++;
if (movectr<parseInt(frm.minmove.value)) t=window.setTimeout("moveDisk()",delay);
else {
alert("貴方も、きっと"+movectr+" 回の移動で、できますよ!、…*。");
gameOver=true;
stop=false;
frm.btnSolve.value="Solve";
frm.btnIns.disabled=false;
frm.btnRes.disabled=false;
}
}

function getMoves(from,to,empty,numDisk){
if (numDisk > 1) {
getMoves(from, empty, to, numDisk - 1);
arrFr[idx] = from;
arrTo[idx++] = to;
getMoves(empty, to, from, numDisk - 1);
}
else {
arrFr[idx] = from;
arrTo[idx++] = to;
}
}


function unDo(btn){
disk=disksOnTowers[currTower-1][0];
pushDisk(disk,prevTower);
getNewTop(currTower,null);
getNewTop(prevTower,disk);
movectr--;
document.hanoi.yourmove.value=movectr;
btn.disabled=true;
}

function displayIns(){
var msg="タワー1からタワー3に、ディスクを全て移動させましょう。\n";
msg+="一度に、移動できるディスクは、一枚です。\n";
msg+="常に、小さいディスクが上、大きいディスクが下に、なるようにしましょう。";
alert(msg);
}
</script>
<!-- ☆ ---------- ↑ この間をコピー、編集、ペーストします。 ---------- -->
 

 

(*2) hanoi.htm (例)        挿入先の  <body> 〜 </body> の、 部分にペーストします。

HTMLの編集方法   (*2)をテキストエディターで開き、下記↓のHTMLを挿入先ファイルにペースト、太字部分を編集し使用。
〔この列ペースト不要〕

<bofy>部に記述のJavaScript on

タイマー表示位置 タイマーファイル名 サイス
小Winに表示ページ
小Winサイズ 吹き出し
 リンク文字 ページ ← 応用マニュアル

 

 

 

タイトル

 

 

 

 

 

 

 

 

 

 

ディスク色

 

 

 

 

 

 

 

 

 

 

設定

 

 

 

 

 

 

カウント

 

 

 

 

 

 

ボタン 吹き出し

 

<body onload="init();" onselectstart="return false" oncontextmenu="return false">
<!-- ★ ↑の onload="init();" onselectstart="return false" oncontextmenu="return false" と、 ↓ この間をコピー、編集、ペーストします。  -->

<div style="position:absolute; left:470px; top:28px;"><iframe name="frame003" src="timer1.htm" scrolling="no" style="position:relative; z-index:10; visibility:visible; top:; left:; width:45px; height:20px; padding-left:0; padding-right:1; padding-top:-20px; padding-bottom:3px;background: #F9F8F9 url('wttec.gif');" target="_self"></iframe> <a HREF="#" onClick="window.open('hanoi.htm', 'XX','status=yes,scrollbars=yes,width=700,height=410,resizable=yes,directories=no,screenX=5,left=5,screenY=5,top=5')" target="_self" title="親Winを閉じると、□は下層に移動しますが、タスクバーの[Edge]アイコン から上層に。">□小Win版</a>  <a href="hanois.htm" target="_blank">応用マニュアル</a></div>

<form name="hanoi">
<div id="title" style="position:absolute; left:-250px; top:-250px; width:120px; height:12; font-family:; font-size:pt; font-weight:; color:; border-style:inset; border-width:0; border-color:#C1BAD1; padding-left:5; padding-right:5; padding-top:2; padding-bottom:2; background-color:#FFFFF5;" class="oka1" id="001" title="=(^。^)="><span style="font-family:Tahoma; font-size:10pt; font-weight:bold; background-color:#514C63; color:#FCD73D; letter-spacing:2px;"> ハノイの塔 </span>
</div>

<div id="tower1" class="container" style="left:-250px;top:-250px;width:200px;height:200px" onmousemove="indexTo=1">
<div id="verttower1" class="towervert" style="left:99px;top:10px;width:3px;height:170px"></div>
<div id="horiztower1" class="towerhoriz" style="left:0px;top:180px;width:200px;height:2px"></div>
<div class="tower" style="font:bold 12px Tahoma; COLOR:#00B09A;">タワー 1</div>
</div>

<div id="tower2" class="container" style="left:-250px;top:-250px;width:200px;height:200px" onmousemove="indexTo=2">
<div id="verttower2" class="towervert" style="left:99px;top:10px;width:3px;height:170px"></div>
<div id="horiztower2" class="towerhoriz" style="left:0px;top:180px;width:200px;height:2px"></div>
<div class="tower" style="font:bold 12px Tahoma; COLOR:#8A40CF;">タワー 2</div>
</div>

<div id="tower3" class="container" style="left:-250px;top:-250px;width:200px;height:200px" onmousemove="indexTo=3">
<div id="verttower3" class="towervert" style="left:99px;top:10px;width:3px;height:170px"></div>
<div id="horiztower3" class="towerhoriz" style="left:0px;top:180px;width:200px;height:2px"></div>
<div class="tower" style="font:bold 12px Tahoma; COLOR:#C92874;">タワー 3</div>
</div>

<div id="disk1" class="disk" style="left:-250px;top:-250px;width:50px;height:19px;background-color:#D65C87" onmousedown="initializeDrag(this,event)" onmouseup="dropDisk(this)" title="Disk 1"></div>
<div id="disk2" class="disk" style="left:-250px;top:-250px;width:70px;height:19px;background-color:#E0E778" onmousedown="initializeDrag(this,event)" onmouseup="dropDisk(this)" title="Disk 2"></div>
<div id="disk3" class="disk" style="left:-250px;top:-250px;width:90px;height:19px;background-color:#F7D0D1" onmousedown="initializeDrag(this,event)" onmouseup="dropDisk(this)" title="Disk 3"></div>
<div id="disk4" class="disk" style="left:-250px;top:-250px;width:110px;height:19px;background-color:#CBBBFF" onmousedown="initializeDrag(this,event)" onmouseup="dropDisk(this)" title="Disk 4"></div>
<div id="disk5" class="disk" style="left:-250px;top:-250px;width:130px;height:19px;background-color:#F6E5CD" onmousedown="initializeDrag(this,event)" onmouseup="dropDisk(this)" title="Disk 5"></div>
<div id="disk6" class="disk" style="left:-250px;top:-250px;width:150px;height:19px;background-color:#C3CE26" onmousedown="initializeDrag(this,event)" onmouseup="dropDisk(this)" title="Disk 6"></div>
<div id="disk7" class="disk" style="left:-250px;top:-250px;width:170px;height:19px;background-color:#C2E7F7" onmousedown="initializeDrag(this,event)" onmouseup="dropDisk(this)" title="Disk 7"></div>
<div id="disk8" class="disk" style="left:-250px;top:-250px;width:190px;height:19px;background-color:#E3E3E3" onmousedown="initializeDrag(this,event)" onmouseup="dropDisk(this)" title="Disk 8"></div>

<div id="settings" class="container" style="left:-250px;top:-250px;width:260px;">
<table>
<tr><td>ディスク数</td>
<td>
<select name="diskno" onchange="newGame(this)" onclick="prevIndex=this.options.selectedIndex">
<option value="7" selected>3</option>
<option value="15">4</option>
<option value="31">5</option>
<option value="63">6</option>
<option value="127">7</option>
<option value="255">8</option>
</select>
</td></tr>
<tr><td>最少移動回数&nbsp;&nbsp;</td>
<td><input name="minmove" style="border:none" size="3" value="255" readonly="readonly" /></td></tr>
<tr><td>移動回数結果</td>
<td><input name="yourmove" style="border:none" size="3" value="0" readonly="readonly" /></td></tr>
<tr><td colspan="2" align="center">
<!-- ♪
<input type="button" name="btnIns" value="Instructions" onclick="displayIns()" />
<input type="button" name="btnRes" value="Restart" onclick="newGame(document.hanoi.diskno)" />
<input type="button" name="btnUndo" value="Undo" onclick="unDo(this)" disabled="disabled" />
<input type="button" name="btnSolve" value="Solve" onclick="solve(this)" />
  -->
<input type="button" name="btnIns" value="説明" onclick="displayIns()" style="background:#F7D0D1; color:#000000; cursor:hand;" title="遊び方" />
<input type="button" name="btnRes" value="再開" onclick="newGame(document.hanoi.diskno)" style="background:#F6E5CD; color:#000000 cursor:hand" title="もっと、やる?。" />
<input type="button" name="btnUndo" value="1回戻る" onclick="unDo(this)" style="background:#EAE1D9; color:#000000; cursor:hand" title="1つ前に、戻る。" />
<input type="button" name="btnSolve" value="Solve" onclick="solve(this)" style="background:#DBD8E9; color:#000000; cursor:hand" title="模範プレイ開始/停止" />


</td></tr>
</table>
<p> </p>
</div>
</form>
<!-- ★ ---------- ↑ この間をコピー、編集、ペーストします。 ---------- -->
 

ハロー(^. ^)