遠眼鏡屋2

javascriptの勉強、任意の石を置く

作業は次のとおり。
これまで作った九路盤、黒石、白石(管理人の場合それぞれ goban.png、 kuro.png、 siro.png)は全部おなじフォルダーに入れる。
そのフォルダーに下記の javascriptプログラム Touko7.html を入れる。
そのうえで Touko7.html をダブルクリックしてブラウザを起動。広がった画面の指示どおりマウスをクリックして、九路盤上に黒石または白石を貼り付ける。

問題点。1回のクリックで石の選択と盤上の座標選択の2つの情報を取得する方法がわからないので、便宜上個別に取得した2情報を確認欄で合成して、盤上に貼り付けるようにしたが、手間がかかるのが難点。
ただし、右方の経過欄に棋譜に相当するものが並んだので、これを出発点に棋譜再現プログラムを勉強できるかもしれない。

◎Touko7.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type ="text/javascript">
<!--

var i = 0;
var j = 0;

function getColorSiro(event){
document.getElementById("tex1").value = "S,";
}

function getColorKuro(event){
document.getElementById("tex1").value = "K,";
}

function getMousePosition(event){
var obd = new Object();
obd.x = event.layerX;
obd.y = event.layerY;
document.getElementById("tex1").value += obd.x + "," + obd.y ;
}

function showStone(){
var array = [9];
array = document.getElementById("tex1").value;

kekka = array.split(",");
if( kekka[0] == "S" ){
i++;
var si = i.toString();
var wi = "w" + si;
document.getElementById(wi).style.left = (kekka[1]-20) +"px";
document.getElementById(wi).style.top = (kekka[2]-20) +"px";
document.getElementById("xy").value += "; "+ array;

}else if( kekka[0] == "K"){
j++;
var sj = j.toString();
var bj = "b" + sj;
document.getElementById(bj).style.left = (kekka[1]-20) +"px";
document.getElementById(bj).style.top = (kekka[2]-20) +"px";
document.getElementById("xy").value += "; "+ array;

}else{}
}

//-->
</script>
</head>
<body bgcolor = "brown">

<div style="position:absolute; left:0; top: 0;" onclick ="getMousePosition(event);"><img src="goban.png"></div>
<div style="position:absolute; left:200; top: 480; color:white" >[操作例] 1.石をクリック 2.九路盤上をクリック 3.確認欄を見る 4.確定ボタン押し下げ</div>

<div style="position:absolute; left:550; top:100;" onclick="getColorSiro(event);" ><img src="siro.png"></div>
<div style="position:absolute; left:550; top:200;" onclick="getColorKuro(event);" ><img src="kuro.png"></div>

<form style="position:absolute; left:500; top:300;" name ="f1" action="">
<font color="white">確認欄</font>
<input type="text" size="10" id="tex1" name="tex1" value=""><br><br>
 <input type="button" value ="確 定" onclick="showStone();">
</form>

<div style="position:absolute; left:800; top: 60;">
<font color="white">クリックした石と座標(経過)</font><br>
<textarea id="xy" cols=35 rows=15></textarea><br>
</div>
<div id="w1" style ="position:absolute; left:500; top:600;" ><img src="siro.png" width="40" height="40"></div>
<div id="w2" style ="position:absolute; left:500; top:600;" ><img src="siro.png" width="40" height="40"></div>
<div id="w3" style ="position:absolute; left:500; top:600;" ><img src="siro.png" width="40" height="40"></div>
<div id="w4" style ="position:absolute; left:500; top:600;" ><img src="siro.png" width="40" height="40"></div>
<div id="w5" style ="position:absolute; left:500; top:600;" ><img src="siro.png" width="40" height="40"></div>
<div id="b1" style ="position:absolute; left:500; top:700;" ><img src="kuro.png" width="40" height="40"></div>
<div id="b2" style ="position:absolute; left:500; top:700;" ><img src="kuro.png" width="40" height="40"></div>
<div id="b3" style ="position:absolute; left:500; top:700;" ><img src="kuro.png" width="40" height="40"></div>
<div id="b4" style ="position:absolute; left:500; top:700;" ><img src="kuro.png" width="40" height="40"></div>
<div id="b5" style ="position:absolute; left:500; top:700;" ><img src="kuro.png" width="40" height="40"></div>

</body>
</html>

[同日後刻追記]
前記プログラムの能率の悪さを改善する。石の種別をフォームに記載するかわりに、グローバル変数として保持することにより、クリックの回数が2回ですむようになった。

touko6.html