たけてぃーの開発ブログ

エンジニア視点からWebサービスについて考える

チャリ走風シューティングゲームをenchant.jsで作ってみた

風も冷たくもうすっかり冬ですね。どうもたけてぃーです。

最近はバイトでCakePHPを使ってweb開発をしたり、javascriptのnodeモジュールとかを弄っていましたが、大学祭に向けてゲームを作らなくちゃいけないということでenchant.jsを使ってチャリ走風シューティングゲーム二輪無双」をつくってみました!

(リザルト画面が間に合わなかったからまだ未完成っちゃ未完成)

リンク→「GitHub

f:id:bararararatty:20151124111143p:plain

ゲームの内容

走って撃って走りまくる旧感覚アクションゲーム!

操作説明

タイトル画面をクリック後、Zボタンで敵を倒してポイントを稼げ!

index.htmlで起動します

簡単なコード解説

かなりソースコードを綺麗に書けたなぁと自画自賛しています。

簡単に言うと、クラス作ってインスタンスつくってシーンにぶち込むだけです。特に小難しい処理はしていないですね。

シーン管理

var titleScene = function(){
    var scene = new Scene();
    scene.addChild(new Title(scene));
    return scene;
}

var gameScene = function(){
    var scene = new Scene();
    scene.addChild(new Background(scene));
    scene.addChild(new Ground(scene));
    scene.addChild(new MetreLabel(scene));
    scene.addChild(new PointLabel(scene));
    scene.addChild(new Player(scene));
    return scene;
}

core.pushScene(titleScene());

classのインスタンスをつくってsceneをプッシュして描画する感じですね〜簡単

敵基底クラス

var EnemyBase = Class.create(Sprite, {
    initialize: function(SPX, SPY, scene_){
        Sprite.call(this, SPX, SPY);
        this.x    = SPORN_ENEMY;
        this.scale(EXPANSION, EXPANSION);
        this.addEventListener('enterframe', function(){
            if(this.x < 0){
                this.remove(scene_);
            }
        });
        scene_.addChild(this);
    },
    remove: function(scene_){
        scene_.removeChild(this);
        delete this;
    }
});

敵の数は3〜4個以上あるみたいだったので基底クラスつくって楽しました。デストラクタはどうせどの敵にも適用されるからね

this.scale(EXPANSION, EXPANSION);は画像が小さかったから縦横共に1.5倍にしてるだけです。

ファイル分割

<head>
    <meta charset="utf-8">
    <title>二輪無双</title>
    <script src="./js/enchant.js"></script>
    <script src="./js/config.js"></script>
    <script src="./js/funcs.js"></script>
    <script src="./js/main.js"></script>
    <style type="text/css">
        html, body {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

一応ファイル分割しました。さすがにmain.jsに400行書いてあったのでまずいなぁと思いました。

作った感想

開発期間が3日(サボってたから)だったので死ぬ気になって書いたから疲れた。余裕を持って開発するべきですね反省

画像とゲームバランス調整はサークルの友人のゴーショーくんにしてもらいました。一番の鬼門だった画像が外注できて本当によかった。

このゲームのソースコードについて

どうぞご自由に改変していただいて結構です。ぜひこのゲームを元にさらに面白いゲームを作ってください。そしたら僕もやってみたいです。

リザルト画面が作り終えてないなど、まだ不完全なのでちょこちょこ直していきたいと思っています