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

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

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

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

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

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

newProject

2. 下準備

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

shitajunbi

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

addResource

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

timeShow

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

timeDecrease

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

clearScene

6. 完成

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

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

最後に

毎月10人限定ですが、若手エンジニア向けに「キャリア相談」に乗る機会を設けています。

もしも「誰かに今の悩みを聞いて欲しい」という方がいれば、気軽にお申し込みください◎