はじめてみよう。プログラミング！JavaScript！ - 数当てゲーム(表示画面)

2020年8月31日 20:28

数字を当てるゲームを作ります。

数字を予想する単純なゲームを作って欲しい。ランダムな 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>

全体像です。

<!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のコードを書いていきます。

この記事が気に入ったらサポートをしてみませんか？