乱数でダミー

乱数を使用すると、興味深いHTML5ゲームを作成できます。 HTML、CSS、およびJavaScriptを一緒に使用する単純なゲームを見てみましょう。このゲームには数多くの面白い機能があります：

Webページをインターフェースとして使用します。 多くのJavaScriptプログラムと同様、Webページはユーザーインターフェイスとして使用されます。入力には入力要素が使用され、divにはメイン出力要素が、ボタンではすべての操作がトリガーされます。
<！ - 1 - >
CSSをスタイリングに使用します。 ページのさまざまな部分がCSSでフォーマットされています。 CSSは、利便性と再利用性のために外部スタイルシートに格納されています。
これは、彼女が取った回数をユーザーに伝えます。 各パスで、コンピュータは、何回のターンが起こったかをユーザに思い出させる。
ユーザーが正しく推測すると、[再起動]ボタンが表示されます。 このボタンは最初は非表示になっており、必要なときにのみ表示されます。
<！ - 2 - >
正しい答えは、特別なデバッグ機能を使用してプログラマーが利用できます。 プログラムをテストしている間、開発者は正解が何であるかを見ることができますが、この情報はユーザーには表示されません。
init（） 関数がゲームを開始します。 init（）関数はゲームを初期化します。これは、プログラムが最初に開始されたときに呼び出され、ユーザーが最初からやり直したいときに呼び出されます。
- >
ボタンに別の機能が追加されています。ユーザーがCheck Your Guessボタンをクリックすると、現在のユーザーの推測が正しい回答と比較され、ヒントがユーザーに返されます。ゲームプログラムのデザイン方法

複雑なプログラムを作成するときは、まず設計計画を立てなければなりません。

ゲーム開発の作業の多くは、プログラミングを始める前に行われます。ゲームをうまく設計すれば、プログラミングははるかに簡単です。ゲームデザインは、コード作成を始める前にゲームに関する多くのことを理解するのに役立ちます。

一般的なレイアウト：

レイアウトはこの図で完全には決定されませんが、一般的な外観を見るのは簡単です。 名前付き要素：
名前を必要とするすべての要素が決定され、名前が文書に書き込まれます。いくつかの要素（最初のボタンのような）はコードで参照されないので、名前は必要ありません。ボタンの機能：
各ボタンは機能を呼び出します。この図は、各ボタンがどの機能を呼び出すかを示しています。 機能計画：
すべての機能は、機能が何をするのかを英語で記述して計画されています。 グローバル変数：
関数間で共有する必要がある変数について説明します。 実際には良いデザインドキュメントを作成するのは難しいですが、そうすることでプログラミングがかなり簡単になります。あなたがしようとしていることを理解するのは難しいですし、それをやる方法も分かりません。設計文書を作成すると、これらの2つのプロセスが分かれ、最初に

何をやっているのかを把握してから、あなたはどのようにそれを行うのか心配します。ゲームのHTMLを構築する方法数を推測するゲームのHTMLコードは、まずゲームを紙の上にデザインしておけば簡単に書くことができます。数字推測者

数字推測者

0から100までの数字を考えています。自分の数字を推測すると、あなたが高すぎるか、低すぎるか、正しいかを教えてくれます。あなたの推測はあなたの推測を再度確認してください。

HTML、CSS、およびJavaScriptを分離することは良いことです。これにより、大きな問題をいくつかの小さな問題に「分割して克服する」ことができます。 HTMLドキュメントの主な機能は次のとおりです。

外部ファイルのCSSへのリンク。
現時点では、CSSは重要ではないので、後で作業できるように別のファイルに移動してください。

JavaScriptコードをアウトソースします。

JavaScriptコードを外部ファイルに移動して、まだ心配する必要はありません。 HTMLコードでは、単に外部ファイルへのリンクを作成します。

フォームをページの主なコンポーネントとして構築します。
このページの最も重要な側面はフォームです。ほとんどのフォームと同様に、フィールドセット、ラベル、入力要素、およびボタンがあります。

出力用のdivを作成します。
出力divは単なるdivです。フィールドセット内に配置すると、残りのフォームへの視覚的なリンクが維持されます。 div内にデフォルトのテキストを置くことができます（ただし、おそらくこのテキストは後で変更されます）。 divはコードで参照されるため、id属性が必要です。

ユーザーの推測の入力領域を作成します。
ユーザーは何らかの種類の数値入力を入力する必要があります。この目的のためにinput要素を使います。この要素のIDを覚えていることは、ドキュメントを参照してください。（あなたは

設計文書を作成しましたか？
）入力にラベルを追加して、そこに期待されることが分かるようにしてください。

推測を確認するためのボタンを作成します。ユーザーは、「あなたの推測を確認」ボタンをクリックするまで、推測をコミットしません。だから、あなたは本当にそのようなボタンを持っている必要があります。このボタンには名前は必要ありませんが、checkGuess（）関数が呼び出されます。 2番目のボタンを作成してもう一度開始します。
このプログラムの興味深い特徴の1つは、ユーザーが再起動できるボタンです。この2番目のボタンは、ユーザーが正しく回答を推測した場合にのみ使用できます。通常のHTMLで作成し、CSSとJavaScriptのトリックを使用して消滅させ、オンデマンドで表示させます。