Pembangunan permainan Html5 Contoh permainan Ping Pong (3)_html5 kemahiran tutorial

Pengenalan kepada jQuery
[Saya tidak akan membahas bahagian ini, terdapat banyak di Internet. Jika anda tidak faham apa-apa, sila hubungi saya]
Gunakan jQuery untuk mengendalikan elemen permainan
Kami telah memulakan raket dengan jQuery. Sekarang mari kita lakukan eksperimen tentang cara menggunakan jQuery untuk meletakkan elemen permainan.
Alihkannya - gunakan jQuery untuk mengubah suai kedudukan elemen
Mari kita gunakan latar belakang grid untuk menyemak kedudukan elemen dalam permainan kami :
1 .
2. Muat turun imej latar belakang grid yang kami perlukan dari di sini.
3. Cipta folder bernama imej dalam direktori latihan.
4. Letakkan imej yang dimuat turun ke dalam folder jimages. Imej ini akan membantu kami menyemak anjakan piksel kemudian.
5. Seterusnya, buka index.html dalam editor
6 Ubah suai atribut latar belakang DIV taman permainan seperti berikut supaya ia mengandungi imej grid piksel.

Salin kod

Kodnya adalah seperti berikut:

#taman permainan{
latar belakang: # e0ffe0 url(images/pixel_grid.jpg);
lebar: 400px;
tinggi: 200px; >
7 Sekarang buka index.html dalam penyemak imbas, apa yang patut kita lihat ialah tangkapan skrin berikut: grid ditindankan pada latar belakang permainan, dan kini kita boleh melihat kedudukan semua elemen

Apa yang berlaku?

Untuk memudahkan penyahpepijatan, kami meletakkan imej yang dipanggil pixel_grid.jpg pada latar belakang. Imej ini mempunyai banyak grid kecil, dengan setiap grid 10x10 membentuk blok 100x100 piksel yang besar. Dengan imej ini, kami mempunyai pembaris yang membolehkan kami mengukur kedudukan elemen pada skrin.