TEXTや画像を自由に配置

【Source Code】からがソースコードなのですが、自由に上から書いているので乱れています。

テキスト 150,120

テキスト 300,200

TEXTや画像を自由に配置する機能は JavaScript の仕様ではありませんが、ゲームを作成する上で必要なので説明します。
【Source Code】

<body>
<h1>TEXTや画像を自由に配置</h1>

<div style="position:absolute;left:150px;top:120px;">テキスト 150,120</div>
<div style="position:absolute;left:300px;top:200px;">テキスト 300,200</div>

<img src="img/enemy1.gif" style="position:absolute;left:50px;top:150px;">
<img src="img/enemy2.gif" style="position:absolute;left:200px;top:320px;">
<img src="img/enemy3.gif" style="position:absolute;left:450px;top:250px;">

TEXTを自由に配置します。
left:999px; で左端からの位置を、top:999px; で上からの位置を設定します。

<br>
<div style="position:absolute;left:150px;top:120px;">テキスト 150,120</div>
<div style="position:absolute;left:300px;top:200px;">テキスト 300,200</div>

イメージ画像の場合も同様です。

<img src="img/enemy1.gif" style="position:absolute;left:50px;top:150px;">
<img src="img/enemy2.gif" style="position:absolute;left:200px;top:320px;">
<img src="img/enemy3.gif" style="position:absolute;left:450px;top:250px;">

描画したイメージ画像の上から切り抜いた画像を重ねて描画します。
ffx2s.jpg サイズは 240*120 ピクセルなので、切り抜く範囲(rect)を「上, 右, 下, 左」の順に指定します。
左の人物の座標は、左上座標(Y-X)が 0-20 で右下座標(Y-X)が 80-120 なので 0px,120px,80px,20px になります。
右の人物の座標は、左上座標(Y-X)が 0-120 で右下座標(Y-X)が 80-180 なので 0px,180px,80px,120px になります。
描画座標(left,top)の値は元の全体画像の左端(上端)が 0px に合わせられるので、その分調整して下さい。

<img src="img/ffx2s.jpg"
  style="clip:rect(0px,120px,80px,20px);position:absolute;left:0px;top:200px;">
<img src="img/ffx2s.jpg"
  style="clip:rect(0px,180px,80px,120px);position:absolute;left:50px;top:300px;">

前田稔の超初心者のプログラム入門
 超初心者のプログラム入門(JavaScript)