十字キーで移動するスクリプト

□追記
矢印だとスクロールするからWASDで動くようにした。以下矢印->WASDへ脳内置換ヨロシク

ちょっとJavaScriptの勉強用に矢印キーで動かすスクリプトを組んだ。

単純に onkeydown 時に top / left を変更するだけではキーの押しっぱなしに対応出来ないことに気づいて、setInterval を使って書いた。setInterval の返り値は Numeric な事に泣いた。しょうがないので移動してる事をあらわすフラグをたてて作ったのだけども、いいのかなこんなので。

↓上下左右キーで動く。FirefoxとIE7で動作確認した。なんでたこルカなのかは・・・なんとなくだ。

以下長ったらしいコード。あんまり参考にしないほうがいいと思われ。でも載せる。

var moveObj = function(t) {
	var obj = document.getElementById(t);
	var move_px  = 10;
	var move_sec = 10;
	this.top_si   = false;
	this.down_si  = false;
	this.left_si  = false;
	this.right_si = false;
	this.down = function(){
		if (this.top_si) {
			clearInterval(this.top_si);
			this.top_si = false;
		}
		this.down_si = setInterval( function(){ obj.style.top  = parseInt(obj.style.top) + move_px + 'px'; } , move_sec);
	}
	this.top = function(){
		if (this.down_si) {
			clearInterval(this.down_si);
			this.down_si = false;
		}
		this.top_si = setInterval( function(){ obj.style.top  = parseInt(obj.style.top) - move_px + 'px'; } , move_sec);
	}
	this.left = function(){
		if (this.right_si) {
			clearInterval(this.right_si);
			this.right_si = false;
		}
		this.left_si = setInterval( function(){ obj.style.left  = parseInt(obj.style.left) - move_px + 'px'; } , move_sec);
	}
	this.right = function(){
		if (this.left_si) {
			clearInterval(this.left_si);
			this.left_si = false;
		}
		this.right_si = setInterval( function(){ obj.style.left  = parseInt(obj.style.left) + move_px + 'px'; } , move_sec);
	}
}
var d = function(e) {
	var e = e||window.event;
	switch (e.keyCode) {
		case 65: if (!m.left_si)  m.left();  break;
		case 87: if (!m.top_si)   m.top();   break;
		case 68: if (!m.right_si) m.right(); break;
		case 83: if (!m.down_si)  m.down();  break;
	}
}
var u = function(e) {
	var e = e||window.event;
	switch (e.keyCode) {
		case 65: clearInterval(m.left_si);  m.left_si  = false; break;
		case 87: clearInterval(m.top_si);   m.top_si   = false; break;
		case 68: clearInterval(m.right_si); m.right_si = false; break;
		case 83: clearInterval(m.down_si);  m.down_si  = false; break;
	}
}
document.onkeydown = d;
document.onkeyup =   u;
var m = new moveObj('move_me');