HTML5ゲーム開発 卓球ゲーム例(3)_html5チュートリアルスキル

jQuery の概要
[インターネット上にたくさんあるので、ここでは説明しません。分からないことがあればご連絡ください】
jQueryを使ってゲーム要素を操作します
jQueryでラケットを初期化しました。それでは、jQuery を使用してゲーム要素を配置する方法を実験してみましょう。
移動します - jQuery を使用して要素の位置を変更します
グリッドの背景を使用してゲーム内の要素の位置を確認しましょう :
1. 引き続き PingPong の例を使用してみましょう。 。
2. 必要なグリッドの背景画像をここからダウンロードします。
3. 演習ディレクトリに、images という名前のフォルダーを作成します。
4. ダウンロードした画像を jimages フォルダーに配置します。この画像は、後でピクセルの変位を確認するのに役立ちます。
5. 次に、エディタでindex.htmlを開きます。
6. ピクセルグリッド画像が含まれるように、プレイグラウンドDIVの背景属性を変更します。

コードをコピーします

コードは次のとおりです:

#playground{
背景: # e0ffe0 url(images/pixel_grid.jpg);
幅: 400px;
高さ: 200px;
オーバーフロー: 非表示; >
7. 次に、ブラウザでindex.htmlを開きます。次のスクリーンショットが表示されます。グリッドがゲームの背景にオーバーレイされ、すべての要素の位置が表示されます

何が起こったのですか?
デバッグを容易にするために、pixel_grid.jpg という画像を背景に配置しました。この画像には多数の小さなグリッドがあり、各 10x10 グリッドが大きな 100x100 ピクセル ブロックを形成します。この画像では、画面上の要素の位置を測定できるルーラーを持っています。