フィールドの中心にボールを置く
ソースのドキュメントは次のように見えます。:
フィールドの中心の座標は何でしょうか？
それを計算し、フィールドの中心にボールを置いてください。:
- 要素は CSS ではなく JavaScript で移動させてください。
- コードは任意のボールサイズ(
10,20,30px)、フィールドサイズで動作し、指定された値で束縛されないようにしてください。
P.S. 確かに、センタリングはCSSで行うことができますが、ここでは正確にJavaScriptが必要です。 さらに、私たちはJavaScriptを使用する必要がある他のトピックやより複雑な状況にも対応します。ここでは “ウォームアップ” を行います。
ボールは position:absolute を持っています。それは、その left/top 座標は最も近い position指定された要素、つまり #field から測定されることを意味します(なぜなら #field は position:relative を持っているため)。
座標は、フィールド内部の左上の角から始まります:
内部フィールドの幅/高さは clientWidth/clientHeight です。なので、フィールドの中央は、座標 (clientWidth/2, clientHeight/2) となります。
…しかし、ball.style.left/top をこのような値にセットした場合、ボール全体ではなく、ボールの左上の端が中心になります:
ball.style.left = Math.round(field.clientWidth / 2) + 'px';
ball.style.top = Math.round(field.clientHeight / 2) + 'px';次のように見えます:
ボールの中心をフィールドの中心に揃えるために、ボールをその幅の半分だけ左に移動させ、その高さの半分だけ上に移動させる必要があります。:
ball.style.left = Math.round(field.clientWidth / 2 - ball.offsetWidth / 2) + 'px';
ball.style.top = Math.round(field.clientHeight / 2 - ball.offsetHeight / 2) + 'px';注意: 落とし穴!
<img> が幅/高さを持たないとき、コードは確実に動作しません:
<img src="ball.png" id="ball">ブラウザがイメージの幅/高さを知らないとき(タグ属性またはCSSから)、イメージの読み込みが終了するまで 0 と等しいと仮定します。
実際には、最初の読み込みの後、ブラウザは通常イメージをキャッシュし、次の読み込みではすぐにサイズを取得します。
しかし、最初の読み込み時、 ball.offsetWidth の値は 0 です。それは間違った座標に繋がります。
<img> に width/height を追加し、それを修正する必要があります:
<img src="ball.png" width="40" height="40" id="ball">…または CSS でサイズを与えます:
#ball {
width: 40px;
height: 40px;
}