enchant.jsを使ったきっかり2秒後にシーン遷移（切り替え）するプログラム。
クリックするとオレンジ色の別シーンに遷移する。
2秒後に元のスカイブルーのシーンに戻る。
最初のシーンのタッチイベントでグローバルに宣言した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();
};
コメント