脱出ゲーム風Canvas

脱出ゲームのような何か

昔に作った脱出ゲームのような何かを公開しておく。Canvas 2Dを利用してJavaScriptで作成している。脱出ゲームのような何かであって脱出ゲームではない。もともとはデモのつもりで作ったが、完全な脱出ゲームを作ることは結局無かったのであった。音が鳴るためご注意を。

お使いのブラウザはCanvasに非対応です。
起動していません。JavaScriptが有効になっていないかもしれません。

コード解説

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

上のゲームのような何かでは、クリックした位置とそのとき表示されている絵や場面に応じて処理を変えている。例えば、最初の視点の文字の部分は次のように処理している。e.target、つまりここでのcanvas要素の位置はメソッドgetBoundingClientRectで分かる。e.clientXと e.clientYでクリックした位置の絶対位置が分かる。これらの情報から クリックした位置のcanvas要素における相対位置が分かる。 ちなみに、setText関数は下のテキストの内容を変えるだけの関数である。

angle1.onclick=function(e){
	var rect=e.target.getBoundingClientRect();
	var x=e.clientX-rect.left;
	var y=e.clientY-rect.top;

	if(107<=x&&x<=340&&165<=y&&y<=275)setText('"Welcome!"と書いてあるが、悪趣味なことに血文字だ。');
	else setText("気になるものはない。");
}

ブラウザがAudioをサポートしているか否か、また、どの音声フォーマットをサポートしているかは次のコードで判別する。 詳しいことは「ブラウザーのネイティブなオーディオ」を読むといい。

var se1=new Audio("");

var audioSupport=!!(se1.canPlayType);

support["wave"]=("no"!=se1.canPlayType("audio/x-wav"))&&(""!=se1.canPlayType("audio/x-wav"));
support["ogg"]=("no"!=se1.canPlayType("audio/ogg"))&&(""!=se1.canPlayType("audio/ogg"));
support["mp3"]=("no"!=se1.canPlayType("audio/mpeg"))&&(""!=se1.canPlayType("audio/mpeg"));
support["webm"]=("no"!=se1.canPlayType("audio/webm"))&&(""!=se1.canPlayType("audio/webm"));