はじめてみよう。プログラミング！JavaScript！ - 数当てゲーム(表示画面)
数字を当てるゲームを作ります。
数字を予想する単純なゲームを作って欲しい。ランダムな 1 から 100 の数字を決めて、プレイヤーに 10 回以内に当ててもらうゲームだ。プレイヤーには予想する都度、正解か間違いかを表示する。もしプレイヤーが間違っていれば、プレイヤーが予想した数字に応じて、大きすぎるか小さすぎるかを表示する。また、プレイヤーの前回の予想がどうだったかも表示する。ゲームはプレイヤーの予想が正しかった場合、もしくは回数の上限に達した場合に終了する。ゲームが終了したら、プレイヤーはもう一度プレイ開始できるようにする。
考え方として
1. 1 から 100 までの数字をランダムに一つ生成する。
2. プレイヤーの予想した回数を記録する。最初は 1 回から。3. プレイヤーが数字が何かを予想する方法を用意する。
4. 予想が入力されたら、プレイヤーが以前の予想を見られるように、どこかに記録する。
5. 入力された数字が正しいかどうかを調べる。
6. 入力された数字が正しい場合...
1. 正解したお祝いのメッセージを表示する。
2. プレイヤーが次の予想を出来ないようにする。(ゲームがおかしくならないように)
3. プレイヤーが次のゲームを始められるようなコントロールを表示する。
7. プレイヤーの予想が間違いで、予想回数の上限にはまだ達していない場合...
1. プレイヤーが間違っていることを表示する。
2. 次の予想を入力できるようにする。
3. 予想回数に 1 を加算する。
8. プレイヤーの予想が間違いで、予想回数の上限に達した場合...
1. プレイヤーにゲームオーバーであることを伝える。
2. プレイヤーが次の予想を出来ないようにする。(ゲームがおかしくならないように)
3. プレイヤーが次のゲームを始められるようなコントロールを表示する。
9. ゲームがもう一度始まったら、画面とロジックが完全にリセットされるようにして、1.に戻る。
考え方を整理しました。ここで表示部分を作ります。HTMLで作ります。HTMLの基本は
JSBinを使います。HTMLの部分です。
表記してある部分に<body></body>の間に下記を入れてブラウザでみると
<h1>数字当てゲーム</h1>
<p>1 から 100 までの数字を当ててみて！10 回以内に当てられるでしょうか。選んだ数字が大きいか小さいかを表示します。</p>
<div class="form">
<label for="guessField">数字を入力してください: </label><input type="text" id="guessField" class="guessField">
<input type="submit" value="予想を入力" class="guessSubmit">
</div>
<div class="resultParas">
<p class="guesses"></p>
<p class="lastResult"></p>
<p class="lowOrHi"></p>
</div>
と表示されました。基本の部分はできました。そしてプログラムの中心は
<script>
// JavaScript をここに書きます
</script>
<script></script>で挟まれたところに書いていきます。
全体像です。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Number guessing game</title>
</head>
<body>
<h1>数字当てゲーム</h1>
<p>1 から 100 までの数字を当ててみて！10 回以内に当てられるでしょうか。選んだ数字が大きいか小さいかを表示します。</p>
<div class="form">
<label for="guessField">数字を入力してください: </label><input type="text" id="guessField" class="guessField">
<input type="submit" value="予想を入力" class="guessSubmit">
</div>
<div class="resultParas">
<p class="guesses"></p>
<p class="lastResult"></p>
<p class="lowOrHi"></p>
</div>
<script>
// JavaScript はここに書きます。
</script>
</body>
</html>今回はJSBinを使うので、
JSBinの真ん中のスペースがJavaScriptの部分です。次回のこJavaScriptのコードを書いていきます。