わずか160行ほどのプログラムでここまで出来るenchant.jsは素晴らしいゲームエンジンだ。
今回は授業用としてシューティングゲームの基本部分を作った。
PCのマウスでの操作およびスマートフォンのタッチして操作に対応している。
※オフラインモードでの動作設定もindex.htmlやマニフェストファイルでしているため、スマートフォンで一度動作させた後はネットに繋がっていなくてもアプリとして動作する。
iPhoneであればブラウザで読み込み後にメニューの「ホーム画面に追加」を選べばホーム画面にアイコンとして追加できる。
画像クリックして下さい（Chromeでのみ動作／注意！音が出ます）
【enchant.jsを使ったシューティングゲーム】
ソースコードのgame.jsはシンプルに作った。
キャラクタ画像は、PNG形式かGIF形式が使える。
効果音やBGMは、mp3形式を使っているがwav形式も使用可能だ。
課題としては、
・敵が攻撃してくる
・自機が全方向に移動できるようにする
・アイテムが出現し、自機のショットがパワーアップする
・ボスが出現する
・タイトル画面を作成する
・ローカルストレージを使いハイスコアを保存する
などなど色々と考えることができる。
キャラクタ画像やBGMなども好きなものに変えても面白い。
自分の能力に応じて変化させて楽しめることがプログラムの面白さだ。
効果音やBGMがあるとないとではゲームの雰囲気がまったく異なる。
シューティングゲームのような攻撃型のゲームは音が肝心だ。
今回は「音」のためにChromeでのみの動作とした。
FireFoxでもwav形式のファイルでならなんとか再生できるがChromeの方がスムーズだ。
しかし、ChromeだとPC環境によっては、画面に縦線や横線が入る場合がある。
これはブラウザの問題らしい。
スマートフォンでも確認したが、わたしのiPhone4では音がでなかった。
試した同僚のアンドロイド携帯でも音はならなかった。
今後、スマートフォンでも迫力ある効果音が再生されるようになるとHTML5+enchant.jsの組み合わせは、さらに面白い分野だ。
自分で作って自分の持つ端末で動作させてみると、「作ってアップロードすれば様々な環境で動作する」ということがどれだけ凄いことか分かると思う。
ソースコード: game.js
// -------------------------------------------------------------------------
// Shooting 1.0
// This is a simple shooting game!
//
// created at 2012-08-09 on MRGARITA.NET
// -------------------------------------------------------------------------
enchant();
var game; // このゲーム
var canon; // 自機
var cx, cy; // 自機の初期位置
var enemys; // 敵
var enemySpeed; // 敵の速度
var score; // スコア表示用
var mode; // ゲームモード GAME/GAMEOVER
// ----- 乱数生成関数
var rand = function(n){
return (Math.floor(Math.random() * n));
};
// ----- 初期化関数
var init = function(){
enemys = [];
enemySpeed = 5;
cx = 150;
cy = 330;
};
// ----- 自機のショット生成関数
var create_shot = function(){
game.assets['shot.mp3'].play(); // Sound Effect
var shot = new Sprite(16, 16);
shot.image = game.assets['shot.png'];
shot.x = canon.x + shot.width/2;
shot.y = canon.y;
shot.addEventListener("enterframe", function(){
shot.y -= 10;
if(shot.y bang.nextFrame){
bang.nextFrame = game.frame + 3;
bang.frame ++;
}
if(bang.frame >= 6) game.rootScene.removeChild(bang);
});
game.rootScene.addChild(bang);
};
// ===== ここから開始
window.onload = function(){
// 初期設定
init();
// ゲーム画面設定
game = new Game(320, 480);
game.fps = 30;
game.rootScene.backgroundColor = "#000";
game.mode = "GAME";
game.score = 0;
// 画像をロード
game.preload('canon.png');
game.preload('enemy.png');
game.preload('shot.png');
game.preload('enemy_shot.png');
game.preload('bang.png');
// 効果音をロード
game.preload('shot.mp3');
game.preload('enemy_shot.mp3');
game.preload('bang.mp3');
game.preload('enemy_bang.mp3');
game.preload('bgm.mp3');
// ゲーム設定
game.onload = function(){
// 自機
canon = new Sprite(32, 32);
canon.image = game.assets['canon.png'];
canon.x = cx;
canon.y = cy;
canon.shotInterval = 5;
canon.shotMode = "OFF";
// スコアラベル
score = new Label();
score.x = 24;
score.y = 36;
score.color = "#fff";
score.font = "24px Impact";
score.opacity = 0.6;
score.addEventListener("enterframe", function(){
score.text = "SCORE: " + game.score;
});
// イベント処理
game.rootScene.addEventListener("touchstart", function(e){
canon.shotMode = "ON";
canon.x = e.x - canon.width/2;
if(game.mode == "GAMEOVER"){
init();
canon.y = cy;
game.score = 0;
game.mode = "GAME";
game.assets['bgm.mp3'].play(); // Sound Effect
}
});
game.rootScene.addEventListener("touchend", function(e){
canon.shotMode = "OFF";
});
game.rootScene.addEventListener("touchmove", function(e){
canon.x = e.x - canon.width/2;
});
game.rootScene.addEventListener("enterframe", function(){
if(game.mode == "GAME"){
// 自機のショット
if(canon.shotMode == "ON" && game.frame % 5 == 0){
create_shot();
}
// 敵キャラ出現
if(rand(10) == 0){
create_enemy();
}
// 敵の動きを変化させる
if(game.frame % 150 == 0) enemySpeed +=2;
}
});
// シーンにキャラを追加
game.rootScene.addChild(canon);
game.rootScene.addChild(score);
game.assets['bgm.mp3'].play();
};
// ゲームスタート
game.start();
}
// スマートフォンのアドレスバーを消す
// setTimeout("window.scrollTo(0,1)", 10);
謝辞
BGM:bodyさんの作成した【GAPLUS組曲】を使用 URL http://maron.moo.jp/game.html
ありがとうございます
コメント