【JavaScript】divにidをふってゲームボーイ的なサムシングを作る①　〜キーボードの値取得編〜

RPG的サムシング作りました
先日時間を見つけてRPG的なサムシングを作ってみました！

その時に最初まったく分からなかったのが
キーボードからの値の取得方法。

onkeyupとかonkeydownとか便利なものがあることは知っていたのですが
Javaでサーブレット書いている時は全部フレームワークに投げてしまっていたので
自分で実際にキーボードのイベントを拾って来て何か処理をするのは

５年前に教授の顔写真使って恋愛シミュレーションゲーム作って以来でした。
忘れた時のための備忘録としてちょっくらメモしておきたいと思います。

まとめてメモると時間かかりすぎて死ぬので
今日はキーボードでキャラクターを操作できるようにするところまで。

コード

<html>
	<head>
		<title>My Sample Game</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	</head>

	<body>
		<div id="hoge" style="position:absolute;border: 1px #000 solid;width:30px;height:30px;">
		</div>

		<script>
			window = document.getElementById("hoge");
			window.addEventListener('keypress',KeyPress,true);

			function KeyPress(event){
				var hoge = document.getElementById("hoge");

				var code = event.keyCode;
				var left = (hoge.style.left).match(/\d+/g);
				var top = (hoge.style.top).match(/\d+/g);

				switch(code){
					case 37:
						hoge.style.left = left - 10;
						break;
					case 39:
						hoge.style.left = left - -10;
						break;
					case 38:
						hoge.style.top = top - 10;
						break;
					case 40:
						hoge.style.top = top - -10;
						break;
				}
			}

			function start(){
				var hoge = document.getElementById("hoge");

				hoge.style.left = 0;
				hoge.style.top = 0;
			}
			window.onload = start();
		</script>
	</body>
</html>

こんなんになりました。

やってしまいがちなのが”id.style.left”とかで拾って来た値にpxがついているのを失念していて
結局String型として10px10みたいな文字列をつくり出してしまうミスとか

そもそも開始時点で座標を読み取る(指定する)のを忘れており
ずっとnullが返り続けるとかそんなところがあげられるのではないかと思います。

ちなみに５年ぶりにonkey系のイベント触った僕は両方やらかしました…。

そのうち
そのうち時間見つけて画面遷移と
キャラの方向転換(画像の切り替え)のメモも残しておきたいなと思います。

それ書いたら次は
RPGならではの敵発生のランダム関数の使い回しのコツとか
経験値の処理とか色々メモっておけたら良いな・・・。