JavaScript

同時押しが可能なキー入力処理

ポイント

onkeypressイベントで「キーが押され続けている」という状態の処理するとキーの同時押しができません。
その回避策としてここではonkeydownイベントとonkeyupイベントを使って処理をすることにします。

まず、キーの数だけ要素数を持った配列を用意します。
onkeydownイベントが発生したとき、押されたキーのキーコードを調べて
そのキーコードに対応するインデックス番号を持った配列要素に1を代入します(フラグを立てます)
逆に、onkeyupイベントが発生したとき、同様にキーコードを調べて
キーコードに対応するインデックス番号の配列要素を0に戻します(フラグを解除します)

この配列をゲームの処理をする関数側で読み取って、
配列の要素が1だった場合そのキーに対応する処理を行います。

KeyEVT.gif

サンプル

HTMLソース

<html>
<head>
<title>同時押し可能なキー入力処理</title>

<script language="JavaScript" charset="utf-8">

//キー状態を保持する配列
KeyState = new Array(244);

//イベントリスナ
document.onkeydown=keydown;
document.onkeyup=keyup;

function keydown(e){
	//キーが押し込まれたときの処理
	keycode = getKEYCODE(e);//キーコードの取得
	KeyState[keycode] = 1;  //キーコード番目の配列要素を1にする
}

function keyup(e){
	//キーが持ち上げられたときの処理
	keycode2 = getKEYCODE(e);
	KeyState[keycode2] = 0;  //キーコード番目の配列要素を0に戻す
}

function getKEYCODE(e){
	//キーコードを返す
	//ブラウザごとにキーコード取得関数が違うので分岐処理をする
	if(document.layers)
		return  e.which
	else if(document.all)
		return  event.keyCode
	else if(document.getElementById)
		return  e.charCode
	else return null
}


//↓メインの処理
IMG_X = 100;
IMG_Y = 100;
setInterval( 'keyExecute()', 10);


function keyExecute(){

	//IE用
	if(KeyState[38] == 1){//上キーが押されているとき
		IMG_Y--;
	}
	if(KeyState[40] == 1){//下キーが押されているとき
		IMG_Y++;
	}
	if(KeyState[39] == 1){//右キーが押されているとき
		IMG_X++;
	}
	if(KeyState[37] == 1){//左キーが押されているとき
		IMG_X--;
	}
	//代入
	document.getElementById("dummy").style.top = IMG_Y;
	document.getElementById("dummy").style.left = IMG_X;

	//キーコードチェック用----------------------------
	tex ="";
	for(i = 0;i<KeyState.length;i++){
		if(KeyState[i] == 1){
			tex += " " + i;
		}
	}
	document.testform.test1.value = tex;
	//------------------------------------------------
}
</SCRIPT>
<Font size = 2>↑↓←→キーで移動(IE専用)</Font>
<form NAME ="testform">
入力中のキーコード<input TYPE="text" NAME="test1" value=0 size = 50>
</form>

<IMG name="dummy" src="IMG/test.gif" style="position:absolute; top:20px left:20px">

</head>
</body>
</html>





[ 戻る ]

添付ファイル: fileKeyEVT.gif 680件 [詳細]

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2012-03-31 (土) 04:36:40 (2581d)