Canvas de shooting 制作のポイント

Canvas de Shootingからみる
HTML5 Canvasを用いた
ゲームの作り方

~ HTML5 Canvas × JavaScript Development ~

まずは自己紹介します！

名前とか：
　宗定洋平（@yoheiMune）
　YoheiM.NET(http://www.yoheim.net/)ブロガー

趣味：
　テニス、プログラミング（最近は、HTML5,
Objective-Cが中心）

今日お話するネタはこちらです

http://www.yoheim.net/labo/html5/canvasShooting.html

今日お話するネタはこちらです

"Canvas de Shooting"

このゲームの作り方の
解説を通して、

HTML5でのゲーム制作する際の技術ポイントを
少しでもお伝え出来ればと思います！

ライブラリ無しで
　　　いきます！！

ライブラリなしだとこんな大変なのか！とか、

ライブラリ無くても全然イケんじゃん！とか、

を感じて貰えれば幸いです。

Agenda

1. HTML5 Canvasで今回利用する技術紹介

2. 実装内容のご紹介（ここメイン！！）

3. Canvas de Shootingの課題

4. 最後に

Agenda

1. HTML5 Canvasで今回利用する技術紹介

Canvasの技術を４つ紹介します

1. Canvasの準備

// Canvasエレメントを取得
var canvas
= document.getElementById("myCanvas");

// 描画命令を行う為のコンテキストを取得
var ctx = canvas.getContext("2d");

2. 色の指定

// 塗りつぶしの色を指定
ctx.fillStyle = "rgb(0,255,0)"; // 緑

ctx.fillStyle = "rgb(255,255,0)"; // 黄

ctx.fillStyle = "rgb(255,0,0)"; // 青

利用用途：壁色の指定、ショットの色の指定

3. 図形の描画と、画像の描画

// 四角形の描画
ctx.fillRect(posX, posY, width, height);

// 画像の描画
ctx.drawImage(imageObject, posX, posY);

利用用途：ショットの描画、自機や敵機の描画

4. 描画内容のクリア

// Canvas上の描画内容をクリア
ctx.clearRect(posX, posY , width, height);

利用用途：MainLoopで再描画する時に使う

はい！
これだけです。

続いて、
実装内容の
紹介です

1. 初期化処理
// Canvasを取得
var canvas
= document.getElementById("myCanvas");
// Canvasの大きさを画面に合わせる
canvas.width = window.innerWidth || 800;
canvas.height = window.innerHeight * 0.95 ||
400;
// contextを生成する
var ctx = canvas.getContext("2d");

1. 初期化処理

// 使う画像を、事前に読み込みます
img_plane = new Image();
img_plane.src = "img/plane.png";
img_plane.onload = function () {
// 読み込み終了した状態を保存
imageLoadDone = true;
}

次に
メインループ
です

2. MainLoopを開始する

// 描画や当たり判定を行うMainLoopをつくる
var gameMainLoop = function () {

// 今回は、mainLoop内で再描画します
ctx.clearRect(0, 0, w, h);
}

// setIntervalでゲームを開始！
var timer = setInterval(gameMainLoop, 50);

ここまでで、
以下のような画面が出来ます

真っ暗です。でも動いてます。

3. 自機を動かす ①

// まずは自機を表すオブジェクトを作ります
var plane = {
img : img_plane,
posX : 10,
posY : (h - img_plane.height) / 2,
life : 3
}

3. 自機を動かす　②

// 自機を動かす為に、keypressイベントを監視しま
す
document.onkeypress = function (e) {

// 例えば自機を上に動かす場合
if (e.keyCode == 101/*E*/) {
plane.posY -= 5;
}
}

3. 自機を動かす　③

// そしてメインループ内で、自機を描画します

// 自機を描画する
ctx.drawImage(plane.img, plane.posX,
plane.posY);
}

自機で
攻撃してみます

4. 自機がショットを撃つ　①

// 自機ショットを保持する配列を定義します
var plane_balls = [];

// 自機ショットは、以下のオブジェクト型と
// します
var ball = {
radius : 5, posX : 10, posY : 10, speed : 10
}

4. 自機がショットを撃つ　②

// "K"ボタンが押されたら、ショットを生成
document.onkeypress = function () {
if (e.keyCode == 107/*K*/) {
var newBall = {
radius : 5, posX : plane.posX, posY : plane.
posY, speed : 10
};
plane_balls.push(newBall);
}
}

4. 自機がショットを撃つ　③
// mainLoop内で、speed分だけ移動させて描画する
for (var i = 0; i < plane_balls.length; i++) {
var ball = plane_balls[i];
ball.posX += ball.speed;
ctx.fillStyle = "rgba(200,0,0,1)";
ctx.fillRect(ball.posX, ball.posY, ball.radius,
ball.radius);
}
}

これで自機を動かして、
攻撃できるようになりました

次に、敵機を
出現させます

5. 敵機を出現させる　①
// まずは敵機を保持する配列を定義します
var enemies = [];

// 敵機は、以下のオブジェクト定義とします
var enemy = {
img : img, /* 今回は２種類の画像を使う */
posX : x,
posY : y,
speed : s
};

5. 敵機を出現させる　②
// 敵機はランダムに出現させます
function createEnemy () {
var num =(Math.floor((Math.random()*100)%100);
if (num < 5) {
var s = num;
var i = (num%2==0 ? imgE01 : imgE02);
var y = canvasHeght * Math.random();
var x = canvasWidth;
var enemy = {img:i, posX:x, posY:y, speed:s};
enemies.push(enemy);
}
}

5. 敵機を出現させる　③
// MainLoop内でspeed分、左に移動させて描画
for (var i = 0; i < enemies.length; i++) {
var enemy = enemies[i];
var enemy.posX -= enemy.speed;
ctx.drawImage(enemy.img, enemy.posX,
enemy.posY);
}
}

これで敵機が左に向かって、
動くようになりました

6.当たり判定を行う　①
当たり判定は、物体と物体が重なったか、否かを
判断します。
重なっている場合には、2つの物体同士が当たって
いると考えます。

Hit!!

6.当たり判定を行う　②
例えば自機ショットと敵機の当たり判定の場合を
説明します。
x座標 = PosX+radius
y座標 = PosY x座標 = PosX
y座標 = PosY

x座標 = PosX
y座標 = PosY

radius

x座標 = PosX+radius
y座標 = PosY+radius
x座標 = PosX
y座標 = PosY + img.height

6.当たり判定を行う　③
// ソースコードではこんな感じです
var b = plane_balls[i];
var e = enemies[j];
if ((b.posX + b.radius) >= e.posX /* x 座標 */
&& b.posY <= e.posY+e.img.width /* y座標下 */
&& b.posY >= e.posY) { /* y座標上 */

delete plane_balls[i];
delete enemies[j];
}

6. 当たり判定を行う　④
// 最後にdeleteした要素をお掃除する
// 例えば自機ショットの場合
var new_plane_balls = [];

for (var i = 0; i < plane_balls.length; i++) {
if (plane_balls[i])
new_plane_balls.push(plane_balls[i]);
}

plane_balls = new_plane_balls;

7.GameOver or GameClear　①
// ボスを倒すか、自機が倒されたら終わり
if (deadBoss() || deadSelf()) {

// mainLoopを終了させる
clearTimeout(timer);

// メッセージを表示する
if (deadBoss())
alert("CONGURATURATION!!");
else
alert("GAME OVER");
}

これでシューティングゲームが
できました(*ﾟ▽ﾟ)ﾉ

3. Canvas de Shootingの課題

・JavaScriptの各種ブラウザ対応

・ゲームプランニング（駆け引きの設定など）

・Canvas 2Dの描画性能

・課金方法

長時間のご清聴、ありがとうございました。

ライブラリに依存しないゲーム制作の内容をお伝
えしてきました。

このプレゼンテーションから何か感じたものがあっ
たら幸いです。

実際のゲームやソースコードは、こちらにありま
す。ご興味あればご覧頂ければ幸いです。

http://www.yoheim.net/labo/html5/canvasShooting.html

HTML5って便利で面白くて、そして触りは簡単だと
思います。

これからもHTML5をたくさん触れていきたいと思い
ます。
その中で何か皆様のお役に立てる事が出来れば、
良いなぁと感じる。

今日はお時間頂きましてありがとうございました。

　　　　　　　　　　　Yohei Munesada

Canvas de shooting 制作のポイント

More Related Content

What's hot

Viewers also liked

Similar to Canvas de shooting 制作のポイント

Canvas de shooting 制作のポイント