もう一つの脱出ゲームのような何か

昔に作ったもう一つの脱出ゲームのような何かを公開しておく。Canvas 2Dを利用してJavaScriptで作成している。脱出ゲームのような何かであって脱出ゲームではない。ドラッグ&ドロップAPIを試すために作成した。音が鳴るためご注意を。

コード解説

一応、どのようなことを行っているかを少しばかり説明する。

アイテムはドラッグ&ドロップで使えるようにした。 アイテムはcanvas要素で表現した。img要素だとFirefoxではimg要素自体を開いてしまうため、このような措置をとった。 このcanvas要素はdraggable属性をtrueとし、ドラッグをするとdataTransferにアイテムのIDを登録し、ドロップ元ではアイテムのIDに応じて処理を変えている。 イベントのバブリングを中止させたり、イベント処理自体を途中で止めたりするなどしないと面倒なことになるそうだ。

テキストを一文字ずつ表示させる機能を実現した。これにはsetIntervalとclearIntervalという関数を利用している。 テキストの表示はshowText関数として実装した。一部にjQueryが混じっている。 substr関数で引数の文字列の一部を取り出して表示させる。 setIntervalで文字列を一文字ずつ時間を置いて表示させる。 新たにshowText関数が実行された場合にclearIntervalを行うことで、過去に指定した文字列がまた表示されるような事故を防いでいる (もしかしたら無意味かもしれないが) 。 ちなみに、当然ではあるが、この方法で要素の混在した内容を表示することは不可能である。

showText:function(text){/*テキストの表示*/
	clearInterval(CES_ESCAPE.textTimer);

	var i=0;		
	CES_ESCAPE.textTimer=setInterval(function(){
		if(i<text.length+1){
			jQuery(function($){
				$(CES_ESCAPE.text).text(text.substr(0,i));
			});
			i++;
		}
	},100);