キー入力でビームを発射し移動させる（単発）


■動作ブラウザ　【 IE:4.0　 NN:-】
Internet Explorer Netscape Navigator Opera iCab Safari
3.0 4.0 4.5 5.0 5.5 6.0 2.0 3.0 4.0x 4.x 6.0 7.0 6 7 2.x 1.0
Windows × ○ - ○ ○ ○ × × × × × × × × - -
Macintosh × ○ ○ ○ - - × × × × × × × - × ×
UNIX - - - - - - × × × × × × - - - -

ポイント function moveBeam()
{
by = by - 15;
document.images["beam"].style.left = bx;
document.images["beam"].style.top = by;
if (by < -40)
{
bFlag = false;
}else{
setTimeout("moveBeam()",100);
}
}
説　　明 キー入力でビームを発射させるにはビームのXY座標を示す変数とビームが発射されているかどうかを示すフラグ変数を用意します。フラグ変数はtrueであれば発射中、falseであれば発射されていないとします。キーが押されたら発射キーかどうか調べ、フラグ変数も調べてfalseだったら発射するようにします。発射するビームのXY座標を指定しタイマーを設定します。このタイマーで定期的にビームの移動処理を行います。ビームの移動はY座標を減らし、画面外まで移動したらビームのフラグ変数をfalseにしてビームが発射されていないようにします。画面内の場合には再度タイマーを設定しビームの移動処理を行います。
サンプル <html>
<head>
<title>キー入力でビームを発射し移動させる（単発）</title>
<script Language="JavaScript"><!--
bx = 0;
by = 0;
bFlag = false;
function moveBeam()
{
by = by - 15;
document.images["beam"].style.left = bx;
document.images["beam"].style.top = by;
if (by < -40)
{
bFlag = false;
}else{
setTimeout("moveBeam()",100);
}
}
function startBeam()
{
kc = event.keyCode;
c = String.fromCharCode(kc);
if ((bFlag == false) && (c == " "))
{
bx = 62; //　ビームの発射X座標、自機のX座標に合わせる
by = 100; //　ビームの発射Y座標、自機のY座標に合わせる
bFlag = true; //　発射されている事をフラグで示す
setTimeout("moveBeam()",100);
}
}
// --></script>
</head>
<body onKeydown="startBeam()">
<img src="beam.gif" name="beam" style="position:absolute;left:0px;top:-100px;">
<img src="fighter.gif" name="myChar" style="position:absolute;left:50px;top:100px;">
</body>
</html>
補足説明 なし

■サンプルスクリプトを実行する　>>実行
 ■各ブラウザでの動作結果を見る　>>View!
写真素材 PIXTA