*

html5で脱出ゲームは作れるのか?(1:画面遷移)

公開日: : 最終更新日:2014/09/10 プログラミング ,

escape2

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";
}

ソースコード

これらの要素を繋げた状態で見ないとわかりにくいのでソースを公開します。

ソース

動作デモ

html5で脱出ゲーム 画面遷移デモ

作ってみた感想

FLASH より大変そうですが、html5 でも作れなくもないかなと思います。この基本構造だけでソースが180行近くあり、本格的に脱出ゲームを組んだらどれだけになるのか想像できません。

私は FLASH(ActionScript)以外にもプログラミング経験があるので出来ましたが、FLASH に慣れた人がいきなり JAVAScript で組むのは難しいと思います。そう考えると、FLASHブラウザゲーム界隈が html5 にシフトは考えにくい。敷居が高すぎる。その代わりに FLASH 作成ツールなしで、メモ帳だけでゲームが作れますけどね。

次の回へ

html5で脱出ゲームは作れるのか?(2:効果音を鳴らす)

上部広告

  • Pocket

おすすめトピックス

関連記事

escapess
html5で脱出ゲームは作れるのか?(2:効果音を鳴らす)

html5 で脱出ゲームは作れるのか?html5 の可能性を模索する連載第二回目です。今回は大抵の脱出ゲームで使われる「効果音」を鳴らしてみました。 目次1 ブラウザごとの音声ファイルの対応2 mp3 ファイルの事前ロー […]

オフィス画像モニタ
謎エラー勃発!「オブジェクトを指定してください。」が出たら確認する事

こんにちは。桐村です。Webデザイナーではありませんが、jQueryは触る事もあります。巷のウェブサイトではよく見かける画像スライダーとか、ページの下までスクロールしたら現れる上まで戻るボタンとか。現在ではほとんどが j […]

intro2
【AS2.0】イントロがあるBGMをループさせる方法

こんにちは。桐村です。ゲームに場面にあった BGM は必須ですよね。卒業研究では ActionScript で RPG を作ったり、個人で FLASH ゲームを作った経験がありますので、BGM をゲームに組み込む機会もあ […]

上部広告

著者について

名前:Azell
作曲したり風景写真撮ったりWeb制作したりする人です。 好きな事を楽しくブログに綴れていけたらと思います。

フォローはこちら

       

上部広告

       
カスタムサムネイル
Youtubeでカスタムサムネイル登録時にエラー「invalid json string…」

Youtube で動画をアップロードしたら動画のサムネイルが自

三島池
鴨が泳ぐ米原市の三島池はキャンプもできる紅葉スポット、美しい公園でした

滋賀県米原市にある三島池は、滋賀県の紅葉スポットの一つとして数

airport
空港の売店で見かけるTax Freeとは何か?

飛行機をよく利用する人ならご存知かと思いますが、空港の売店には

スマホサイト
プラグイン無しで簡単に実現するスマホサイトの上からドロワーメニューの作り方【jQuery】

近年どこでもスマートフォン向けサイトが用意されているのが当たり前です。

sumaho-footer2
これを見れば簡単!スマホサイトのフッターメニューをサクッと作るサンプル

スマートフォンなどのモバイル端末でウェブサイトを見る人が急増し、今の時

→もっと見る