制限時間アレンジテキスト【enchantJS】
[ Updated at 2019/06/27 ]
enchantJS

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

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

newProject

 

2. 下準備

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

shitajunbi

<!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つは、追加しないと動きません。)

addResource

 

3. 制限時間の表示

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

// 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();
};

timeShow

 

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

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

// 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();
};

timeDecrease

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

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

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

// 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();
};

clearScene

 

6. 完成

以下のようにカウントダウンができていれば、成功です!

デモプロジェクト: http://code.9leap.net/codes/show/164315

umi-mori
umi-mori