JavaScript
HTML5
canvas
ゲーム制作

ゲームプログラミング入門~その1~【シューティングゲーム】


ゲームプログラミングに挑戦!

前回作成したアニメーションプログラムを応用して「シューティングゲーム」の作成に挑戦してみることにしました。

ゲームプログラミング入門(ロケットもどきを操作できるようにしてみた)

わからないところもたくさんあり、エンジニアの友人に聞きながら作成に取り組んでいますが、何分「初心者」なのでわからないことばかりです。

今回は「ロケット(もどき)」をキーボードで動かせるところまで作成してみました。

<!DOCTYPE html>

<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="robots" content="noindex,nofollow">
<title>WEB SCREEN APP</title>
<style>
#screen {
border: solid 1px #000000;
background-color: #000000;
}

</style>
</head>
<body>
<canvas id="screen" width="860" height="485"></canvas>
<script>
//canvas要素のDOM(Document Object Model)を取得
var canvas = document.getElementById('screen');
var context;
var selfBody;
var selfPosX = 20; // ロケットの画面横方向の位置
var selfPosY = 190; // ロケットの画面縦方向の位置
var selfSpeed = 10; // ロケットのスピード

var frameWidth = 860; // CANVAS横サイズ
var frameHeight = 485; // CANVAS縦サイズ

// キーボードの状態
// [ 上 , 下 , 右 , 左 ]
var keyStatus = [false, false, false, false]

document.onkeydown = keyDown; //キーダウンの検知設定
document.onkeyup = keyUp; //キーアップの検知設定

//コンテキストの取得可否チェック
if(canvas.getContext){

context = canvas.getContext('2d');

window.onload = function() {
selfBody = new Image();

selfBody.src = "rocket.png";

selfBody.onload = function(){
draw(context);
startAnimation();
}
}
}

function startAnimation(){
setInterval(draw, 33);
}

function draw(){
// CANVASをクリア
context.fillStyle = "rgb(255, 255, 255)";
context.fillRect(0, 0, frameWidth, frameHeight);
context.clearRect(0, 0, frameWidth, frameHeight);

// ロケットの移動と描画
move();
context.drawImage(selfBody, selfPosX, selfPosY);
}

// ロケットの移動
function move(){
if ( keyStatus[0] ){ // UP
if ( selfPosY > 0 ){
selfPosY -= selfSpeed;
}
}

if ( keyStatus[1] ){ // DOWN
if ( selfPosY < 400 ){
selfPosY += selfSpeed;
}
}

if ( keyStatus[2] ){ // RIGHT
if ( selfPosX < 775 ){
selfPosX += selfSpeed;
}
}

if ( keyStatus[3] ){ // LEFT
if ( selfPosX > 0 ){
selfPosX -= selfSpeed;
}
}
}

// キーダウン
function keyDown(e){
if(e.keyCode === 38 ){ keyStatus[0] = true; }//UP KEY
else if(e.keyCode === 40 ){ keyStatus[1] = true;}//DOWN KEY
else if(e.keyCode === 39 ){ keyStatus[2] = true;} //RIGHT KEY
else if(e.keyCode === 37 ){ keyStatus[3] = true;}//LEFT KEY
}

// キーアップ
function keyUp(e){
if(e.keyCode === 38 ){ keyStatus[0] = false;}//UP KEY
else if(e.keyCode === 40 ){ keyStatus[1] = false;}//DOWN KEY
else if(e.keyCode === 39 ){ keyStatus[2] = false;} //RIGHT KEY
else if(e.keyCode === 37 ){ keyStatus[3] = false;}//LEFT KEY
}
</script>
<div id="link"></div>
</body>
</html>


参考サイト

プログラミング初心者のための「HTML・CSS・Javascript」で作るシンプルゲームアプリ開発入門