制限時間アレンジテキスト【enchantJS】

はじめまして、フリーランスのますみです！

『一人一人が自立・共存・革新している「クリエイターエコノミー」を創る。』というビジョンに向けて活動しています。

本記事は、enchantJSにおいて、制限時間を追加するためのアレンジテキストです。

目次 Close

1. 新しいプロジェクトを作る
2. 下準備
3. 制限時間の表示
4. 制限時間が減るようにしよう
5. 制限時間が0になったら、クリアを表示しよう
6. 完成
最後に
おまけ（お知らせ）

1. 新しいプロジェクトを作る

はじめに、以下のようにまず新しいプロジェクトを作りましょう。

2. 下準備

続いて、以下のように、<script src='/static/enchant.js-latest/plugins/ui.enchant.js'></script>をindex.htmlに追加します。

index.html

<!doctype html>
<html>
<head>
    <link rel='stylesheet' href='style.css' type='text/css'>
    <script src='/static/enchant.js-latest/enchant.js'></script>
    <script src='/static/enchant.js-latest/plugins/nineleap.enchant.js'></script>
    <script src='/static/enchant.js-latest/plugins/ui.enchant.js'></script>	<!-- この行を追加-->
    <script src='/code.9leap.js'></script>
    <script src='main.js'></script>
    <title>Page title</title>
</head>
<body>
</body>
</html>

次に、フォントなどの素材を追加しましょう。

Add Resourceボタンからapad.png / pad.png / icon.png / font0.png を選択します。

（これら4つは、追加しないと動きません。）

3. 制限時間の表示

以下のようなコードを打ち、表示してみましょう。

main.js

// code.9leap.net default template
// based on enchant.js v0.7.1

enchant();

window.onload = function(){
    var game = new Core(320, 320);
    game.fps = 15;
    game.onload = function(){

        // 制限時間の表示
        var timeUI = new MutableText(10,10);
        timeUI.time = 20;
        timeUI.text = 'TIME:' + timeUI.time;
        game.rootScene.addChild(timeUI);
        
    };
    game.start();
};

4. 制限時間が減るようにしよう

表示ができたら、制限時間が減るようにしてみよう。

main.js

// code.9leap.net default template
// based on enchant.js v0.7.1

enchant();

window.onload = function(){
    var game = new Core(320, 320);
    game.fps = 15;
    game.onload = function(){

        // 制限時間の表示
        var timeUI = new MutableText(10,10);
        timeUI.time = 20;
        timeUI.text = 'TIME:' + timeUI.time;
        game.rootScene.addChild(timeUI);
        
        // 制限時間が減るようにしよう
        game.rootScene.addEventListener('enterframe', function(){
            if(game.frame % game.fps === 0){
                timeUI.time = timeUI.time-1;
                timeUI.text = 'TIME:'+timeUI.time;
            }
        });
        
    };
    game.start();
};

5. 制限時間が0になったら、クリアを表示しよう

最後に、クリアの画像をAdd Resourceから追加します。

追加できたら、以下のように、クリアを読み込み、制限時間が0になった時の処理を書きましょう。

main.js

// code.9leap.net default template
// based on enchant.js v0.7.1

enchant();

window.onload = function(){
    var game = new Core(320, 320);
    game.fps = 15;
    game.preload('clear.png');  // クリアの読み込み
    game.onload = function(){

        // 制限時間の表示
        var timeUI = new MutableText(10,10);
        timeUI.time = 20;
        timeUI.text = 'TIME:' + timeUI.time;
        game.rootScene.addChild(timeUI);
        
        // 制限時間が減るようにしよう
        game.rootScene.addEventListener('enterframe', function(){
            if(game.frame % game.fps === 0){
                timeUI.time = timeUI.time-1;
                timeUI.text = 'TIME:'+timeUI.time;
                
                // 制限時間が0になったら、クリアを表示しよう
                if(timeUI.time === 0){
                    game.end(null, null, game.assets['clear.png']);
                }
                
            }
        });
        
    };
    game.start();
};