Skip to content

[enchant.js]shi3z式ゲームプログラミング #7 タイムアタックは神!

やあ。shi3zだよ。元気かな?
100%文系女子のHidemyに三日間でゲームを教えるという無茶な想定からスタートしたこの連載も、9leapにあわせて大復活だ!。

さて、いよいよ今日から始まる、9leap(ナインリープ)。みんな準備はいいかな?
公式サイト「9leap.net」には早くも猛者どもの作ったミニゲームが投稿されている。

僕のお気に入りは、やはりenchant.jsの作者、田中君が作った”cave!!”だ。


http://9leap.net/games/11

ワンキーゲームの本命とも言える伝統的なゲームで、canvasの機能をフル活用している。

そのenchant.js、9leap開催直前に大幅にバージョンアップされた。
特に重要なのは、nineleap.enchant.jsというプラグインの追加と、画像素材の大幅な追加だ。

特に9leap Programming Campで人気の高かった。クマのキャラクターのアニメーションパターンが増えて、スケボーに乗ったクマとか、メスのクマ、そしてHidemy画伯がデザインしたオリジナルのゼプクマ(真ん中の白いクマ)も登場。

アイコンも、サイコロのアイコンや、弾のアイコンを追加。これでいままでなぜか爆弾を飛ばしていた僕の戦車ゲームもカッコイイ弾を飛ばすことができるようになったぞ。

さて、nineleap.enchant.jsを使うと、ゲームスタート画面や終了画面が自動的に追加されるようになる。

こういうのって、意外と大事なんだ。

スタートと表示されて、ゲームが終わったときに「ゲームオーバー」と出る。

これだけで、なんだかきちんとしたゲームになってるような錯覚すら覚えるんだよね。

さて、以前、ぼくは9leap Game Programming Campの中で、「タイムアタックは神様」と言った。

実際、タイムアタックにするだけでゲーム性が大きく変わるものは少なくないんだ。

たとえば、このゲーム


http://9leap.net/games/4

これは今回、9leapのサーバプログラム開発を担当している電気通信大学の杉本君の作品だ。

彼は当初、「簡単なリバーシ程度なら作れます」と言ってリバーシを作って来たんだけど、当然ながら、リバーシってありふれていて面白くないよね?

そこで僕が提案したのは、リバーシをタイムアタックにすること。

 

「30秒で遊べるリバーシを作ってみなよ」

 

そしてできたのがこれというわけだ。
かなり初期の段階で作られたゲームなのでスタート画面はない。
けど、ステージが進んでいくと思考ルーチンもほんの少しだけ進化していくからなかなか楽しめる。

特に残り10秒を切ると、自分のコマが一斉にカウントダウンを始める。このときの緊張感はなかなかのものだよ。

惜しいのは、もう少しタイムやスコアの表示を解りやすくしてあるといいなってこと。

とにかく、タイムアタックを入れるだけでゲームは違った面白さを身につけるんだってことは解ってもらえたかな?

さて、そのタイムアタックだけど、JavaScriptでタイムアタックを実装するのはけっこう、「お約束」が多い。

まずは戦車ゲームをタイムアタックにしてみたよ。
10台の戦車を何秒で殲滅できるか。

そういうときにプログラマどうするか?
再利用しやすいようにクラスとして切り出すんだね。

というわけで、ちょちょいっと作ってみたのが、以下のクラスだ。

 


TimeAttack =enchant.Class.create({
    initialize:function(){
        //時間ラベル設定
        this.timeLabel = new Label("TIME:180.00");
        game.rootScene.addChild(this.timeLabel);
        this.timeLabel.x = 10;
        this.timeLabel.color="#ffffff";
        this.timeLabel.font="bold";
        this.timeLabel.y =10;
        this.timeStart=new Date;//初期時間を設定
        this.timeInit=false;
        this.timerID =window.setInterval(this.interval, 320 ,this);

    },
    interval:function(obj){
            if(gameStart){
                if(!obj.timeInit){
                    obj.timeStart=new Date;//初期時間を設定
                    obj.timeInit=true;
                }
                var timeLeft =((new Date)-obj.timeStart)/1000;
                obj.timeLabel.text="TIME:"+obj.get2string(180-timeLeft);;
            }
    },
    get2string:function (x){ //小数点以下2桁までで表示をカット
        n = new String(x);
        if(n.indexOf(".")>0)
            n = n.split(".")[0]+"."+(n.split(".")[1]+"00").substring(0,2);
        else
            n = n+".00";
        return n;
    },
    gameend:function(x){ //ゲーム終了
        window.clearInterval(this.timerID);
        var timeLeft =((new Date)-this.timeStart)/1000;
        this.timeLabel.text="TIME:"+this.get2string(180-timeLeft);
        var indi =180 - timeLeft;
        if(indi<0)indi=0;

        var ResultLabel =new Label("タイム:"+this.get2string(timeLeft)+x);
        ResultLabel.x=80;
        ResultLabel.y=220;
        ResultLabel.color="#ffffff";
        ResultLabel.font="bold";
        game.rootScene.addChild(ResultLabel);

        game.end(indi, "タイム:"+this.get2string(timeLeft)+x); //nineleap.enchant.jsを呼び出し

    }

});

このクラスの使い方は簡単。
ゲーム開始前に、game.onloadのなかで


        //タイムアタックを初期化
        timeAttack =new TimeAttack();

とするだけでOK。

そしてゲーム終了条件(このゲームの場合は総ての戦車の破壊)を満たしたら、以下のようにする。


    if(score>=gameLevel){ //ゲームクリア
            timeAttack.gameend("秒:レベル"+gameLevel);
    }

こうすると、9leapのシステムに自動的に使用した時間と、”秒:レベル10″などのような表示が送信される。

こんな感じ。
簡単だろ?

ただし、このクラスを使うには、nineleap.enchant.jsの方も少し細工する必要がある。

これは僕の理解が足りなかったのか、このプラグインの仕様上の見落としなのかわからないけど、いまのところ、ゲーム本体側から「いつ」ゲームがスタートしたのか取得する方法がないんだ。

そこでゲームが開始されたら、グローバル変数gameStartをtrueにするように改造した。


            this.startScene = new SplashScene();
            this.startScene.image = this.assets['start.png'];
            this.startScene.addEventListener('touchend', function() {
                if (game.currentScene == this) game.popScene();
                gameStart=true;
            });
            this.addEventListener('keydown', function() {
                if (this.currentScene == this.startScene) this.popScene();
                this.removeEventListener('keydown', arguments.callee);
                gameStart=true;
            });
            this.pushScene(this.startScene);

ただ、若干みっともないので、今後のバージョンアップで改善されるといいな。

たったこれだけでいますぐタイムアタックのゲームを作ることができる。
挑戦してみてくれい!

 

このゲームに限らず、9leap.netでは、作者がOKさえすれば、ゲームのソースコードや画像ファイルをZIPファイルごとダウンロードすることができる。

他人のゲームのソースを読んだり改造したりするのって一番”効く”んだよね。

戦車ゲームのURL:http://9leap.net/games/8

コメント欄の一番したの「ダウンロード」というリンクからゲームを含む本体ファイルをまるごとダウンロードできるから、通信環境のない田舎に帰省する時なんかにもお気に入りのゲームを何本かPCにダウンロードしてでかけるといいかもね

今はなんと最新のiPad2が当たるというオープニングキャンペーン、9leap 9Day Challenge(ナインリープ・ナインデイズ・チャレンジ)を実施中だ。

力作待ってるぜ!

文・shi3z

このエントリーをはてなブックマークに追加
はてなブックマーク - [enchant.js]shi3z式ゲームプログラミング #7 タイムアタックは神!
Post to Google Buzz
Share on GREE

Related posts:

  1. shi3z式ゲームプログラミング #5 Twitterと連携だっ!
  2. shi3z式ゲームプログラミング #6 覚えておくといいテクニック
  3. 9leap Camp@Tokyoレポート:4時間でスマートフォン対応のHTML5ゲームをゼロから創ってみる
  4. 9leap:プログラミングの腕を磨くと最新のMacが貰えてシリコンバレーへ行ける育成プロジェクト
  5. shi3z式ゲームプログラミング入門 #1 72時間でゲームプログラマになる方法

Facebook comments:

Post a Comment

Your email is never published nor shared. Required fields are marked *
*
*