![見出し画像](https://assets.st-note.com/production/uploads/images/132819495/rectangle_large_type_2_0e51d42b34a4588e47aa5738c87b0ccb.jpeg?width=800)
【WEBアプリ】 OXゲーム
第5回は、OXゲームを作っていきます。
![](https://assets.st-note.com/img/1685081539691-uwFTbm7Krw.png?width=800)
今回は流れてくる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) 中身:リトライ
※できるだけ、解答を見ずにやってみよう。
【解答】 必要なテキスト・画像 ・ ボタンの配置しよう
今回は、画像やテキストなどをまず配置していくよ。
![](https://assets.st-note.com/img/1709389683216-HJTEHezKi7.png?width=800)
![](https://assets.st-note.com/img/1685082348068-G0mnNacnlE.png?width=800)
![](https://assets.st-note.com/img/1685082321446-t7X1kg8A0G.png?width=800)
これではデザインがぐちゃぐちゃで何があるかわからないね。
今回は、先にデザインからととえていこう。
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;
※できるだけ、解答を見ずにやってみよう。
完成イメージ
![](https://assets.st-note.com/img/1709390759398-wAVkD893Ov.png?width=800)
【解答】 デザインを調整しよう
![](https://assets.st-note.com/img/1709390704849-E9d2pGK95q.png?width=800)
![](https://assets.st-note.com/img/1709389917918-PauUBv6W8d.png?width=800)
![](https://assets.st-note.com/img/1685082348068-G0mnNacnlE.png?width=800)
![](https://assets.st-note.com/img/1709390759398-wAVkD893Ov.png?width=800)
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回目はないことに注意
![](https://assets.st-note.com/img/1709466600065-O5YygV1RkU.png?width=800)
![](https://assets.st-note.com/img/1709466619428-2YLQzgU9ST.png?width=800)
![](https://assets.st-note.com/img/1685082348068-G0mnNacnlE.png?width=800)
![](https://assets.st-note.com/img/1709466681803-GvMSMBfrOz.png?width=800)
![](https://assets.st-note.com/img/1709466814349-ne4ja4YkmK.png?width=800)
【配列とは】
値を入れておく箱(変数)が複数くっついて、箱の数の分だけ値を入れておけるようになった「値を入れておく箱の集まり」
![](https://assets.st-note.com/img/1709467440137-ccQUOT0eOV.png)
〔配列の定義の仕方(作り方)〕
言語によって書き方が違うが、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文と一緒に使うことが多い。
つまり、
![](https://assets.st-note.com/img/1709466600065-O5YygV1RkU.png?width=800)
さっき書いたこのコードは、
numという箱(変数)に、0か1をいれ、それを、quizListという箱の列(配列)の最後尾に置いているイメージだね。これを10回繰り返しているよ。
【TRY】 配列の数字を元に、OXの画像を表示しよう
赤い部分はスクショ通りに書いて、黄色の部分のコードは自分で考えてみよう
![](https://assets.st-note.com/img/1709468898095-lYezvIY8Rk.png?width=800)
黄色の部分で使うコードは
・For文
・If文
・画像の変更コード
だよ。
配列の中身のデータを取得する方法は、
quizList[2] で2番目のデータを取得するんだったね。
つまり、
iが0から9までの10回ループしている中で、
もし、image_◻︎のidを持つ画像を、i番目の配列のデータが0だったら、Oの画像を、そうでなかったらXの画像に変更するようにすればいい。
画像の変更の仕方がわからない場合は、前回のテキストを確認しよう。
【解答】 配列の数字を元に、OXの画像を表示しよう
![](https://assets.st-note.com/img/1709469592508-lMwqUYTqv2.png?width=800)
![](https://assets.st-note.com/img/1685082348068-G0mnNacnlE.png?width=800)
![](https://assets.st-note.com/img/1709469670988-zOBnwydt9s.png?width=800)
5. 正解不正解の判定をしよう
![](https://assets.st-note.com/img/1709469852387-97wnSwkOAa.png?width=800)
![](https://assets.st-note.com/img/1709470293317-HiQ8yTCIBq.png?width=800)
少し難しいので、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関数を改めて呼んでいる。
![](https://assets.st-note.com/img/1685082348068-G0mnNacnlE.png?width=800)
![](https://assets.st-note.com/img/1709470758494-1zJ05BN3SK.png?width=800)
【変数の効果範囲について】
今回のコードで、numという名前の変数をたくさん使っている。しかし、通常は同じ名前の変数を複数使うことはできない。
しかし、変数には効果範囲があって、変数を定義(let 変数名 = OO;)したときの場所によって変わる。
変数をfunction(関数)外で定義したら、その変数は全ての場所で使える。
また、変数をfunctionやfor/if文などの内で定義した場合は、その変数はそのfunctionやfor/if文の中でしか呼び出したり変更したりできない。
{}で囲まれている中で定義すると、その{}を超えては使えないとイメージするといい。
だから、同じ名前の変数が複数回使えるんだね。
6. タイマーを実装しよう
次に、タイマー機能を作っていこう。
![](https://assets.st-note.com/img/1709471304058-LSHUdQxmuF.png?width=800)
![](https://assets.st-note.com/img/1709472585950-iLARaBDDme.png?width=800)
![](https://assets.st-note.com/img/1685082348068-G0mnNacnlE.png?width=800)
![](https://assets.st-note.com/img/1709472033639-lWx4NeEyRH.png?width=800)
![](https://assets.st-note.com/img/1709472631014-wYcpF6Z8EL.png?width=800)
フラグ変数(true, falseの変数)がよく使われている。!がnotの意味であることを注意しながら、どうして使われているのか自分で理解しよう。
7.正解不正解のカウントをしよう
次に正解不正解の回数・正答率を表示できるようにしていく。
正解数と不正回数を記録する変数を作る。
![](https://assets.st-note.com/img/1709472839250-j2uwKPTdD7.png)
不正解の時は、incorrectCountを1増やす。
![](https://assets.st-note.com/img/1709472906752-N4GJAlVMbd.png?width=800)
正解の時もcorrectCountを1増やして、タイマーが終わった時に結果を表示するshowResult関数を呼ぶよ。
![](https://assets.st-note.com/img/1709473004981-Qm1kleAK31.png?width=800)
正答率などをあらかじめ計算してから、表示するよ。
![](https://assets.st-note.com/img/1709473049479-Dh0IIidMOy.png?width=800)
![](https://assets.st-note.com/img/1685082348068-G0mnNacnlE.png?width=800)
![](https://assets.st-note.com/img/1709473096587-JPojSXy4Yy.png?width=800)
8. ゲームリセットできるようにしよう
ここまでお疲れ様でした。あとはリセットできるようにしよう。
![](https://assets.st-note.com/img/1709473370603-5hAVy83y1S.png)
location.reload();
でサイトをリロードすることができるよ。
つまり、リセットボタンが押されたら、サイトがリロードされるということだね。
![](https://assets.st-note.com/img/1685082348068-G0mnNacnlE.png?width=800)
![](https://assets.st-note.com/img/1709473450266-oiB7Np2ORJ.png?width=800)
あれ、ボタンを押してもリセットされないね。
【TRY】バグを修正しよう
プログラムをきちんと書いたのに動かないことをバグというよ。そして、バグを治すことをデバッグという。
バグには、スペルミスや元々のコードが間違っていたり、そもそもコードが足りていないことがあるよ。
今回は、コードが一部足りてないのが動かない原因だね。index.html, style.css, main.jsのどれかのファイルで1行もしくは一部追加して、リセットボタンを動くようにしよう。
※できるだけ、解答を見ずにやってみよう。
【解答】バグを修正しよう
![](https://assets.st-note.com/img/1709473710384-xR9gIKurEs.png?width=800)
![](https://assets.st-note.com/img/1685082348068-G0mnNacnlE.png?width=800)
![](https://assets.st-note.com/img/1709473926880-tmTHvt2ixy.png?width=800)
今回は、関数(function)は準備して、関数の中身も書いていたけど、ボタンと関数を繋いでいなかったのが原因だね。
9. デザインの仕上げをしよう
最後に、CSSを少し追加しよう。
![](https://assets.st-note.com/img/1709474209332-nn0XUcic26.png)
![](https://assets.st-note.com/img/1685082348068-G0mnNacnlE.png?width=800)
![](https://assets.st-note.com/img/1709474254497-x15hsrcwgd.png?width=800)
hoverとは、要素の上にマウスが乗っかっている状態のことをいう。
【hoverの書き方】
button1というidのhoverを書くときは、
#button1:hover {
変更したい内容
}
のように書くよ。idだけでなく、classやtag名などでも同様にできる。
また、hoverの中で書くのは、変更したい項目だけでいいので、文字色を変えない場合なのは、文字色などの指定はここではしなくていい。
:hoverがない方で指定しよう。
10. 完成
![](https://assets.st-note.com/img/1709474749455-EXsx1js6xS.png?width=800)
![](https://assets.st-note.com/img/1709474788210-F6MIc4qL94.png?width=800)
これで完成です。
お疲れ様でした。
11. 解答データ
① 以下のURLにアクセス
https://drive.google.com/drive/folders/1wDrp4Dlu_QsNMby2Sg5jcyvEcbvCGBD4?usp=drive_link
② OXゲーム 解答.zip をダウンロード
12. 次回予告
次回を何にするかはまだ決めていません。
お楽しみに。
coming soon…