JavaScript入門講座｜タイピングゲームの作り方【自作】 | ページ 2

タイピングゲームをアレンジしよう！

タイピングゲームをアレンジしよう！

効果音をつけてみよう

うさタブ

打った文字が合っていたら

【当たり】の音が鳴ったらいいな～とか思ったことはないッピか？

ユウキ

お、その言い方はもしかして・・・

音がつけられるんだな！？

うさタブ

もちろんッピ！

JavaScriptを使って、効果音をつけるなんてお茶の子さいさいッピヨ！

うさタブ

ただ、効果音をつけるには、

効果音を配布しているフリーの音源素材を探す必要があるッピ！

ユウキ

音源素材？

うさタブ

自分でパソコン内蔵のマイクやスマホで録音することもできるッピが・・・

【ピコーン！】とか【キュイーン】といった音声をつくるには、特殊な機材が必要になるッピ！

ユウキ

へ～！

でもそんなことできる機械、うちにはないけど・・・？

うさタブ

もちろんそれは把握しているのでッピ！

なので、今回はフリー素材無料で借りられるを利用させていただくッピネ！

素材を配布しているサイトのリンクを貼って置くから、好きな音声をダウンロードして、お借りするッピヨ～

フリーの効果音配布サイト様

うさタブ

音声をダウンロードして、

打った文字が合ってたら鳴る音を【good.mp3】

全部正解した音を【ok.mp3】にするッピ！

タイピングゲームを作ったHTMLファイルと同じフォルダ（場所）に入れるッピよ～

うさタブ

準備ができたらJavaScriptのプログラムを書いていくッピ！

打った文章が合っているか判定するif文の中でも、

全問正解したあとの部分に

new Audio('ok.mp3').play(); // 音声再生;

それ以外のところを else {命令文;} で

new Audio('good.mp3').play(); // 音声再生;

を付け足すッピネ！

	if (Q[Q_No].charAt(Q_i) == keyCode) { //押したキーが合っていたら

		Q_i++; //正解した判定文字数に１足す
		document.getElementById("start").innerHTML = Q[Q_No].substring(Q_i, Q_l); //問題を書き出す

		if (Q_l-Q_i === 0){ //全部正解したら
			
			new Audio('ok.mp3').play(); // 正解の音声再生;
	
			Q_No = Math.floor( Math.random() * Q.length);//問題をランダムで出題する
			Q_i = 0;//回答初期値・現在どこまで合っているか判定している文字番号
			Q_l = Q[Q_No].length;//計算用の文字の長さ


			document.getElementById("start").innerHTML = Q[Q_No].substring(Q_i, Q_l); //新たな問題を書き出す
		} else {
			new Audio('good.mp3').play(); // 音声再生;
		}
	}

<!-- 見えない部分 -->
<html>
<head>
<script>

	let Q = ["apple","banana","melon","mango","starwberry","blueberry","orange"];//問題文
	let Q_No = Math.floor( Math.random() * Q.length);//問題をランダムで出題する

	let Q_i = 0;//回答初期値・現在単語どこまで合っているか判定している文字番号
	let Q_l = Q[Q_No].length;//計算用の文字の長さ


window.addEventListener("keydown", push_Keydown);

function push_Keydown(event){

	let keyCode = event.key;
	if (Q_l == Q_l-Q_i){

		document.getElementById("start").innerHTML = Q[Q_No].substring(Q_i, Q_l); //問題を書き出す
		}


	if (Q[Q_No].charAt(Q_i) == keyCode) { //押したキーが合っていたら

		Q_i++; //判定する文章に１足す
		document.getElementById("start").innerHTML = Q[Q_No].substring(Q_i, Q_l); //問題を書き出す

		if (Q_l-Q_i === 0){ //全部正解したら
			
			new Audio('ok.mp3').play(); // 音声再生;
	
			Q_No = Math.floor( Math.random() * Q.length);//問題をランダムで出題する
			Q_i = 0;//回答初期値・現在どこまで合っているか判定している文字番号
			Q_l = Q[Q_No].length;//計算用の文字の長さ


			document.getElementById("start").innerHTML = Q[Q_No].substring(Q_i, Q_l); //新たな問題を書き出す
		} else {
			new Audio('good.mp3').play(); // 音声再生;
		}
	}
}

</script>

</head>
<!-- ↓ここから見える部分↓ -->
<body>

<center>
<h1 id="start" class="text">何かキーを押して下さい</h1>
</center>

</body>
</html>

ユウキ

おおおおっ！　音声が鳴ってる！！！

うさタブ

新しく入れたコードを解説すると、

new Audio音声ファイルを読み込みます(‘good.mp3’　読み込むファイル名は　).play();音声を再生します

という意味ッピになるネ～！

うさタブ

ふふふふ、まだまだプログラミングの魔法は終わらないッピよ～！！

次は画像を付け足すッピ！

画像をつけてみよう

うさタブ

次は問題文に画像をつけていくッピネ！

今回は別のフリー素材を配布しているサイトで、画像をお借りしていくッピヨ～

フリーの画像配布サイト様

うさタブ

まずはダウンロードした画像を、タイピングゲームと同じフォルダに入れるッピネ！

うさタブ

document.getElementById("start").innerHTML = Q[Q_No].substring(Q_i, Q_l); //新たな問題を書き出す

コードの前に、

document.getElementById("img").src=Q[Q_No] + ".png";

とコードを足してみるッピ！

うさタブ

そして、<body></body>の中に画像を置く場所を用意してあげるッピよ！

<body></body>の中に

<p><img src="" id="img" /></p>

タグを入れてあげるッピ！

<!-- 見えない部分 -->
<html>
<head>
<script>

	let Q = ["apple","banana","melon","mango","starwberry","blueberry","orange"];//問題文
	let Q_No = Math.floor( Math.random() * Q.length);//問題をランダムで出題する

	let Q_i = 0;//回答初期値・現在単語どこまで合っているか判定している文字番号
	let Q_l = Q[Q_No].length;//計算用の文字の長さ


window.addEventListener("keydown", push_Keydown);

function push_Keydown(event){

	let keyCode = event.key;
	if (Q_l == Q_l-Q_i){

	        document.getElementById("img").src=Q[Q_No] + ".png";
		document.getElementById("start").innerHTML = Q[Q_No].substring(Q_i, Q_l); //問題を書き出す
		}


	if (Q[Q_No].charAt(Q_i) == keyCode) { //押したキーが合っていたら

		Q_i++; //判定する文章に１足す
		document.getElementById("start").innerHTML = Q[Q_No].substring(Q_i, Q_l); //問題を書き出す

		if (Q_l-Q_i === 0){ //全部正解したら
			
			new Audio('ok.mp3').play(); // 音声再生;
	
			Q_No = Math.floor( Math.random() * Q.length);//問題をランダムで出題する
			Q_i = 0;//回答初期値・現在どこまで合っているか判定している文字番号
			Q_l = Q[Q_No].length;//計算用の文字の長さ


	        	document.getElementById("img").src=Q[Q_No] + ".png";
			document.getElementById("start").innerHTML = Q[Q_No].substring(Q_i, Q_l); //新たな問題を書き出す
		} else {
			new Audio('good.mp3').play(); // 音声再生;
		}
	}
}

</script>

</head>
<!-- ↓ここから見える部分↓ -->
<body>

<center>
<p><img src="" id="img" /></p>
<h1 id="start" class="text">何かキーを押して下さい</h1>
</center>

</body>
</html>

ユウキ

画像表示は何度もやってるからバッチリだぜ！

ユウキ

document.プログラムを実行してgetElementByID(“img”id=”img”という場所で)src画像を表示して=Q[Q_No] 問題文の+ “.pngpngファイルを“;

<p>段落（グループ）を作ります<img　画像を表示します src表示するファイルは=””　id=”img“id(住所)は img です/></p>

って意味なんだよな～

うさタブ

いい感じッピ！

次は問題文を読み上げる命令文を書いてみるッピよ～！

JavaScriptで文章を読み上げてみよう

うさタブ

次はWeb Speech Synthesis APIという機能を使って、文章を音読み上げて見るッピ！

Microsoft Edgeブラウザでも再生されるッピが、

今のところ対応しているのがGoogle Chromeのみなので、注意するッピ！

うさタブ

問題文が表示される

if (Q_l == Q_l-Q_i){ 命令文;}

の中に、下のコードを追加してみるッピネ～

var speak = new SpeechSynthesisUtterance();
 speak.text = Q[Q_No];
 speak.lang = 'en-US';
speechSynthesis.speak(speak);

if (Q_l == Q_l-Q_i){

	        document.getElementById("img").src=Q[Q_No] + ".png";
		document.getElementById("start").innerHTML = Q[Q_No].substring(Q_i, Q_l); //問題を書き出す
		/* 単語の読み上げ */

		var speak = new SpeechSynthesisUtterance();
 		speak.text = Q[Q_No];
 		speak.lang = 'en-US';
		speechSynthesis.speak(speak);

		/* 単語の読み上げ終わり */

		}

<!-- 見えない部分 -->
<html>
<head>
<script>

	let Q = ["apple","banana","melon","mango","starwberry","blueberry","orange"];//問題文
	let Q_No = Math.floor( Math.random() * Q.length);//問題をランダムで出題する

	let Q_i = 0;//回答初期値・現在単語どこまで合っているか判定している文字番号
	let Q_l = Q[Q_No].length;//計算用の文字の長さ


window.addEventListener("keydown", push_Keydown);

function push_Keydown(event){

	let keyCode = event.key;
	if (Q_l == Q_l-Q_i){

	        document.getElementById("img").src=Q[Q_No] + ".png";
		document.getElementById("start").innerHTML = Q[Q_No].substring(Q_i, Q_l); //問題を書き出す
		/* 単語の読み上げ */

		var speak = new SpeechSynthesisUtterance();
 		speak.text = Q[Q_No];
 		speak.lang = 'en-US';
		speechSynthesis.speak(speak);

		/* 単語の読み上げ終わり */

		}


	if (Q[Q_No].charAt(Q_i) == keyCode) { //押したキーが合っていたら

		Q_i++; //判定する文章に１足す
		document.getElementById("start").innerHTML = Q[Q_No].substring(Q_i, Q_l); //問題を書き出す

		if (Q_l-Q_i === 0){ //全部正解したら
			
			new Audio('ok.mp3').play(); // 音声再生;
	
			Q_No = Math.floor( Math.random() * Q.length);//問題をランダムで出題する
			Q_i = 0;//回答初期値・現在どこまで合っているか判定している文字番号
			Q_l = Q[Q_No].length;//計算用の文字の長さ


	        	document.getElementById("img").src=Q[Q_No] + ".png";
			document.getElementById("start").innerHTML = Q[Q_No].substring(Q_i, Q_l); //新たな問題を書き出す
		} else {
			new Audio('good.mp3').play(); // 音声再生;
		}
	}
}

</script>

</head>
<!-- ↓ここから見える部分↓ -->
<body>

<center>
<p><img src="" id="img" /></p>
<h1 id="start" class="text">何かキーを押して下さい</h1>
</center>

</body>
</html>