![](emozi_all/dragon.png)
この課題には制限時間があるため、ドラゴンクエストのような遊びやすくスマホ対応の大規模なアプリを作ることは難しいでしょう。代わりに、簡単な数当てゲームを作ってみましょう。
HTMLファイル
数当てゲーム
1〜100の数字を当てよう!
5回まで挑戦できます。
このHTMLファイルは、数当てゲームを実装し、スタイルを設定しています。フォントにはGoogle FontsからNoto Sans JPを使っています。背景色は#f5f5f5、ボタンの色は#2ecc71になっています。
JavaScriptの実装
このJavaScriptコードは、ゲームのロジックです。`start()`関数は、新しいゲームを始めるときに呼び出されます。`Math.random()`を使って1〜100のランダムな数字を生成し、`answer`変数に代入します。また、`chance`変数には残りの挑戦回数5を代入します。`result`要素を空にし、`btnStart`ボタンを無効にして、`inputNumber`要素を有効にします。
`guess()`関数は、入力された数字をチェックして、正解かどうかを判断します。まず、1〜100の範囲外や数字でない場合はエラーメッセージを表示して、戻ります。次に、`chance`変数を減らします。もし入力された数字が正解なら、`result`要素に「正解!」と表示して、`btnStart`ボタンを有効にし、`inputNumber`要素を無効にします。そうでない場合、`chance`変数が0になるまで挑戦が続くので、残り回数を表示します。最後に、`inputNumber`要素を空にして、フォーカスを当てます。
`inputNumber`要素では、Enterキーを押すことで`guess()`関数を呼び出すように設定しています。
これで、数当てゲームが完成しました。スマホで操作する場合は、縦画面に最適化されているため、横画面ではレイアウトが崩れる可能性があります。また、`alertHisa()`関数を使わないで、`result`要素にメッセージを表示しています。絵文字は使っていませんが、背景色やボタンの色が目立つように設定しました。