Javascript タイピング ゲーム スマホ用 をつくる

公開日: : html5, javascript

JavaScript タイピングゲーム スマホ用

JavaScript スマホ用 切り替え

前回の記事のゲームですが、スマホだとサイズが合わなくてやりにくい状態のため、スマホ用のサイズに合わせた別ページを用意しました。

JavaScript スマホ用 切り替え(サンプルコード)

PC用のページの方に JavaScriptでユーザーエージェントを取得し、スマホからのアクセスだったら、スマホ用のページに飛ばす処理を入れました。

(function(){
    var ua = navigator.userAgent.toUpperCase();
    if(ua.indexOf('IPHONE') != -1 || (ua.indexOf('ANDROID') != -1 && ua.indexOf('MOBILE') != -1)){
        location.href = 'スマホ用のファイルアドレス';
	exit();
    }
}());

スマホ audioタグ 鳴らない

切り分けはうまくいったのですが、自分のスマホでは音が鳴っていませんでした。

audioタグは思ったより、対応してない場合が多いみたいです。
audioタグのcontrols も見ていたのですが、表示自体もままならない、まったく使い物になってませんでした。

なぜflashじゃなく、JavaScriptでゲームを作ったりするのか=「スマホに対応したいから」という原点から、まったく外れてしまいました。

でもそういう場合は、audio オブジェクトなら鳴るかもしれないので、テストしてみると、読み込みが重いみたいですが、鳴っていました。

スマホ版はaudioタグをやめて、audioオブジェクトを使おうと思います。

参考サイト

HTML5 audio オブジェクト

audio オブジェクト 基本的な使い方

audio = new Audio("音のファイル名");
audio.play();//再生

audio オブジェクト 音声ファイルの複数の例

実際は、音声ファイルのタイプが複数あるので、ゲームの中では以下のように、MIMEタイプで読み込むファイル名を切り替えて使いました。

var audio_start = new Audio("");//スタートボタン の オーディオオブジェクトを生成
if(audio_start.canPlayType){
      if(audio_start.canPlayType("audio/wav") != ""){audio_start.src = "./oto/start.wav";}
	  else if(audio_start.canPlayType("audio/mpeg") != ""){audio_start.src = "./oto/start.mp3";}
	  else if(audio_start.canPlayType("audio/ogg") != ""){audio_start.src = "./oto/start.ogg";}
}
$(document).ready(function(){
      //スタートボタンが押されたら
      $("#startbtn").click(function () {
            audio_start.play();//再生
      });
});

audio オブジェクトを JavaScript で制御する例

ボタンなどでaudio オブジェクトを制御する場合は以下のような感じです。

HTML5 audio オブジェクトをJavaScriptで音を制御する(サンプルコード)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ARA WEB HTML5 new audio(); オブジェクトを使ってJavaScriptで音を制御する</title>
<script src='jquery-2.1.4.min.js'></script>
<script type="text/javascript">
$(function() {
   // オーディオのオブジェクト
    var audio = new Audio("");
	audio.addEventListener("timeupdate",function (e){
		
		$("#mess").html(Math.floor(audio.currentTime/60) +':'+ Math.floor(audio.currentTime) +'/'+ Math.floor(audio.duration/60) +':'+ Math.floor(audio.duration));

		//再生が終わったら
		if(audio.currentTime == audio.duration){
			audio.currentTime = 0;
			crr_time = 0;
			$("#audiobutton").val('再生');
			play_flg = 0;
		}
		
	},false);

    var src = "";
	var crr_time = "";
    var mess = "再生できません";
    var play_flg = 0;  // 0:pause, 1:playing
    if(audio.canPlayType){
        if(audio.canPlayType("audio/wav") != ""){
            src = "./sample.wav";
            name = "wav";
        }else if(audio.canPlayType("audio/mpeg") != ""){
            src = "./sample.mp3";
            name = "mp3";
        }else if(audio.canPlayType("audio/ogg") != ""){
            src = "./sample.ogg";
            name = "ogg";
        }
    }
    $("#mess").html(name);
	
	//ここからイベント処理
    if(src != ""){
        audio.src = src;
        $("#audiobutton").click(function(ev){

            if(play_flg == 0){ //再生する
                audio.load();
                audio.play();
                play_flg = 1;
				$("#audiobutton").val('一時停止');
				audio.currentTime = crr_time;
			
            }else{ //一時停止する
                audio.pause();
                play_flg = 0;
				$("#audiobutton").val('再生');
				crr_time = audio.currentTime;
            }
        });

		 $("#audiostopbutton").click(function(ev){
				crr_time = 0;
				audio.pause();
                play_flg = 0;
				$("#audiobutton").val('再生');
          });
		 $("#audiomutebutton").click(function(ev){
				if(audio.muted){
				audio.muted = false;
				$("#audiomutebutton").val('ミュートする');
               }
			   else{
			   audio.muted = true;
				$("#audiomutebutton").val('ミュート中');
			   
			   }
          });
    }	
});
</script>
</head>
<body>
<h1>HTML5 new audio(); オブジェクトを使ってJavaScriptで音を制御する</h1>
<div id="mess"></div>
<input type="button" id="audiobutton" value="再生">
<input type="button" id="audiostopbutton" value="停止">
<input type="button" id="audiomutebutton" value="ミュートする">
</body>
</html>

DEMO を見る
(読み込みが遅くて、鳴らない場合があります。自分の場合は再生ボタンを何度も押すと鳴りました。)

JavaScript タイピングゲーム(スマホ対応?)

という訳で、スマホ版はaudioタグをやめて、audioオブジェクトで作り治しました。
JavaScript タイピングゲーム スマホ用
DEMO を見る

自分のスマホでは音は少し遅れ気味な時もありますが、鳴るようになりました。

関連記事

背景を SVG で全面表示し、パターン化をアニメーションさせる

背景を SVG で全面表示し、パターン化をアニメーションさせる

SVGでウィンドウに全面表示させた空に、シャボン玉が飛んでいるような表現をしてみようと思います。

記事を読む

SVGとは?

SVGとは? SVG(Scalable Vector Graphics)は、XMLをベースとした、

記事を読む

Javascript ノード の取得や挿入

Javascript ノードの取得や挿入

ノードの取得 ノードの取得(ダイレクトアクセス) document.getElementById

記事を読む

HTML5 とは?

HTML5とは? HTML5は、標準化団体のW3C(World Wide Web Consorti

記事を読む

Three.jsで360°パノラマ画像を VR させる

Three.jsで360°パノラマ画像を VR させる

Three.jsで360°パノラマ画像を VR させる VRを作るのに前回のプラグイン「WP-VR

記事を読む

Javascript 写真ギャラリー サムネイルスライド横 レスポンシブ対応

Javascript 写真ギャラリー サムネイルスライド横 レスポンシブ対応

Javascript でマウスドラッグのテストをしていきます。 分かりやすいように、ボールを投げる

記事を読む

WEBページをアプリっぽくする(サービスワーカーでホーム画面に追加)

WEBページをアプリっぽくする(サービスワーカーでホーム画面に追加)

前回作ったお絵かきページを、簡単にアプリっぽくしようと思います。 具体的には、スマホで最近よく見か

記事を読む

Wordpress VR Test

WordPress で VR させて、360°のパノラマ画像を表示する

WordPress.com内ショートコードで VR させる WordPress.com内で、VR(

記事を読む

画像の拡大・縮小 タッチイベント

画像の拡大縮小を javascript の touch イベントでやってみる

画像の幅と高さを取得 まずは、neko.jpg という画像を用意して、幅と高さを取得します。

記事を読む

画像加工 cropbox.js

写真をアップロードして切り抜きが出来るcropboxにタッチイベントを付けてみる

Git Hub の cropbox 写真をアップロードしてカット出来るjQueryのプラグイン c

記事を読む

html5 javascript

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CodeIgniter インストール
Codeigniter インストールとバージョンアップ2→3 PHP 5→7 メモ

Codeigniter インストール Codeigniter をサイ

wordpress カスタム投稿を一覧(ループ)で表示する
wordpress カスタム投稿を一覧(ループ)で表示する

カスタム投稿を一覧で表示する方法がいろいろあります。 query_p

wordpress カスタム投稿で 2ページ目以降が404
wordpress カスタム投稿で 2ページ目以降が404になってしまう

wordpress のカスタム投稿で、ニュースのページを作っていました

ロリポップでWordPressのPHPバージョンを5から7にする
ロリポップでWordPressのPHPバージョン7.1に変更後「サイトに技術的な問題が発生しています。」

WordPress.org の推奨環境 PHP7以上 MyS

WEBページをアプリっぽくする(サービスワーカーでホーム画面に追加)
WEBページをアプリっぽくする(サービスワーカーでホーム画面に追加)

前回作ったお絵かきページを、簡単にアプリっぽくしようと思います。 具

→もっと見る

    • 202002
      Mon Tue Wed Thu Fri Sat Sun
      12
      3456789
      10111213141516
      17181920212223
      242526272829
    にほんブログ村 IT技術ブログへ にほんブログ村 IT技術ブログ PHPへ にほんブログ村 IT技術ブログ WordPressへ
    にほんブログ村 FC2 Blog Ranking
    PAGE TOP ↑