enchant.js: ゲームを作ってみました(100行縛り)

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

Pocket

昨日, enchant.js について書いたのですが. 意外と沢山の方が見てくれたみたいで, Twitter で色々とありがたいお言葉をいただきました. 一応, この日記に共感して 9leap を応援する目的で書いているので, このブログをきっかけに「ゲームプログラミング始めました」だとか 「9leap に作品を応募しました」って人が出てくれれば幸いです.

引き続き今日は HTML のコード含め 100行以内でゲームを作ってみました.

SAMPLE and DATA

今回作ったゲームはこちらで遊ぶことができます.

ゲームがスタートして数秒するとランダムな位置にクマが出現するので, そのクマを素早くタッチしてください. どれだけ速くクマをタッチできるかを競うシンプルなゲームです.

データはここからダウンロードできます.

COMMENT

解説はコード内のコメントとして書いています. フレームと秒のやりとりがちょっとややこしい感じになっていますが, 全体的にはかなりシンプルなコードになっていると思います.

コード全体

全部で 85 行です.

<!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>Moment - Dark</title>
        <script type="text/javascript" src="script/enchant.js"></script>
        <script type="text/javascript" src="script/nineleap.enchant.js"></script>
        <script type="text/javascript">
            // enchant 初期化(global 領域に enchant を追加)
            enchant();
            
            /**
             * ロード
             */
            window.onload = function()
            {
                // ゲームクラスを生成
                var game = new Game(320, 320);
                game.secondToFrame = function(second) { return second*this.fps; };
                game.frameToSecond = function(frame)  { return frame/this.fps; };
                game.preload('img/bear.gif');
                game.moment = {};
                game.moment.startTime = Math.floor( Math.random()*(game.secondToFrame(8)) ) + game.secondToFrame(2);
                // ゲーム開始時の処理
                game.onload = function(){
                    // カレントシーンに移った際のイベントを登録
                    this.currentScene.addEventListener(enchant.Event.ENTER, function(){
                        // bmg を鳴らす(風の音)
                        game.bmg.play();
                        // 経過フレームを0にしておく
                        game.frame = 0;
                    });
                    // フレームイベントを登録
                    this.currentScene.addEventListener(Event.ENTER_FRAME, function(){
                        // 開始フレームと一致した瞬間クマを表示
                        if (game.frame == game.moment.startTime) {
                            var kuma = new Sprite(20, 30);
                            kuma.x = Math.floor( Math.random()*(game.width -kuma.width) );
                            kuma.y = Math.floor( Math.random()*(game.height-kuma.height) );
                            kuma.image = game.assets["img/bear.gif"];
                            kuma.addEventListener(Event.TOUCH_START, function(){
                                game.hitSE.play();
                                var progress = game.frame-game.moment.startTime;
                                progress = Math.floor( game.frameToSecond(progress)*100 )/100.0;
                                var score = Math.floor( (10-progress)*10000 );
                                game.end(score, progress + " 秒でタッチしました!");
                                // console.log(score);
                                // console.log(progress + " 秒でタッチしました!");
                            });
                            this.addChild(kuma);
                        }
                        // 10秒以上タッチされなかった場合はゲームオーバーとする
                        if ( game.frame >= (game.moment.startTime+game.secondToFrame(10)) ) {
                            game.end(0, "Game Over!");
                        }
                    });
                };
                // 背景表示
                game.rootScene.backgroundColor = 'rgb(0, 0, 0)';
                // ゲームスタート
                game.start();
                
                // 音読み込み
                var EXT = "";
                if (new Audio().canPlayType('audio/ogg') == 'maybe') { EXT = "ogg"; }
                else if (new Audio().canPlayType('audio/mp3') == 'maybe') { EXT = "mp3"; }
                game.bmg   = new Audio("./sound/bgm."+EXT);
                game.hitSE = new Audio("./sound/hit."+EXT);
            }
            
        </script>
        <style type="text/css">
            body {
                margin: 0px;
            }
        </style>
    </head>
    <body>
        
    </body>
</html>
    

TRACK BACK URL

POST COMMENT

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

COMMENT