(C)WorldWideSoftware
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>JavaScriptでの同時キー入力</title>
</head>
<body>
<a href="http://www.wwsft.com">(C)WorldWideSoftware</a><br>
<canvas id="bg" width="640" height="640"></canvas><br>
シューティングゲームを想定した同時キー入力のサンプルです<br>
カーソルキーで4方向(同時押しで8方向)に移動します<br>
スペースキーかZで弾を撃ちます(連打の判定はしていません。押しっ放しで撃てます)<br>
※スペースキーを押し続けると、環境によってはその他1つのキーしか判定できない場合があります<br>
<a href="key01src.html">ソースコードの確認</a>
<script>
//描画面(キャンバス)の準備
var cvs = document.getElementById("bg");
var ctx = cvs.getContext("2d");
//キー入力
var key = [];
for(var i=0; i<256; i++) key[i] = 0;
window.onkeydown = function(event) { key[event.keyCode]++; }
window.onkeyup = function(event) { key[event.keyCode] = 0; }
//自機
var myX = 320, myY = 480;
//弾丸用の変数
var BULLET_MAX = 10;
var bullet = 0;
var buX = [], buY = [];//座標
for(var i = 0; i < BULLET_MAX; i++) { buX[i] = 0; buY[i] = 0; }
//背景の星
var STAR_MAX = 50;
var stX = [], stY = [];//座標
for(var i = 0; i < STAR_MAX; i++) {
stX[i] = parseInt(Math.random()*640);
stY[i] = parseInt(Math.random()*640);
}
//線を描く関数
ctx.lineWidth = 4;
ctx.lineCap = "round";
function line(x1, y1, x2, y2, col) {
ctx.strokeStyle = col;
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.stroke();
}
//メイン処理
function mainProc() {
//背景
ctx.fillStyle = "black";
ctx.fillRect(0, 0, 640, 640);
for(var i = 0; i < STAR_MAX; i++) {
stY[i] = (stY[i]+1+i)%640;
line(stX[i], stY[i], stX[i], stY[i]+2, "blue");
}
//自機の移動
if(key[37] > 0 && myX > 0) myX -= 10;
if(key[39] > 0 && myX < 640) myX += 10;
if(key[38] > 0 && myY > 0) myY -= 10;
if(key[40] > 0 && myY < 640) myY += 10;
line(myX-30, myY+40, myX+30, myY+40, "yellow");
line(myX, myY-40, myX-30, myY+40, "yellow");
line(myX, myY-40, myX+30, myY+40, "yellow");
//弾の発射
if(key[32] > 0 || key[90] > 0) {
if(buX[bullet] == 0 && buY[bullet] == 0) {//発射されていない状態
buX[bullet] = myX;
buY[bullet] = myY-40;
bullet++; if(bullet == BULLET_MAX) bullet = 0;
}
}
//弾の処理
for(var i = 0; i < BULLET_MAX; i++) {
if(buX[i] == 0 && buY[i] == 0) continue;//発射されていない状態
buY[i] -= 40;
line(buX[i], buY[i]-20, buX[i], buY[i]+20, "lime");
if(buY[i] < 0) { buX[i] = 0; buY[i] = 0; }//画面上部に消えたら発射されていない状態にする
}
setTimeout( mainProc, 1000/30 );//リアルタイム処理
}
mainProc();//処理スタート
</script>
</body>
</html>
←動作確認に戻る