JavaScript[canvas]で作るシューティングゲーム例
砲台から玉を発射し的に当てる簡単なゲームです。
左右キーで砲台を移動、スペースキーで玉を発射し上部の的に当てて得点を競う内容ですが・・・
サンプルプログラムは、ソースコードを探し出してコピペして終わりとか
テキスト通りにマネして作って終わりといった内容になりがちですが、、、内容も理解していくとよりスキルアップできることでしょう。
自分で考えながら、プログラミングをしていくこと、コードを記述し理解していくことが重要だと考えます。
義務教育で始まるといわれているプログラミングですが、「自分でも考える」といったことをすれば将来的に役立つことでしょう。
プログラミングは、部分的に少しづつ作りこんでいきます。
慣れてくると、全体を・・・といった感じになりますが、
全体像のイメージがあり、共通変数やモジュールの構想ができれば、可能でしょうが・・・
慣れるまでは、少しづつ試行錯誤を繰り返しながら作っていきましょう。
以下、部分的に作りこんでいく手順例です。
動くモノは、こちら
独学で学ぶなら→ゲームを作りながら楽しく学べる HTML+CSS+JavaScriptプログラミング
作成手順
1.Htmlファイルを用意しよう！！
Webブラウザで動かせるように、準備していきましょう！！
canvas とい描画エリアに描いて動かすプログラミング例です。
<!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>
2.玉を発射する砲台を描いてみよう！！
Htmlファイル内にJavaScriptコードを記述してもできますが、今回は別のJSファイルで作っていきます。
以下、sample.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();
}
こんな感じに描画されるとＯＫ
以下、作成していく手順のみを紹介しますが、作っていく順番はどこからでもＯＫです。
慣れてくるまでは、部分的に動きを確認しながら、作っていくのがよいでしょう。
3.玉を出す部分を同じように描画していきます。
4.描画が終わると、左右キーで動くようにしていきましょう。
ここまでできれば、砲台は終わりです。
5.玉を描いて、動かしてみよう！！
6.最終的には、的に当たるか？上まで届くと、消えます。
7.まずは、簡単に動くのは1つの玉だけで作ってみましょう。
玉まで発射されるサンプルコード
var batteryHeight = 12;
var batteryWidth = 40;
var batteryHeight2 = 20;
var batteryWidth2 = 20;
var batteryX = 0;
var batteryX2 = 0;
var batterySpeed = 5;
// キー入力状態
var rightPressed = false; // →キー
var leftPressed = false; // ←キー
var spacePressed = false; // Spaceキー
// 玉
var tamaRadius = 10;
var tamaX = 0;
var tamaY = 0;
var tamadx = 2;
var tamady = -2;
var tamaMoving = false;
var tamaSpeed = 10;
document.addEventListener(‘keydown’, keyDown, true); //キー押下時処理を登録
document.addEventListener(‘keyup’, keyUp, true); //キー押下終了時処理を登録
function keyDown(e) {
if(e.keyCode == 39 ) {
rightPressed = true;
}
else if(e.keyCode == 37 ) {
leftPressed = true;
}
else if(e.keyCode == 32 ) {
spacePressed = true;
}
}
function keyUp(e) {
if(e.keyCode == 39 ) {
rightPressed = false;
}
else if(e.keyCode == 37 ) {
leftPressed = false;
}
}
//起動時処理：起動時にのみ実行される
function init() {
var cvs = document.getElementById(“canvas”);
var ctx = cvs.getContext(‘2d’);
batteryX = (cvs.width-batteryWidth) / 2;
batteryX2 = (cvs.width-batteryWidth2) / 2;
draw();
}
function draw() {
var cvs = document.getElementById(“canvas”);
var ctx = cvs.getContext(‘2d’);
ctx.clearRect(0, 0, cvs.width, cvs.height);
drawbattery();
if(rightPressed && batteryX < cvs.width-batteryWidth) {
batteryX += batterySpeed;
batteryX2 += batterySpeed;
}
else if(leftPressed && batteryX > 0) {
batteryX -= batterySpeed;
batteryX2 -= batterySpeed;
}
// 玉の移動
if( tamaMoving ){
tamaY -= tamaSpeed;
drawball();
if ( tamaY < 0){
tamaMoving = false;
}
if( spacePressed ) {
spacePressed = false;
}
}else{
if( spacePressed ) {
;tamaX = batteryX2 + tamaRadius;
;tamaY = cvs.height – batteryHeight2 – tamaRadius;
drawball();
tamaMoving = true;
spacePressed = false;
}
}
requestAnimationFrame(draw);
}
// 砲台の描写
function drawbattery() {
var cvs = document.getElementById(“canvas”);
var ctx = cvs.getContext(‘2d’);
ctx.beginPath();
ctx.rect(batteryX, cvs.height-batteryHeight, batteryWidth, batteryHeight);
ctx.rect(batteryX2, cvs.height-batteryHeight2, batteryWidth2, batteryHeight2);
ctx.fillStyle = “#000000”;
ctx.fill();
ctx.closePath();
}
// 玉の描画
function drawball() {
var cvs = document.getElementById(“canvas”);
var ctx = cvs.getContext(‘2d’);
ctx.beginPath(); // パスの開始
ctx.arc(tamaX, tamaY, tamaRadius, 0, Math.PI*2); // 円
ctx.fillStyle = “#0000ff”; // 描画の塗りつぶしの色
ctx.fill(); // 塗りつぶし
ctx.closePath(); // パスの終了
}
玉の動きが終わると、的を作ります。
8.的は、上部で左から右に動くようにしています。
9.的を動かすことができると、玉が当たった時の処理を追加していきましょう。
的も一定間隔のスピードではなくランダムなスピードに変えるなどすると、より難易度が高くなり面白い作りになることでしょう。
10.最後に得点とタイム時間を追加すると完成です。
