コメント：キーボードコンペティションを使用している2人のプレイヤーがいるPing-Pongゲームです。この章では、1。開発ツールを準備する2。最初のゲームを構築する-PingPong3。JqueryJavascriptライブラリを基本的な位置決めに使用することを学ぶ4。キーボード入力を取得する
この章では、次のようになります。
開発ツールを準備します
最初のゲーム - ピンポンを構築します
基本的なポジショニングのためにjquery javascriptライブラリを使用することを学びます
キーボード入力を取得します
スコアリングでPing Pongゲームを作成します
この章では、ゲームの次のスクリーンショットが私たちの研究の結果です。これは、キーボードで2人のプレイヤーが再生されるPing Pongゲームです。
それでは、今すぐゲームの作成を開始しましょう。
開発環境に備えます
HTML5ゲーム開発とウェブサイトの開発は似ています。 Webブラウザーと優れたテキスト編集ツールが必要です。
多くのテキスト編集ツールは優れており、好きなものを使用してください。持っていない場合は、小規模で高速な編集ツールであるNotepad ++を使用することをお勧めします。ブラウザに関しては、HTML5、CSS3機能をサポートし、デバッグツールを提供できるブラウザが必要です。
Apple Safari（）、Google Chrome（）、Mozilla firefox（）、およびOpera（）から選択できるブラウザはいくつかあります。これらはすべて、必要な機能をサポートしています。
HTMLドキュメントを準備します
すべてのWebサイト、ページ、およびHTML5ゲームは、デフォルトのHTMLドキュメントから始まります。また、このHTMLドキュメントは、基本的なHTMLコードから始まります。また、index.htmlでHTML5ゲーム開発を開始します。
アクション時間
HTML5 Ping Pongゲームをゼロから作成します。私たちは自分ですべてを準備しなければならないように聞こえます。幸いなことに、少なくともJavaScriptライブラリで私たちを助けることができました。 jQueryはそのようなJavaScriptライブラリであり、すべての例で使用します。これは、JavaScriptのロジックを簡素化するのに役立ちます。
1. Pingpongという新しいフォルダーを作成します
2。フォルダーにJSという別のフォルダーを作成します
3。JQUERYをダウンロードします。
4. [制作]を選択し、[downloadjquery]をクリックします。
5. jquery-1.7.1.min.jsを保存します
6. index.htmlという名前の新しいファイルを作成し、1で作成されたフォルダーに保存します。
7.テキストエディターを使用してindex.htmlファイルを開き、空のHTMLテンプレートを挿入します。
<！doctype html>
<html lang = "en">
<head>
<メタcharset = "utf-8">
<title> ping pong </title>
</head>
<body>
<ヘッダー>
<h1> ping pong </h1>
</header>
<フッター>
これは、Ping Pongゲームを作成する例です。
</footer>
</body>
</html>
8。ボディエンドタグの前にjQueryファイルを参照してください
<スクリプトSRC = JS/jQuery-1.7.1.min.js> </scrip>
9。最後に、jQueryが正常にロードされていることを確認したいと考えています。通常、ボディエンドタグの前にjQueryファイルの後に確認するために次のコードを配置します。
<スクリプト>
$（function（）{
アラート（ピンポンバトルへようこそ。）;
}）;
</script>
10。index.htmlを保存し、ブラウザで開きます。次のプロンプトウィンドウが表示されます。これは、jQueryが正しく設定されていることを意味します。
どうしたの？
jQueryを使用して基本的なHTML5ページを作成したばかりで、jQueryが正しくロードされていることを確認しました。
新しいHTML5 Doctype
DoctypeとMetaタグの両方がHTML5で簡素化されています。
HTML4.01では、Doctypeには次のコードが必要であると宣言します。
<！doctype html public " - // w3c // dtd html 4.01 // en" "http://www.w3.org/tr/html4/strict.dtd">
長いですよね？ただし、HTML5では、DoctYP宣言ははるかに簡単です。
<！doctype html>
HTMLバージョンも宣言していません。つまり、HTML5は以前のHTMLバージョンと互換性があり、将来のHTMLバージョンもHTML5バージョンもサポートします。
メタタグも簡素化されています。次のコードを使用して、HTML文字セットを定義します。
<メタcharset = utf-8>