Comments
Transcript
ダーツ得点計算 2015 年 6 月 12 日 徐 丙鉄 方針：ハードディスクに習っ
2015 年 6 月 12 日
徐 丙鉄
方針：ハードディスクに習って、矢の当たった位置をトラックとセクタで指定する。
ダーツ得点計算
的の座標系
targetX, targetY
図 1: ディスクの構造。
(A) トラック
(B) （幾何学的）セクタ
(C) トラックセクタ
from: wikipedia
<!DOCTYPE html>
<html>
<head>
<style>
html, body{ margin: 0; padding: 0; }
.arrow{ position: absolute;
div タグで，角丸の半径を 50％として円を描き，
border: solid white 1px;
背景を塗りつぶす。position 絶対指定で left と top
background-color: red;
で位置を指定する。
width:20px; height: 20px;
border-radius: 50%;
}
</style>
</head>
<body>
<img src="darts.png">
<script>
var X0= 498; var Y0 = 477;
//的の中心座標
var targetR = [14, 59, 195, 216, 306, 365]; //的のトラックの半径
var N = 20;
//的のセクタの数
var sectorTheta = 360/20;
//１セクタ当たりの中心角
var diskWidth = 20;
//矢が当たった場所に描く円の直径
var degree = 180.0/Math.PI;
//クリックした位置の client 座標取得
function getClickedXY(event){
var x = event.clientX;
var y = event.clientY;
drawDisk(x,y)
calcTrackAndSector(x,y);
client 座標：client(ブラウザ)の左上隅を原点とした
座標。その他に screen（モニタの左上隅を原点とし
た座標）やドキュメントの左上隅を原点としたグロ
ーバル座標がある。グローバル座標は sclient 座標に
scrollLeft,scrollTop を加えて得る。
}
//クリックした点に赤丸を描く
function drawDisk(x,y){
var disk = document.createElement("div");
div 要素を生成し，
disk.className = "arrow";
デザインは arrow クラスとして css で
disk.style.left = (x-0.5*diskWidth)+"px";
指定。
disk.style.top = (y-0.5*diskWidth)+"px";
位置は style.left と style.top で指定。
document.body.appendChild(disk);
}
//クリックした点に対して、トラックとセクタを計算する
function calcTrackAndSector(x,y){
var targetX = x-X0;
// 的の中心を原点とする座標系
var targetY = Y0-y;
// y 軸は上を正とする
//的の中心からの距離 r を計算
var r = Math.sqrt(targetX*targetX+ targetY*targetY);
//track の計算
var track=10; //的外れを 10 とした
for( var i = targetR.length-1; i>=0; i--){
R = targetR[i];
if( r < R ){ track=i; }else{ break; }
}
θ=Math.atan2(y, x)
//セクタの計算
θ
//y 軸となす角度を計算
x
var theta = Math.atan2(targetX,targetY)*degree;
//alert("x=" + x + ", y=" + y + "r=" + r + ", track=" + track + ", theta=" + theta);
theta += 0.5*sectorTheta; //sectorTheta の半分だけ時計回りに加算
var sector = Math.floor( theta/sectorTheta );
alert("track="+track+", sector="+sector);
}
document.addEventListener("click", getClickedXY );
</script></body></html>
y
//クリックイベント登録
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/atan2
構文 Math.atan2(y,x) 説明：atan2 メソッドは、(x,y) 座標のシータ角を表す -PI から PI までの数値を返します。 これは、正
の X 軸から (x,y) 座標までをラジアン単位で表した逆時計回りの角度です。このメソッドへ渡す引数は、
y 座標が 一番目、x 座標が 二番目であることに注意してください。
atan2 は、x と y が分割されて渡され、atan は、それらの 2 つの引数の比率が渡されます。
atan2 は Math オブジェクトの静的なメソッドなので、自ら生成した Math オブジェクトのメソッドとしてでは
なく、常に、Math.atan2() として使用するようにしてください。
Math.atan2( ±0, x ) は、x < 0 に対しての ±PI を返します。
Math.atan2( ±0, x ) は、 x > 0 に対しての ±0 を返します。
Math.atan2( y, ±0 ) は、 y > 0 に対しての -PI/2
Math.atan2( ±y, -Infinity ) は、無限大 と y > 0 に対しての ±PI を返します。
Math.atan2( ±y, +Infinity ) は、 無限大 と y > 0 に対しての ±0 を返します。
Math.atan2( ±Infinity, +x ) は、無限大 と x に対しての ±PI/2 を返します。
Math.atan2( ±Infinity, -Infinity ) は、±3*PI/4 を返します。
Math.atan2( ±Infinity, +Infinity ) は、±PI/4 を返します。
Math.atan2( ±0, -0 ) は、±PI を返します。
Math.atan2( ±0, +0 ) は、±0 を返します。