残り時間をカウントダウンする【enchant.js】

ゲームって制限時間が決まっているものがたくさんありますよね。一定時間にゴールしたり、敵全滅させたり、逃げたり、時間制限があるおかげでゲームが成り立っているものって結構あります。

というわけで制限時間というルールがあると作れるゲームが増えるだろうと思い、制限時間を設けたいときに使えるクラスを作ってみました。

画面に文字を表示させるのでLabelクラスを継承して作りました。

プログラム

var TimeCountDown = enchant.Class.create(enchant.Label, {
    initialize: function(min, sec){//引数に分と秒を入れる
        enchant.Label.call(this);
        this.color = "white";
        this.font = '25px sens-serif';
        this.isTimeUp = false;
        var tick = 0;
        var minute = min;
        var second = sec; 
        this.addEventListener('enterframe', function(){
            if(tick++ >= core.fps){
                tick = 0;
                if(--second < 0){
                    second = 59;
                    if(--minute < 0){
                        this.isTimeUp = true;
                    }
                }
            }
            this.text = minute + ":" + ('00' + second).slice(-2);//時間
        });
    }
});

使うときは引数に分と秒をして使います。

var timer = new TimeCountDown(5, 0);//分、秒を指定
timer.moveTo(10, 10);
core.rootScene.addChild(timer);

残り時間が0になるとisTimeUpフラグがtrueになります。

簡単な説明

tickがフレームごとに加算されてそれが設定されているfps以上になると1秒としています。

他のやり方を検索で調べてみると除算を使ってやってるやり方ばかりだったので除算を使わないやり方をつくりました。enchant.jsではスマホで高FPSを出すのは難しいので除算はできるだけ避けたいと個人的に思ってます(実際どれくらい違うのかは知らんけどね(;´∀`))

あと、この方法だと正確に1秒を計れません(^^;)実際に計ってみると1分で2~3秒ずれてました。FPSがいつも確実に1秒に設定した数字になっているとは限らないので仕方ないことなんですけどね(;´∀`)だけどファミコンのマリオも全然正しい1秒になってないからいいんだよ(^^;)

あ、あと、フレームごとに計測してるから処理落ちすると時間がたつのも遅くなります。つまり処理落ち中は時間もスローになります。どんだけ処理落ちしても時間だけ過ぎてゲームオーバーってことにならないところがこれの良い点です(^^;)

ちなみにこちらのゲームで使いました(‘ω’)ノ

▷▷▷ 秘密警察ギャボリン 第三話

当サイトのオリジナルゲーム(ランダム表示)

短時間でたくさん計算問題を解くゲームです。最初は簡単ですが少しずつ難しくなります。
空いている一つのマスを利用して並び替えるパズルゲーム。
スマホ専用対戦ゲーム。3つの数字を順番にどちらが速く押せるかを競うミニゲーム。
レトロ風シューティング。謎の宇宙人との人類存亡をかけた戦い?

記事の感想・コメント

※コメントはまだありません※

コメントを残す

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

ゲームタグ

メニュー

ゲーム一覧ページへのリンク画像
ゲーム開発技術ブログへのリンク画像
pixi.jsでのゲーム開発へのリンク画像
enchant.jsでのゲーム開発へのリンク画像
グッズページへのリンク画像

ゲーム開発の参考書(amazon)

HTML5 ゲーム開発の教科書 スマホゲーム制作のための基礎講座
ゲームを作りながら楽しく学べるHTML5+CSS+JavaScriptプログラミング[改訂版]
ドット絵教室