enchant.js:2秒後にシーン遷移する

enchant.jsを使ったきっかり2秒後にシーン遷移(切り替え)するプログラム。

サンプルを見る

ダウンロード

クリックするとオレンジ色の別シーンに遷移する。
2秒後に元のスカイブルーのシーンに戻る。

EasyCapture6

最初のシーンのタッチイベントでグローバルに宣言したstartTimeに現在時刻を代入してからシーンを切り替える。

		// シーン1タッチ時の処理
		scene1.ontouchstart = function(){
<span style="color:red">			startTime = new Date().getTime();</span>
			console.log("startTime = " + startTime);	// コンソールに表示
			game.replaceScene(scene2);
			// たまに違う画像(あそび部分)
			if(rnd(0, 2) == 0) kero2.image = game.assets[IMG_KEROHIT];
			else kero2.image = game.assets[IMG_KERO];
		};

シーン2のフレーム処理毎に現在時刻をnowTimeに取得し、startTimeとの差分を計算する。
DateクラスのgetTimeメソッドは、1970年1月1日午前0時からの経過をミリ秒単位で取得する。
差分の計算結果を1000で割るのは秒数になおすため。

		// シーン2のフレーム処理
		scene2.onenterframe = function(){
<span style="color:red">			nowTime = new Date().getTime();</span>
			console.log("nowTime = " + nowTime);	// コンソールに表示
<span style="color:red">			var checkTime = (nowTime - startTime) / 1000;</span>
			// 2秒後にシーン遷移
<span style="color:red">			if(checkTime &gt;= 2.0){</span>
				game.replaceScene(scene1);
			}
		};

ところで、なぜコンピュータが扱う時刻の基準は、1970年の1月1日午前0時からの時刻なのか?といつも疑問に思っていた。本などには、サーバで使われているUNIXというOSの設定がそうなっていたからなどと言われている。
一応だれかが会議などして決めたのだと思うが、すでに2038年1月19日3時14分7秒を過ぎると時刻が1901年に戻ってしまう不具合(2038年問題)が取りざたされている。

時刻の基準を決めた人はどこまで未来を考えていたのか。
わたしが作ったこのプログラムは、2038年問題をクリアしていない。クリックしたときに、2038年1月19日3時14分7秒を過ぎれば、「2秒後にシーン遷移」とはならず、永遠にシーンが切り替わらないだけだ。別に問題はない。命に別状もない。
2秒が永遠になるなんて素晴らしいとさえ思う。

全ソース

// -------------------------------------------------------------------------
//  enchant.js 2秒後にシーン遷移(ケロ版)
// 					created at 2013-08-22 on MRGARITA.NET
// -------------------------------------------------------------------------
/*
 * 必須
 */
enchant();

/*
 * 定数
 */
var SCREEN_WIDTH = 320;		// 幅
var SCREEN_HEIGHT = 320;		// 高さ

/*
 * グローバル変数
 */
var game = null;
var nowTime;			// 現在時刻
var startTime;			// スタート時刻
// 定数
var COUNTDOWN = 2;			// カウントダウン秒数
// 画像
var IMG_KERO = "kero.gif";
var IMG_KEROHIT = "keroHit.gif";
var ASSETS = [ IMG_KERO,  IMG_KEROHIT];

/*
 * 汎用処理
 */
// 乱数生成(最小値, 最大値)
var rnd = function(min, max){
	return Math.floor(Math.random() * (max+1-min)+min);
};

/*
 * シーンにスプライト画像を設定する関数
 */
var setSprite = function(image, text, scene){
	// スプライト追加
	var kero = new Sprite(32, 32);
	kero.image = game.assets[image];
	kero.scale(10, 10);
	kero.moveTo(SCREEN_WIDTH/2 - kero.width/2, SCREEN_HEIGHT/2 - kero.height/2);
	scene.addChild(kero);
	// ラベル追加
	var label = new Label(text);
	label.moveTo(5, 5);
	label.font = "32px 'Impact', 'Marker Felt', 'メイリオ', 'Osaka' ";
	label.opacity = 0.7;
	scene.addChild(label);
	
	return kero;
};

/*
 * メイン
 */

window.onload = function(){
	// ゲームオブジェクト生成
	game = new Game(SCREEN_WIDTH, SCREEN_HEIGHT);
	
	// 画像の読み込み
	game.preload(ASSETS);
	
	// ゲーム開始時の処理
	game.onload = function(){
		// シーン1を作成
		var scene1 = new Scene();
		scene1.backgroundColor = "skyblue";
		var kero1 = setSprite(IMG_KERO, "PUSH!", scene1);
		
		// シーン2を作成
		var scene2 = new Scene();
		scene2.backgroundColor = "orange";
		var kero2 = setSprite(IMG_KERO, "Wait 2 seconds.", scene2);
		
		// シーン1タッチ時の処理
		scene1.ontouchstart = function(){
			startTime = new Date().getTime();
			console.log("startTime = " + startTime);	// コンソールに表示
			game.replaceScene(scene2);
			// たまに違う画像(あそび部分)
			if(rnd(0, 2) == 0) kero2.image = game.assets[IMG_KEROHIT];
			else kero2.image = game.assets[IMG_KERO];
		};
		
		// シーン2のフレーム処理
		scene2.onenterframe = function(){
			nowTime = new Date().getTime();
			console.log("nowTime = " + nowTime);	// コンソールに表示
			var checkTime = (nowTime - startTime) / 1000;
			// 2秒後にシーン遷移
			if(checkTime &gt;= 2.0){
				game.replaceScene(scene1);
			}
		};
				
		game.pushScene(scene1);
	};
	game.start();
};
スポンサーリンク
スポンサーリンク
スポンサーリンク
スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサーリンク