JavaScriptプログラミングで簡単ゲーム作りcanvasを使った例

JavaScript[canvas]で作るシューティングゲーム例

砲台から玉を発射し的に当てる簡単なゲームです。

左右キーで砲台を移動、スペースキーで玉を発射し上部の的に当てて得点を競う内容ですが・・・

サンプルプログラムは、ソースコードを探し出してコピペして終わりとか

テキスト通りにマネして作って終わりといった内容になりがちですが、、、内容も理解していくとよりスキルアップできることでしょう。

自分で考えながら、プログラミングをしていくこと、コードを記述し理解していくことが重要だと考えます。

覚え書き程度ですが・・・

台から玉を発射して動く的に当てる

簡単ゲームを作っていきます。

HTMLを準備しよう！！

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”utf-8″ />
<script type=”text/javascript” src=”./sample.js”></script>
<title>シューティング</title>
</head>
<!– 最初の処理を呼び出す –>
<body onload=”init();”>
<div style=”text-align:center”>
<h1>シューティングゲーム</h1>
<p id=”info”>時間　　　得点　　</p>
<!– キャンバスの設置 –>
<canvas id=”canvas” style=”background-color:#eee;” width=”640″ height=”480″></canvas>
</div>
</body>
</html>

canvas エリアを定義した、HTML

完成するとこんな感じです。

※この時点で、あれ？文字化けしたぞ！！

みたいな感じになるかも知れません。

そうなった場合、文字コードの箇所

charset=”utf-8″　←ここです。

保存したテキストファイルの文字コードを確認してみて下さい。

TeraPadなどのテキストエディタで、文字コードは確認できます。

HTMLが準備できたら

作っていきます。

このまま、このHTMLファイルを使って記述してもいいし

上記例だと、sample.js といった別のファイルに記述してもいいです。

絶対にファイルを分けないとダメ！！

といった決まりもありません。

この程度の内容であれば、どちらでもよいでしょう。

あくまでも、個人で楽しむものですから・・・

HTMLファイルが準備できたら

玉を放つ台を作ってみましょう。

玉を出す台（砲台）

玉（ミサイル）

的（マト）

といった感じで、部分的に作りながら

少しづつ作りこんでいきましょう。

いきなり、サンプルコードの上から下まで

をマネして作るのではなく、

理解しながらといった作業をお勧めします。

コピペで作れて、＼(^o^)／

ではなく、内容も確認しながら

といったことをするとスキルアップしていくことでしょう。

砲台の作成

砲台は、左右キーで動くようにしていきます。

が、、、まずは、描画するとこから

jsファイル側に記述して確認してみよう。

// 砲台
var batteryHeight = 12;
var batteryWidth = 40;
var batteryX = 0;//起動時処理：起動時にのみ実行される
function init() {
var cvs = document.getElementById(“canvas”);
var ctx = cvs.getContext(‘2d’);
batteryX = (cvs.width-batteryWidth) / 2;
draw();

}function draw() {
var cvs = document.getElementById(“canvas”);
var ctx = cvs.getContext(‘2d’);
ctx.clearRect(0, 0, cvs.width, cvs.height);
drawbattery();
}
// 砲台の描写
function drawbattery() {
var cvs = document.getElementById(“canvas”);
var ctx = cvs.getContext(‘2d’);
ctx.beginPath();
ctx.rect(batteryX, cvs.height-batteryHeight, batteryWidth, batteryHeight);
ctx.fillStyle = “#000000”;
ctx.fill();
ctx.closePath();
}

こんな感じになるとOK