今回はJavaScriptでタイピングゲームを作るッピよ～
タイピングゲーム？？
Flashゲームで有名な【寿司打】のようなPCのキーボードで遊ぶゲームッピ！
今回はアルファベットのタイピングゲームを作るッピよ～！
お～！ こーいうのが作れるのか！
楽しみだな～
- キー入力を受け付ける / キー入力によって結果を変化させる
- 押されたアルファベットのキーを判別する
- 文字が何文字かを取得する
- 文字の順番を指定して、文字の中身を取り出す
- 指定した場所をJavaScriptによって書き換える
- 問題文をランダムで表示
- 正解した文字を入力済にする判定（if文/else文）
- 音声読み上げ（chromeのみ）
サンプルゲーム
↓に問題文が出るよ！ 出てきた文字を打ってみてね。
何かアルファベットのキーを押して下さい
※音が出ます
タイピングゲームの全体コード
<!-- 見えない部分 -->
<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){ //全部正解したら
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); //新たな問題を書き出す
}
}
}
</script>
</head>
<!-- ↓ここから見える部分↓ -->
<body>
<center>
<h1 id="start" class="text">何かキーを押して下さい</h1>
</center>
</body>
</html>このプログラムをひとつひとつ、わかりやすく解説しながら作っていくッピ！
楽しみにしてるッピヨ～！
タイピングゲームを作ってみよう
まずはキーボードの入力を受け付けるプログラムを書くッピよ～
下のサンプルコードをコピーして、それを元に学習していくッピ！
<!-- 見えない部分 -->
<html>
<head>
<!-- ↓この下にJavaScriptを入力してね！↓ -->
</head>
<!-- ↓ここから見える部分↓ -->
<body>
<!-- ↓この下にHTMLタグを入力してね！↓ -->
<!-- ここまで！ -->
</body>
</html>【 event.key 】 を使ってキー入力判定の準備をしよう
今回作るのはキーボードで入力して遊ぶタイピングゲーム。
キーボード入力の判定に【event.key】を使うッピネ～
【 event.key 】って何？？
初めて聞くんだけど・・・
event.key は押したキーを判別するjavascriptのプログラムッピ！
<script>
document.addEventListener('keydown',
event => {
let keys = event.key;
alert(`${keys}`+'が押されました');
});
</script>EventListenerという
ページの特定の要素が表示されたとき動くプログラムと組み合わせることで、
ページに訪れた人がやった行動に応じて
ゲームの結果を変えることができるッピ！
へ～ そんな便利なものがあるんだな～
何のキーが押されたか調べる装置を設定しよう
準備できたらさっそくコーディングをはじめるッピ！
<head></head>の中に
<script>
window.addEventListener("keydown", push_Keydown);
function push_Keydown(event){
let keyCode = event.key;
document.getElementById("start").innerHTML = keyCode + "を押しました";
}
</script>と入力するッピ！
<body></body>には
<h1 id="start">何かキーを押して下さい</h1>と書くッピね～
おおおおっ！！！
何の【キー】を押したか、ページに書かれてる！！！
ふふふ、これがプログラミングの魔法ッピ！
これはJavaScriptの中でもHTMLを書き換えるプログラム・・・【DOM操作】といわれるものッピネ！
他にも色んなことができるかと思うとワクワクするな～！
はやく先を勉強したいよ！
<!-- 見えない部分 -->
<html>
<head>
<!-- ↓この下にJavaScriptを入力してね！↓ -->
<script>
window.addEventListener("keydown", push_Keydown);
function push_Keydown(event){
let keyCode = event.key;
document.getElementById("push").innerHTML = keyCode + "を押しました";
}
</script>
</head>
<!-- ↓ここから見える部分↓ -->
<body>
<!-- ↓この下にHTMLタグを入力してね！↓ -->
<h1 id="push">何かキーを押して下さい</h1>
<!-- ここまで！ -->
</body>
</html>ここまでの命令文の解説するッピよ～！
キーボードの入力を受付るようにする
キーボードの入力を受付るようにする命令文
window.addEventListener(“keydown“, push_Keydown);
ッピ！
キー入力したあと動かすFunction設定
さらに、キーボードが入力されたあと、
どんな動作をするかを書いたプログラムがこれッピ！
function push_Keydown (event) {
let keyCode = event.key;
document.getElementBy
Id(“push”).innerHTML = keyCode + “を押しました”;}
たしか function はプログラムのセットだっけ？
合ってる？？
正解ッピ！ Function関数はプログラムセットのことッピ！
ユウキくん立派なプログラマーになっていくッピネ。
次はゲームの問題文を作って表示してみるッピよ～！
問題文を作ってランダムで表示してみよう
それでは問題文を作るッピよ～！
変数のリスト配列を利用するッピ！
リスト配列もバッチリ知ってるぜ！
変数の箱の中に、たくさんの単語や数字を入れることだよな？
そのとおりッピ！
let 変数名 = [ データ1, データ2, データ3,] ;
これでひとつの箱の中に、たくさんのデータを入れることができるッピよ～
それではさっそく問題文を作ってみるッピネ！
ランダムで問題を出題する命令文も入れといたッピヨ～
let Q = ["apple","banana","melon","mango","strawberry","blueberry","orange"];//問題文
let Q_No = Math.floor( Math.random() * Q.length);//問題をランダムで出題するさらに
function push_keydown(event){ 命令文;}に、
document.getElementById("start").innerHTML = Q[Q_No]; も追加して、問題文を表示みるッピ！
<!-- 見えない部分 -->
<html>
<head>
<!-- ↓この下にJavaScriptを入力してね！↓ -->
<script>
let Q = ["apple","banana","melon","mango","strawberry","blueberry","orange"];//問題文
let Q_No = Math.floor( Math.random() * Q.length);//問題をランダムで出題する
window.addEventListener("keydown", push_Keydown);
function push_Keydown(event){
let keyCode = event.key;
document.getElementById("push").innerHTML = keyCode + "を押しました";
document.getElementById("start").innerHTML = Q[Q_No];
}
</script>
</head>
<!-- ↓ここから見える部分↓ -->
<body>
<!-- ↓この下にHTMLタグを入力してね！↓ -->
<h1 id="push">何かキーを押して下さい</h1>
<h1 id="start">問題をここに出題します</h1>
<!-- ここまで！ -->
</body>
</html>
なんか英語が出てきた！ ちゃんと動作してるってことかな？
ばっちりッピ！
次は押したキーが、問題文と合っているかを判定して【文字を消す】プログラムを作るッピネ～
押したキーと問題文が合っているか判定機を作ろう
文字列を扱う命令文について学ぼう
まずはタイピングゲームを作るのに必要な
文字列を扱う命令文を、あらかじめ予習して、ひとつひとつ学んでいくッピヨ～
変数リストの配列データを呼び出す
まずは今までのおさらい
リストのデータを呼び出すッピ！
試しに、今回の問題文 【Q】の中身を取り出すッピ！
let Q = ["apple","banana","melon","mango","strawberry","blueberry","orange"];
document.write(Q);こんな感じッピかね？
しかーし、ここで問題があるッピ！
そのまま変数【Q】を呼び出すと、全部のデータを呼び出してしまうッピネ～
[“apple”,”banana”,”melon”,”mango”,”strawberry”,”blueberry”,”orange”]
とすべて表示されてしまうッピ！
えー
なんだよそれ不便だな～～
そうッピネ・・・
では単語を１つだけ取り出すにはどうしたらいいか？
その問題を解決しなければいけないッピ！
リストにはあらかじめコンピュータが番号を振ってあるッピよ～！
変数名 [ データ番号 ]
で呼んであげる必要があるッピネ～
今回は問題文【Q】が変数リストだから、
Q[ 0 ] , Q[ 1 ] ,Q[ 2 ] ,Q [ 3 ] , みたいな感じで呼び出しッピ！
Q[0]=”apple”;
Q[1]=”banana”;
Q[2]=”melon”;
Q[3]=”mango”;
みたいな感じッピ！
そんなふうになってるんだな～
リストの中身の個数/文字列の長さ（ケタ）を調べる .length
次は、文字列のケタを調べる命令文を勉強するッピよ～
まずはランダムで問題を出すときにも使った
【変数.length】
これは変数の長さ（ケタ）を取得するものッピネ
変数の長さ（ケタ）？
例えば、さきほどの問題文を作る命令文でいうと
let Q = [“apple“,”banana“,”melon“,”mango“,”strawberry“,”blueberry“,”orange“];
let Q_No = Math.floor( Math.random() * Q.length);
という意味ッピが・・・
この Q.length は、 【Q】の単語の個数を取り出すものッピ・・・
- apple
- banana
- melon
- mango
- strawberry
- blueberry
- orange
ッピゆえ、
【 Q.length 】は・・・【７】になるッピヨ！
リストの中の単語がいくつあるかわかる・・・ ってこと？？
ところが、それだけとは言えないッピ！
例えば
let name = “ユウキ”;
document.write(name.length);
すると、
name.length は、name = “ユウキ” の文字数・・・
【３】になってしまうッピノヨ～！
ううう・・・どゆこと？？
全くわかんねー・・・
まあ、つまり .length は、
文字列だったら文字数を、
数字の場合はケタ数を、
リストだったらリストの中身の個数を調べる命令文ってことッピ！
わかりやすく統一してくれればいいのに・・・
プログラミングは複雑だなぁ～
数字の順番を指定して １文字を取り出す .charAt
次は、数字の順番を指定して １文字を取り出す命令文ッピ！
変数.charAt( 呼び出す数字の番号 )
で取得できるッピよ～～
例えば、
let A = “apple“;
document.write(A.charAt( 4 ) );
とすると、変数 A の中身【 apple 】の０から4番目の文字を取得するので、結果は【 e 】になるッピ！
これを使って、入力したキーと問題文が合っているか判定するんだな？
そのとおりッピ！
だけど、今回は正解した前の文字を消しすタイプのタイピングゲームを作るゆえ、これは正解の判定のみに使うッピ！
次は 1 ~ 4 までと数字を指定して複数の文字を取り出す命令文を紹介するッピよ～～
数字の順番を指定して【複数】の文字を 取り出す .substring
では、数字の順番を指定して、
～から ～までの文字を取り出す命令文を勉強するッピ！
使う命令文は.substring ッピ！
変数.substring( 最初数字, 最後の数字 )
で使えるッピよ～～
例えば
let B = “banana” ;
document.write( B.substring ( 3, 5 ) );
なら、banana の ０から 3文字～5文字目 を書き出すゆえ
答えは【 ana 】になるッピ！
バナナから穴になっちゃったな～
次から本番！
問題文がどこまで正解しているか、
問題文と押したキーが合っているかを判定するプログラムを書いていくでッピよ～
打ったキーが問題文とどこまで合っているか判定しよう
それでは、新しいプログラムも覚えたところで本番に入るッピネ！！
ここがタイピングゲームのキモ、
押したキーと問題文が合っているか判定する判定機を作るッピヨ！
ここは一気にコードを公開するッピネ～！！
全体のコードの確認
<!-- 見えない部分 -->
<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){ //全部正解したら
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); //新たな問題を書き出す
}
}
}
</script>
</head>
<!-- ↓ここから見える部分↓ -->
<body>
<center>
<h1 id="start" class="text">何かキーを押して下さい</h1>
</center>
</body>
</html>
すげえええ！ 押したら文字が消えてる！！
ふふふふ、これがプログラミングの魔法ッピ！
次からこのコードについて詳しく解説するッピよ～～
文字を取得する命令文を使って、if文で判定する
それでは、タイピングゲームのキモ！
問題が今どこまで正解しているかを判定するプログラムを書くッピよ～
その前に新しく作った変数を説明しなければならないッピネ・・・
問題が正解したか確認するために、
【 Q_i 】と 【 Q_l 】の２つの変数を作ったッピ！
let Q_i = 0;
これは、Q_i はどこまで正解して文字を打ったか・・・
let Q_l = Q[Q_No].length;
これは、Q_l は問題文の長さを調べるための変数ッピね～
【 Q_l 】 – 【 Q_i 】 で、
今どこまで問題が合っているか調べるってこと？？
そのとおりッピ！
まずは、最初にボタンを押したあとの処理を書いていくッピよ～
let keyCode = event.key;
if (Q_l == Q_l – Q_i){
document.getElementById(“start”).innerHTML = Q[Q_No].substring(Q_i, Q_l);
} という意味になるッピね～～
Q[Q_No] = 今選んでいる問題文のリストデータだから、
Q[Q_No].substring(Q_i, Q_l);
って意味だな！？
で、 Q_l === Q_l – Q_i っていうのは、
Q_l と (Q_l – Q_i) が等しくなるのは、
問題文がまだでてない、何も正解してない最初の状態・・・
最初の状態のときはこの命令文を実行してくれ！ って意味？？
そのとおりッピ！！
もう言うことなしッピね～～～！
ユウキくんの成長をヒシヒシと感じるッピよ～～
打ったキーが問題文の最初の文字と合っているか判定しよう
打ったキーが問題文の最初の文字と合っているか判定するif文を作るッピ！
if (Q[Q_No].charAt(Q_i) == keyCode) {
Q_i ++;
document.getElementById(“start”).innerHTML = Q[Q_No].substring(Q_i, Q_l);
上の文はという意味になるッピね～
問題文が全部正解しているか判定しよう
もうこのプログラム解説も最後になるッピな・・・
最後は全部正解したら発動するプログラムを作るッピネ！
あともう少しッピ！ 頑張るがッピ！！
おう！！
全部正解したら動かすプログラムを作るには、
Q_l – Q_i === 0
にしなけれいけないッピ！
問題の文字数から、正解した文字を引いて、
【０】になれば、その問題のタイピングは全部正解したってこと？
そのとおりッピよ～～！
つまりそのあとの文章は、全部初期化の文章ッピ！
if (Q_l–Q_i === 0 ){
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);
という意味ッピネ～～～！
なるほどなー！
これだけすごいもの作れると、自信が持ててきたよ！
ユウキくんもかなりプログラマーとして成長してきたッピネ！
さらなる成長が楽しみッピよ！
- JQueryによって、JavaScriptの機能を拡張できる
- window.addEventListener(“keydown”, 関数名);によって、キー入力を受け付ける
- keyCode で打った文字が何か判別できる
- .length で文字列の長さ（ケタ）を取得できる
- .charAt(番号)で、指定した番号の文字を取得できる
- .substring（番号a, 番号b）で、指定した番号 【a~b】までの文字列を取得できる
- if (変数.charAt(番号) == keyCode) { 命令文;}で打った文字が合っているか判別する
- if (問題文の長さ – 正解した文字数 === 0) { 命令文;}で、全部文字が正解したあとのプログラムを書くことができる
次はオマケのページッピ！
画像をつけたり、効果音をつけたり、問題文を読み上げたりするッピよ～
