CoroCoro : Step0 – enchant.js やプラグインを使う準備しよう!

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

ここでは, 開発の準備からプレイヤークラスの定義, 生成まで一気にやってしまいます. この Step が一番難しいのでここさえ乗り切ればあとは楽です.

SAMPLE

サンプルはこちらで見ることができます.

CODE

index.html

HTMLの基本となる雛形です. enchant.js を読み込んでいます. また, プレイヤークラスは私が以前作った ArcSprite クラスというプラグインを継承して作るのでここで読み込んでいます. TweetLabel プラグインは最後の方で活躍します.

<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
        <title>CoroCoro</title>
        <!-- enchant.js を読み込む -->
        <script type="text/javascript" src="../script/enchant.js"></script>
        <!-- ここでプラグイン読み込み -->
        <script type="text/javascript" src="../script/arcsprite.tm.enchant.js"></script>
        <script type="text/javascript" src="../script/tweetlabel.tm.enchant.js"></script>
        <!-- 実装スクリプト -->
        <script type="text/javascript" src="game.js"></script>

        <style type="text/css">
            body {
                margin: 0px;
            }
        </style>
    </head>
    <body>
        
    </body>
</html>

game.js

プレイヤークラスを定義している部分です. ArcSprite という円弧を描画するクラスを継承しています. appear 関数で一定時間点滅させて, その後update関数に入れ替えています. これは後々でる敵といきなり衝突してしまわないよう無敵時間を作るための準備です.


/**
 * @scope   Player.prototype
 */
var Player = Class.create(ArcSprite, {
    
    /**
     * 円弧スプライトクラス
     * @param {Number} radius   半径
     * @param {Object} color    色オブジェクト {r:255, g:0, b:0}
     */
    initialize: function(radius, color) {
        // 親のコンストラクタを呼び出す
        ArcSprite.call(this, radius, color);
    },
    
    appear: function()
    {
        // ゲームインスタンスを取得
        var game = Game.instance;
        // 点滅
        this.opacity = (game.frame%8 == 0) ? 0.0 : 1.0;
        
        // 移動
        this.moveBy(this.dx, this.dy);
        this.adjustPosition(0, 0, game.width, game.height);
        
        // 4秒後にゲームに移行する(4秒間は無敵時間)
        if (game.frame/game.fps > 2) {
            // 現在のフレーム関数を解除
            this.removeEventListener(Event.ENTER_FRAME, arguments.callee);
            // 新たなフレーム関数を登録
            this.addEventListener(Event.ENTER_FRAME, this.update);
        }
    },
    
    update: function()
    {
        // ゲームインスタンスを取得
        var game = Game.instance;
        // 移動
        this.moveBy(this.dx, this.dy);
        this.adjustPosition(0, 0, game.width, game.height);
    }
    
});

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT