*

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

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

非常口

html5 で脱出ゲームは作れるのか?html5 の可能性を模索する連載第二回目です。今回は大抵の脱出ゲームで使われる「効果音」を鳴らしてみました。

ブラウザごとの音声ファイルの対応

今まで html5 における音声ファイルはブラウザごとに対応状況がまちまちで、各ブラウザに対応するには複数形式のファイルを用意しなければならなかったのですが、最近では状況が変わってきたようでかなり対応が進んでいます。

  • Internet Explorer 9以上 : mp3, aac
  • Google Chrome 25 以上 : mp3, aac, ogg, wave, WebM
  • Firefox 21 以上 : mp3(winのみ),aac(winのみ), ogg, wave, WebM
  • Opera 14 以上 : mp3, aac, ogg, wave, WebM
  • Safari 3.1 以上 : mp3, aac, ogg, wave

おわかりでしょうか。注目は mp3 です。今までは mp3 に対応していないブラウザがあったのですが、2014年時点で Windows のみですが mp3 で全てのブラウザがカバーできるようになりました。html5 でオーディオも扱いやすくなりましたね。

今回は mp3 を使用して html5 で効果音を鳴らしてみます。

mp3 ファイルの事前ロード

効果音再生の際に遅延が発生してしまっては残念な事になってしまいますので、事前にロードします。

var audios = {"itemget": new Audio("sound/itemget.mp3")};
for(var i in audios){
  audios[i].load();
}

これを onLoad イベントでページが読み込まれたら実行するようにします。また1行目はコンマで区切って複数のオーディオファイルを定義できます。

ダブルクオーテーションの中のように itemget の部分をどういう時に使う音か名前付けしておけば、便利です。

効果音を鳴らす

今回はアイテムを取得したら効果音を鳴らすようにしています。audios[“itemget”].play();の部分が効果音を再生している部分です。

canvas.addEventListener("mousedown", mouseDownHandler, false);
function mouseDownHandler(e) {
  var rect = e.target.getBoundingClientRect();
  mouseX = Math.floor(e.clientX - rect.left);
  mouseY = Math.floor(e.clientY - rect.top); //クリック位置の検出
  if(itemGet == 0){  //アイテムを取得した時の処理
    if(mouseX > 250 && mouseX < 300 && mouseY > 325 && mouseY < 354){
      itemGet = 1; //アイテム取得変数を更新
      audios["itemget"].play(); //効果音を鳴らす
      backGround(cx,cx2,itemGet); //背景を更新
    }
  }
}
function backGround(cx,cx2,item){
  var img = new Image();
  if(item == 0){  //最初の背景
    img.src = "image/itemview1.jpg";
    img.onload = function(){
      cx.drawImage(img, 0, 0);
      itemBar(cx2,item);
    }
  }else if(item == 1){  //アイテム取得後の背景
    img.src = "image/itemview2.jpg";
    img.onload = function(){
      cx.drawImage(img, 0, 0);
      itemBar(cx2,item);
    }
  }
}

動作デモ

デモ

所感

html5 があれば FLASH なんて不要と思っているわけではありません。やっぱり脱出ゲームを作るには FLASH の方が簡単です。しかし、html5 なら FLASH 開発ソフトは不要でメモ帳だけで作れちゃいます。html5 オーディオも各ブラウザで対応も進んだことで、html5 でも作りやすくなったと思います。

プログラマ等を目指すのであれば、あえて html5 でゲームを作る事で知識は付くと思いますね。何より作ってみる事が習得の近道ですから。

バックナンバー

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

  • Pocket

おすすめトピックス

関連記事

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

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

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

Adobe FLASH がモバイルの世界から殲滅され、PC の世界からも淘汰されつつある今日この頃。かつて動きのあるコンテンツの作成に使われた FLASH は html5 にシフトされてきています。 FLASH が活用さ […]

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

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

著者について

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

フォローはこちら

       

       
ラジオのAM/FMとはどういう意味か?

ラジオ放送には2種類ある事は多くの方がご存知かと思います。それ

美山鍾乳洞
大変珍しい立体迷路型鍾乳洞、岐阜県郡上市の「美山鍾乳洞」を探検

岐阜県郡上市にある美山鍾乳洞は日本最大級の立体迷路型鍾乳洞とい

スープカレー
こだわりのスープカレーが旨い岐阜県郡上市の老舗カフェ「アルピーヌ」でランチ

岐阜県の郡上八幡へ観光へ行った時に、郡上市でどこかランチができ

養老軒の大福
売切れ続出!独創的な絶品大福で有名な岐阜県川辺町の和菓子処「養老軒」

岐阜県加茂郡川辺町に存在する和菓子屋さん養老軒は独創的なフルー

モネの池の鯉
神秘的で青く美しい岐阜県関市の「モネの池」に行ってみた。最善の見頃は6月

Google マップで適当に色々な場所を見ていた所、偶然「Mo

→もっと見る