Adobe FLASH がモバイルの世界から殲滅され、PC の世界からも淘汰されつつある今日この頃。かつて動きのあるコンテンツの作成に使われた FLASH は html5 にシフトされてきています。
FLASH が活用されてきたものとしてブラウザゲームがあります。ブラウザゲームも html5 に置き換わるべきかと聞かれればそうは思いません。FLASH で出来る事が全て html5 で出来ませんし、制作の敷居も高くなります。ブラウザゲームのプラットフォームとして FLASH は残っても良いのではないかと思っています。
そのブラウザゲームの一種として「脱出ゲーム」というものがあります。
目次
脱出ゲームとは？
密室などの閉鎖環境に閉じ込められたという設定で、そこから脱出することがゲームの目的である。（引用元）
主に FLASH で作られている脱出ゲームですが、html5 でも脱出ゲームを作ることが出来るのだろうか？と疑問に思ったのでやってみました。
html5 で作るといっても9割は JAVAScript ですけどね。とりあえず第一回ということで、脱出ゲームの基本的な部分「画面遷移」まで作りました。
html5 部分
html5 での肝は canvas タグ。この中に色々描画していきます。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>html5で脱出ゲームは作れるのか？</title> <script type="text/javascript" src="js/escape.js"></script> </head> <body> <canvas id="escape" width="550" height="400"></canvas> </body> </html>
JAVAScript
FLASH と違う点は、ボタンを押した時の処理をボタンに書くような事ができません。あと、クリックポイントでマウスポインタを指マークにするなど FLASH で勝手にやってくれた細かな処理も自分で書かなくてはいけません。
タイトル画面
var title = "html5で脱出ゲームは作れるのか？";
var startbt = "Play";
var canvas = document.getElementById("escape");
if ( ! canvas || ! canvas.getContext ) { return false; }
var cx = canvas.getContext("2d");
cx.font = "20px 'Century Gothic'";
cx.fillText(title,110,100);
cx.fillText(startbt,250,250);
今回のデモのタイトルはテキストベースで簡素なものですが、いっそ画像にしてしまえば FLASH と遜色ないものができます。「fillText」で表示したいテキスト、x座標,y座標を指定してテキストを描画しています。
ボタンのクリック
FLASH では数行で済んだものが、結構な量になります。
canvas.addEventListener("mousedown", mouseDownHandler, false);
var view = 0; //いま自分がどこにいるのかを示す変数（0=タイトル）
function mouseDownHandler(e) { //マウスがクリックされたら動く関数
var rect = e.target.getBoundingClientRect();
mouseX = Math.floor(e.clientX - rect.left);
mouseY = Math.floor(e.clientY - rect.top); //マウスポインタの位置を取得
if(view == 0){
if(mouseX > 250 && mouseX < 300){
if(mouseY > 230 && mouseY < 253){ //クリック範囲を座標で指定
view = 1; //クリックされたら位置変数を更新
printView(); //部屋の画像を表示する（後述）
}
}
}
部屋の画像を表示
function printView(){
var img = new Image();
if(view == 1){
img.src = "image/view1.jpg";
img.onload = function(){ //画像が完全に読込まれたら動く関数
cx.drawImage(img, 0, 0); //画像を描画
moveBt(); //画面遷移ボタンを表示
itemBar(); //アイテムバーを表示
}
}else if(view == 2){ ・・・
画面遷移ボタンの表示
function moveBt(){
cx.beginPath();
cx.moveTo(4, 200);
cx.lineTo(25, 185);
cx.lineTo(25, 215);
cx.closePath(); //3つの点を線で結んで三角形にしています
cx.fillStyle = "#ffffff";
cx.fill(); //白で塗りつぶします
cx.beginPath();
cx.moveTo(546, 200);
cx.lineTo(521, 185);
cx.lineTo(521, 215);
cx.closePath();
cx.fillStyle = "#ffffff";
cx.fill();
}
この時点でまだボタンとしての機能はありません。別に記述します。
ボタンとして機能をつける
Play ボタンクリックの時の「クリックしたら動く関数」に画面遷移ボタンをクリックした時の処理を追加します。
画面遷移ボタンのクリック範囲を座標で指定します。それが各視点分要ります。（view 1～4）
else if(view == 1){
if(mouseX > 4 && mouseX < 25){
if(mouseY > 185 && mouseY < 215){
view = 2;
printView();
}
}
if(mouseX > 521 && mouseX < 546){
if(mouseY > 185 && mouseY < 215){
view = 4;
printView();
}
}
}else if(view == 2){ ・・・
クリックポイントはマウスポインタを指マークにする
画面遷移ボタンのクリック範囲を座標で指定し、マウスカーソルを変更。範囲外ではデフォルトに戻しています。
if(mouseX > 4 && mouseX < 25 && mouseY > 185 && mouseY < 215){
document.body.style.cursor = "pointer";
}else if(mouseX > 521 && mouseX < 546 && mouseY > 185 && mouseY < 215){
document.body.style.cursor = "pointer";
}else{
document.body.style.cursor = "default";
}
ソースコード
これらの要素を繋げた状態で見ないとわかりにくいのでソースを公開します。
動作デモ
作ってみた感想
FLASH より大変そうですが、html5 でも作れなくもないかなと思います。この基本構造だけでソースが180行近くあり、本格的に脱出ゲームを組んだらどれだけになるのか想像できません。
私は FLASH（ActionScript）以外にもプログラミング経験があるので出来ましたが、FLASH に慣れた人がいきなり JAVAScript で組むのは難しいと思います。そう考えると、FLASHブラウザゲーム界隈が html5 にシフトは考えにくい。敷居が高すぎる。その代わりに FLASH 作成ツールなしで、メモ帳だけでゲームが作れますけどね。