【WEBアプリ】 OXゲーム
第５回は、OXゲームを作っていきます。
今回は流れてくるOとXを素早く判断して、ポイントを稼ぐゲームです。
1. 初期データのダウンロード
① 以下のURLにアクセス
https://drive.google.com/drive/folders/1wDrp4Dlu_QsNMby2Sg5jcyvEcbvCGBD4?usp=drive_link
② OXゲーム 教材.zip をダウンロード
③ ダウンロードにあるZipファイルを解凍。
【Zipファイルの解凍方法】
Macの場合、Zipファイルをダブルクリック
Windows の場合、わからない場合は、以下のサイトを見る
④
の「基本的なはじめ方」を参考に準備する。
2. 基本要素の配置
【TRY】 必要なテキスト・画像 ・ ボタンの配置しよう
以下の概略図をもとに、必要な要素を配置していこう。
> は、あるタグの中にそのタグを入れてることを表すよ。
文字(id:timer_text)
> 残り
> span(id:time_text) 中身：20
> 秒
div (id:imageBox)
> 画像（img/maru.png, class: images, id: image_0）
> 画像（img/maru.png, class: images, id: image_1）
….[省略]…
> 画像（img/maru.png, class: images, id: image_8）
> 画像（img/maru.png, class: images, id: image_9）
文字(id:correctResult, class: resultText) 中身なし
文字(id:incorrectResult, class: resultText) 中身なし
ボタン(class: answerButtons)
> 画像（img/maru.png, class: buttonImages）
ボタン(class: answerButtons)
> 画像（img/batsu.png, class: buttonImages）
改行（「<br>」で示す。</br>はあってもなくても良い。）
ボタン(id: resetButton) 中身：リトライ
※できるだけ、解答を見ずにやってみよう。
【解答】 必要なテキスト・画像 ・ ボタンの配置しよう
今回は、画像やテキストなどをまず配置していくよ。
これではデザインがぐちゃぐちゃで何があるかわからないね。
今回は、先にデザインからととえていこう。
3. デザインを整えよう
デザインを整えるのに使うのはCSSだったね。実際にCSSを開いてコードを書いていこう。
【TRY】 デザインを調整しよう
画面全体 (body)
・文字や画像中央揃え
・背景色 #EAEAEA
・フォント sans-serif;
imageBox内にある画像全て
・横幅 80px
・横並び
AnswerButtons
・上の余白 60px
・横幅 100px
・縦幅 80px
・背景色 #eeeeee
・枠線 なし
ボタン内にある画像全て
・横幅 40px
timer_text
・上の余白 100px
・文字の大きさ 70px
・文字の色 #628E90
resultText
・文字の大きさ 40px
・文字の色 #256D85
リセットボタン
・上の余白 60px
・内側の余白 上下20px, 左右40px
・背景色 #256D85
・文字色 白
・文字の大きさ 20px
・枠線 なし
フォントをsans-serifフォントにするのは以下のように書くよ。
font-family: sans-serif;※できるだけ、解答を見ずにやってみよう。
完成イメージ
【解答】 デザインを調整しよう
4. ランダムにOXを表示させよう
① 配列を作ろう
次に、10個の横並びが今は全部Oだけど、OとXがランダムに並ぶようにするよ。
そこで、初めに画面をロードした時の初期値のOかXを乱数を使って決めていくよ。
ここでは、for文（ループ文）を使っていくよ。
【For文とは】
for (let i = 0; i < 10; i++) {
中身
}
のように書いたとき、中身のコードが複数回呼ばれることを表す。今回は、10回呼ばれる。
はじめに、iという変数が0で、毎回呼び出すごとに、iが10より小さい時だけiが1ずつ増えていくということ。（i++ は、i = i +1 の省略版だったね）
つまり、
for (let i = 0; i < 10; i++) {
console.log("今は、" + i + "回目のループです");
}
というコードは、
今は、0回目のループです
今は、1回目のループです
今は、2回目のループです
今は、3回目のループです
今は、4回目のループです
今は、5回目のループです
今は、6回目のループです
今は、7回目のループです
今は、8回目のループです
今は、9回目のループです
と console に表示される。0回目から始まり、10回目はないことに注意
【配列とは】
値を入れておく箱（変数）が複数くっついて、箱の数の分だけ値を入れておけるようになった「値を入れておく箱の集まり」
〔配列の定義の仕方（作り方）〕
言語によって書き方が違うが、JavaScriptでは、
let hairetsu = [];
と定義する。初めから、値を入れておきたいときは、
let hairetsu = [4, 2, 1, 5, 3];
のように、カンマを使って区切る。最後にカンマは必要ない。
また、数字だけではなく、true/falseや文字なども入れることができる。
let meibo = ["taro", "yamada", "sato", "tanaka"];
let hairetsu = [true, false, true];
〔配列からの取得の仕方（配列にあるデータの呼び出し方）〕
let hairetsu = [4, 2, 1, 5, 3];
とある時、
hairetsu[2]
とあると、2番目の要素を呼び出すことができる。
つまり、
console.log(hairetsu[2]);
というコードを書くと、1とconsoleに表示されるよ。配列のデータを呼ぶときは、1番目じゃなくて0番目からあることに注意しよう。
〔配列にデータを追加する仕方〕
配列にデータを追加する方法はたくさんある。今回はその中でも一番使う頻度の高い、配列の最後尾に追加する方法を紹介する。
let hairetsu = [4, 2, 1, 5, 3];
とある時、
hairetsu.push(10)
と書くと、
[4, 2, 1, 5, 3]
だったのが、
[4, 2, 1, 5, 3, 10]
になるよ。
配列は、他にも途中に追加したり、特定の項目だけ削除したり、いろいろなことができる。また、for文と一緒に使うことが多い。
つまり、
さっき書いたこのコードは、
numという箱（変数）に、0か1をいれ、それを、quizListという箱の列（配列）の最後尾に置いているイメージだね。これを10回繰り返しているよ。
【TRY】 配列の数字を元に、OXの画像を表示しよう
赤い部分はスクショ通りに書いて、黄色の部分のコードは自分で考えてみよう
黄色の部分で使うコードは
・For文
・If文
・画像の変更コード
だよ。
配列の中身のデータを取得する方法は、
quizList[2] で２番目のデータを取得するんだったね。
つまり、
iが0から9までの10回ループしている中で、
もし、image_◻︎のidを持つ画像を、i番目の配列のデータが0だったら、Oの画像を、そうでなかったらXの画像に変更するようにすればいい。
画像の変更の仕方がわからない場合は、前回のテキストを確認しよう。
【解答】 配列の数字を元に、OXの画像を表示しよう
5. 正解不正解の判定をしよう
少し難しいので、1行づつ何をしているか確認していこう。
まず、OもしくはXボタンが押されたとき、
answerというfunction(関数)が呼ばれる。そこで、Oボタンを押したときは、0, Xボタンを押した時は1がnumという変数に入れられるね。
これは前回使った、引数を用いている。
【引数とは】
通常は、testという関数を呼ぶ時は、
main.jsで、test(); もしくはボタンなどに、onclick="test()"
と付ける。
そして、
main.jsで、
function test(){
内容…
}
と書く。
しかし、例えば、1-100までの数字が書かれたボタンが100個ありそれぞれのボタンが押されると、その数字をalertしたいとき、functionを100個作るのはめんどくさい。
そこで、functionを呼び出す時に、ある程度の情報（今回で言うとボタンに書かれた数字）を一緒に渡せるようにするのが引数。
今回の場合、onclick="openBox(0)"というのは、openBoxという関数を呼ぶときに、0という数字を一緒に渡していることを示す。この()の中にある数字は、numという変数（通常はletを用いて初期定義する）に保存されるイメージだ。
そして、quizList[0]すなわち、quizListの0番目がnumと等しいときは、正解ということだね。quizListには、Oの時は0, Xの時は1が入っているから、ボタンを押した時のnumと同じだね。
そして、正解した時は、correctAnswerという関数が呼ばれるよ。
ここで、まず、quizListの最初（0番目）を消すために、
quizList.shift();と書いてある。
配列名.shift();
で配列の初めのデータを1個だけ削除できる。
そして、その後に、
新しい変数numに、0か1をランダムに入れているね。
let num = Math.floor(Math.random() * 2);そして、その数字をquizListという配列の最後に追加しているのが、
quizList.push(num);だね。その後、配列を変えるだけじゃなくて、配列の変更から画像を変更するために、refleshImages関数を改めて呼んでいる。
【変数の効果範囲について】
今回のコードで、numという名前の変数をたくさん使っている。しかし、通常は同じ名前の変数を複数使うことはできない。
しかし、変数には効果範囲があって、変数を定義（let 変数名 = OO;）したときの場所によって変わる。
変数をfunction（関数）外で定義したら、その変数は全ての場所で使える。
また、変数をfunctionやfor/if文などの内で定義した場合は、その変数はそのfunctionやfor/if文の中でしか呼び出したり変更したりできない。
{}で囲まれている中で定義すると、その{}を超えては使えないとイメージするといい。
だから、同じ名前の変数が複数回使えるんだね。
6. タイマーを実装しよう
次に、タイマー機能を作っていこう。
フラグ変数（true, falseの変数）がよく使われている。!がnotの意味であることを注意しながら、どうして使われているのか自分で理解しよう。
7.正解不正解のカウントをしよう
次に正解不正解の回数・正答率を表示できるようにしていく。
正解数と不正回数を記録する変数を作る。
不正解の時は、incorrectCountを1増やす。
正解の時もcorrectCountを1増やして、タイマーが終わった時に結果を表示するshowResult関数を呼ぶよ。
正答率などをあらかじめ計算してから、表示するよ。
8. ゲームリセットできるようにしよう
ここまでお疲れ様でした。あとはリセットできるようにしよう。
location.reload();でサイトをリロードすることができるよ。
つまり、リセットボタンが押されたら、サイトがリロードされるということだね。
あれ、ボタンを押してもリセットされないね。
【TRY】バグを修正しよう
プログラムをきちんと書いたのに動かないことをバグというよ。そして、バグを治すことをデバッグという。
バグには、スペルミスや元々のコードが間違っていたり、そもそもコードが足りていないことがあるよ。
今回は、コードが一部足りてないのが動かない原因だね。index.html, style.css, main.jsのどれかのファイルで1行もしくは一部追加して、リセットボタンを動くようにしよう。
※できるだけ、解答を見ずにやってみよう。
【解答】バグを修正しよう
今回は、関数(function)は準備して、関数の中身も書いていたけど、ボタンと関数を繋いでいなかったのが原因だね。
9. デザインの仕上げをしよう
最後に、CSSを少し追加しよう。
hoverとは、要素の上にマウスが乗っかっている状態のことをいう。
【hoverの書き方】
button1というidのhoverを書くときは、
#button1:hover {
変更したい内容
}
のように書くよ。idだけでなく、classやtag名などでも同様にできる。
また、hoverの中で書くのは、変更したい項目だけでいいので、文字色を変えない場合なのは、文字色などの指定はここではしなくていい。
:hoverがない方で指定しよう。
10. 完成
これで完成です。
お疲れ様でした。
11. 解答データ
① 以下のURLにアクセス
https://drive.google.com/drive/folders/1wDrp4Dlu_QsNMby2Sg5jcyvEcbvCGBD4?usp=drive_link
② OXゲーム 解答.zip をダウンロード
12. 次回予告
次回を何にするかはまだ決めていません。
お楽しみに。
coming soon…