キャラクタをキー入力に応じて上下左右に動かす


■動作ブラウザ　【 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 - - - - - - × × × × × × - - - -

ポイント kc = event.keyCode;
c = String.fromCharCode(kc);
if (c == "A") x = x -2;
if (c == "D") x = x +2;
if (c == "W") y = y -2;
if (c == "X") y = y +2;
document.images["myChar"].style.left = x;
document.images["myChar"].style.top = y;
説　　明 キャラクタをキー入力に応じて上下左右に動かすにはevent.keyCodeで入力されたキーコードを取得します。このまま、キーコードで判別する以外にString.fromCharCode()を使って文字列に変換して判別することもできます。押されたキーがAキーであれば左側に移動させるためX座標を示す変数の値を減らします。逆にDキーであれば右側に移動させるためX座標を示す変数の値を増やします。押されたキーがWであれば上に移動させるためY座標を示す変数の値を減らします。Xキーであれば下に移動させるためY座標を示す変数の値を増やします。あとは変数の値を移動させるキャラクタのスタイルシートプロパティに入れます。
サンプル <html>
<head>
<title>キャラクタをキー入力に応じて上下左右に動かす</title>
<script Language="JavaScript"><!--
x = 50;
y = 100;
function moveChar()
{
kc = event.keyCode;
c = String.fromCharCode(kc);
if (c == "A") x = x -2;
if (c == "D") x = x +2;
if (c == "W") y = y -2;
if (c == "X") y = y +2;
document.images["myChar"].style.left = x;
document.images["myChar"].style.top = y;
}
// --></script>
</head>
<body onKeydown="moveChar()">
<img src="char.gif" name="myChar" style="position:absolute;left:50px;top:100px;">
</body>
</html>
補足説明 なし

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