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 >= 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 >= 2.0){
game.replaceScene(scene1);
}
};

game.pushScene(scene1);
};
game.start();
};
スポンサーリンク

コメント

タイトルとURLをコピーしました