見出し画像

【WEBアプリ】 宝探しゲーム

てと

第４回は、宝さがしゲームを作っていきます。

今回は、９つある宝箱の中から、宝を探すシンプルなゲームです。



1. 初期データのダウンロード

① 以下のURLにアクセス
https://drive.google.com/drive/folders/1wQWVKcuBR-7fiVac7ZzEKbkcjnEPcYC8?usp=sharing
② 宝探しゲーム　教材.zip　をダウンロード
③ ダウンロードにあるZipファイルを解凍。

【Zipファイルの解凍方法】
Macの場合、Zipファイルをダブルクリック
Windows の場合、わからない場合は、以下のサイトを見る


④

の「基本的なはじめ方」を参考に準備する。


2. 表の作成

①1x1の表を作成

index.html


chromeで開くときは、index.htmlのファイルをひらこう

実行結果（宝箱の写真が表示される）


②宝箱の画像サイズを変更

css/style.css
実行結果（宝箱のサイズが小さくなる）


③3x3の表に拡張

index.html
実行結果（３×３の表になる）

【table / tr / tdタグとは】
<table>
     <tr>
          <td> [表の中身] </td>
          <td> [表の中身] </td>
     </tr>
     <tr>
          <td> [表の中身] </td>
          <td> [表の中身] </td>
     </tr>
</table>
と表す。
tableタグは、全体の表のこと、
trタグは列、
tdタグは列の中のひつ一つの四角（セル）のことを表している。

イメージは以下の通り

表のイメージ

3. 宝箱のクリックを検出しよう

①クリックされたら、consoleを表示

index.html
js/main.js
実行結果（左上の宝箱をクリックするとconsoleが出る）


② どの箱をクリックされたかわかるように

index.html
js/main.js

【引数とは】
通常は、testという関数を呼ぶ時は、
main.jsで、test(); もしくはボタンなどに、onclick="test()"
と付ける。
そして、
main.jsで、
function test(){
     内容…
}
と書く。

しかし、例えば、1-100までの数字が書かれたボタンが100個ありそれぞれのボタンが押されると、その数字をalertしたいとき、functionを100個作るのはめんどくさい。

そこで、functionを呼び出す時に、ある程度の情報（今回で言うとボタンに書かれた数字）を一緒に渡せるようにするのが引数。

今回の場合、onclick="openBox(0)"というのは、openBoxという関数を呼ぶときに、0という数字を一緒に渡していることを示す。この()の中にある数字は、numという変数（通常はletを用いて初期定義する）に保存されるイメージだ。

実行結果（上の段の宝箱ごとにクリックするとconsoleが出る）


③ 全ての宝箱で動くようにする

index.html
実行結果（どの宝箱をクリックしてもconsoleが出る）


4. 当たりの宝箱

【TRY】　0から9までのランダムな整数を、atari0 とatari1に入れよう。

js/main.js

※できるだけ、解答を見ずにやってみよう。







【解答】　0から9までのランダムな整数を、atari0 とatari1に入れよう。


js/main.js
index.html
実行結果（ランダムな当たりがconsoleに表示される）


【onload】
onloadとは、画面が読み込まれた時（リロードされたタイミング）で関数を呼ぶことを示す。

onclickはクリックするたびに呼ばれるが、onloadは最初に1回だけ呼ばれ、その後リロードしない限り関数は呼ばれない。

② あたった場合にアラートを表示

js/main.js


実行結果（当たりの宝箱をクリックするとアラートが出る）

【「かつ」と「または」】
if文を使用するとき、「numberは10より大きい」という条件と「numberは5より小さい」という条件の２つがあった時、

二つの条件の両方を満たすこと（「かつ」）を
if (number > 10 && number < 5){..
と表す。

また、二つの条件のいずれか片方を満たすこと（「または」）を
if (number > 10 || number < 5){..
と表す。

また、これらは、
if (number > 10 || number < 5 || number != 3){..
など３個以上の条件で使用することもでき、

if (条件A && (条件B || 条件C)){…
意味：条件Aを満たして、かつ、条件BかCのいずれかを満たす。

のように、()を用いて優先を決めることもできる。

③当たりの時に、お宝の画像を表示

index.html
index.html
js/main.js
実行結果（当たりの宝箱を引くと、画像が変わる）

【画像の変更　.src = 】
画像の場所を指定するとき、HTML上で、
<img src="img/apple.png" id="food_img"> 
と表すが、ボタンを押した時に、その画像を変更したい時などに、

document.getElementedById("その画像のID名").src = "新しい画像の場所";
例：document.getElementedById("food_img").src = "img/orange.png";

と書くことによって違う画像に変更することができる。

5. ハズレの宝箱

① 当たりでない時に、空の宝箱の画像を表示しよう

js/main.js
実行結果（外れた時に、空の宝箱が表示される）

【条件分岐】
もし、条件Aなら、実行Aする、そうでなく、条件Bなら、実行Bする、どれもない時は、実行Cするというコードを、

if (条件A){
　実行A
}else if (条件B){
　実行B
}else{
　実行C
}

と書く。

途中に、else if がなくてもelseを使うことができる。


6. 宝箱を開けられる回数に上限をつけよう


① 残りの回数の文字を作成

index.html
実行結果（残りの引ける回数が表示される。まだ、数字は変わらない。）


② 残り回数が変わるようにする

js/main.js



【TRY】 残り回数を表示しよう

ユーザーは宝箱を開けるチャンスが2回あるようにしよう。
宝箱がクリックされたときに、

1. openNumを１減らす
2. nokoriCountNumのidを持つテキストをopenNumに変更する

※できるだけ、解答を見ずにやってみよう。

わからなかった、初回のテキストを参考にしてみよう。












【解答】 残り回数を表示しよう

js/main.js
実行結果（宝箱をクリックするとカウントが減る）


③ 残りの回数が0未満にならないようにしよう

js/main.js
実行結果（カウントが0未満にならない）



7. 成功画面へ移動（遷移）

WEBサイトやアプリなどで、別のページに移動することを、

別のページに「遷移」する。

というよ。覚えておこう。


① 開けてから1秒後に、成功画面に行くようにしよう

js/main.js
js/main.js
実行結果（1秒たったら真っ白のページに飛ばされる。）


今回はsetIntervalではなく、setTimeoutを使っている。

【setIntervalとは】

setInterval(〇〇〇, ××);
もしくは
setInterval("〇〇〇()", ××);

と書いて、関数〇〇〇()を××ミリ秒ごとに呼び出すことを意味する。

ミリ秒…1/1000秒のこと。

【setTimeoutとは】

setTimeout(〇〇〇, ××);
もしくは
setTimeout("〇〇〇()", ××);

と書いて、関数〇〇〇()を××ミリ秒後に1回だけ呼び出すことを意味する。

ミリ秒…1/1000秒のこと。

つまり、違いは、1回だけ呼ばれるか、定期的にずっと呼ばれ続けるかである。

【画面遷移】

プログラミングでは、ユーザーが見える画面を移動されることを画面を遷移するという。
　
普段はindex.htmlを開いているが、今回のように、sucsess.htmlに画面を遷移させたい時、

location.href = "遷移させたいhtml";

と書く。


② 成功画面を作っていこう

作りたい成功画面



sucsess.html
実行結果

③ リトライボタンを押したら、戻るようにしよう。


sucsess.html


js/main.js
実行結果（リトライを押すと、元の画面に戻る）



8. 失敗画面への遷移（移動）

① 当たりが出たかどうか判定しよう


ここでは、前回使った、フラグ変数を使うよ。

フラグ変数とは

false (「偽」という意味)、true (「真実」という意味)　のどちらかで常に表される。

例えば、「成人しているか、いないか」「好きかどうか」など、「はい」か「いいえ」で答えられる項目を保存しておくのに使う。

わからない人は、前回のテキストを振り返ろう。


js/main.js
js/main.js
js/main.js
実行結果（失敗して実行すると、白いページに飛ぶ）

② 失敗ページを作ろう

failure.html
実行結果（残念でしたと表示される）



③ 結果ページへの遷移は、２回終わってからのみにしよう


js/main.js
実行結果（２回目が終わってから1秒立つと、自動でページが移動する）


9. デザインを調整していこう


① 画面全体の背景色を入れよう

css/style.css
実行結果（背景色が変わる）



【TRY】　デザインを調整しよう


「残り◯回」の文字

・文字色 white
・上の余白30px
・文字の大きさ 30px

残り「２」回の数字

・文字の大きさ50px

リセットボタン

・横幅200px
・縦幅70px
・文字の大きさ22px
・文字の色 black
・背景色 white
・枠線なし　


「枠線なし」は以下のように書くよ。

border: none;

※できるだけ、解答を見ずにやってみよう。










【解答】　デザインを調整しよう

css/style.css
実行結果（失敗ページ）
実行結果（index.html）
実行結果（成功ページ）




② 表を中央に寄せよう

css/style.css
実行結果（中央によるよ）


表を中央に寄せる方法
左右のmargin(余白)を両方ともautoにすると、真ん中によるよ。

【marginの設定方法】


margin-top: 10px; （上の余白）
margin-bottom: 10px; （下の余白）
margin-right: 10px; （右の余白）
margin-left: 10px; （左の余白）

margin: 20px 40px;　（上下の余白が20px + 左右の余白が40px）

margin: 20px 40px 30px;　
（上の余白が20px + 左右の余白が40px + 下の余白が30px）

margin: 20px 40px 30px 10px;　
上の余白が20px + 右の余白が40px + 下の余白が30px + 左の余白が10px 


10. 完成

実行結果（完成）

これで完成です。
お疲れ様でした。


11. 解答データ

① 以下のURLにアクセス

https://drive.google.com/drive/folders/1BVQqkWrx4nIhZA8WTFfHLWgX2JjgJ2CY?usp=sharing

② 宝探しゲーム　解答.zip をダウンロード


12. 次回予告

次回は、OXゲームを作成します。
お楽しみに。

OXゲーム