ゼロからわかる現代JavaScript

ここは、ふぇりあ１６歳が不定期に連載しているオンライン小説のページです。

VNIふぇりあ16歳へ

ゼロからわかる現代JavaScript

４１．キーコードの取得2

今度はキーコードとＤＯＭを使って
キャラクターを動かしてみましょう

つまりは、過去に学んだことを組み合わせてみようということです。

今回使用するソースコード

//X座標の初期値
var x = 0;
//キャラクターの加速度
var PLAYER_VX = 2;
//右キー
var KEY_RIGHT = 39;
//左キー
var KEY_LEFT = 37;

function main() {

　　//イメージ要素の作成
　　img = document.createElement("img");
　　//<body>に要素を追加
　　document.body.appendChild(img);
　　//画像ファイルを読み込み
　　img.src = "f_mail2.gif";
　　//スタイルを絶対値に指定
　　img.style.position = "absolute";

　　//キャラの描画と更新
　　sub();

　　//ドキュメントオブジェクトのキーダウンイベントにメソッドを結びつける
　　document.onkeydown = function () {
　　　　//キーコードを取得する(IE)
　　　　var kc = event.keyCode;
　　　　//キーコードを文字に変換
　　　　var chr = String.fromCharCode(kc);
　　　　//DOMを使って出力
　　　　document.getElementById("str1").innerHTML = kc + "は「" + chr + "」、X座標は" + x;

　　　　//右キーが押されたらＸ座標を加算する
　　　　if (kc == KEY_RIGHT) {
　　　　　　//Ｘ座標が400でないとき
　　　　　　if (x < 400)
　　　　　　　　x += PLAYER_VX; //加速度をつけています。

　　　　　　if (x >= 400)
　　　　　　　　alert("クリア！手紙を無事に届けました！");
　　　　}
　　　　//左キーが押されたらＸ座標を減算する
　　　　if (kc == KEY_LEFT) {
　　　　　　if(x != 0)
　　　　　　x--;
　　　　}
　　}

}

function sub() {
　　//キャラの位置を更新
　　img.style.left = x + "px";

　　tm = setTimeout("sub()", 50);
}

やっていることはシンプルかつ簡単で

キーコードでキーが押されたことを判定し

グローバル変数xの値(X座標)を加算または減算するということです。
それでも簡単なゲームらしきものが出来上がります。

凄いですね！

またPLAYER_VXなどの大文字の変数は定数として
数字では分かりにくいものを、分かりやすく書く手法で、そうした方がいいと思います。

実行結果

コラム：

テガミバチって手紙を届けるの途中で凄いモンスターが出てきますよね。
仕事は何でも命がけでやれということかも