*

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

おすすめトピックス

関連記事

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

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

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

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

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

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

上部広告

著者について

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

フォローはこちら

       

上部広告

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

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

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

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

gifuparking
名鉄岐阜駅直結の最も近い駐車場、24時間営業で2日以上停められます

名鉄岐阜駅から名古屋方面へ旅行やお出かけ、また中部国際空港へ電

wordpressengry
WordPress管理画面の投稿一覧で表示される投稿数を変更するには

WordPress の管理画面と言えば、WordPress でブログや

パンケーキ
札幌市大通で絶品サッポロパンケーキ!タイル貼りのカフェ「ミント」

札幌の地下鉄大通駅から徒歩3分、アクセスも良いタイル貼りのオシ

→もっと見る