Komentar: Ini adalah permainan ping-pong dengan 2 pemain menggunakan kompetisi keyboard; Dalam bab ini kita akan: 1. Mempersiapkan Alat Pengembangan 2. Bangun game pertama kami - Ping Pong 3. Belajar menggunakan pustaka javascript jQuery untuk posisi dasar 4. Dapatkan input keyboard
Dalam bab ini kita akan:
Siapkan alat pengembangan
Bangun game pertama kami - ping pong
Belajar menggunakan perpustakaan jquery javascript untuk posisi dasar
Dapatkan input keyboard
Membuat permainan ping pong dengan mencetak
Tangkapan tangkapan layar berikut adalah hasil penelitian kami di bab ini. Ini adalah permainan ping pong dengan 2 pemain bermain di keyboard.
Jadi, mari kita mulai membuat game kita sekarang.
Bersiaplah untuk Lingkungan Pengembangan
Pengembangan game HTML5 dan pengembangan situs web serupa. Kami membutuhkan browser web dan alat pengeditan teks yang sangat baik.
Banyak alat pengeditan teks sangat baik, gunakan saja apa yang Anda suka. Jika Anda tidak memilikinya, saya sarankan Anda menggunakan Notepad ++, alat pengeditan kecil dan cepat. Mengenai browser, kami memerlukan browser yang mendukung fitur HTML5, CSS3 dan dapat disediakan dengan alat debugging.
Ada beberapa browser untuk dipilih: Apple Safari (), Google Chrome (), Mozilla Firefox (), dan Opera (), yang semuanya mendukung fitur yang kita butuhkan.
Siapkan dokumen HTML
Setiap situs web, halaman, dan game HTML5 dimulai dengan dokumen HTML default. Dan dokumen HTML ini dimulai dengan kode HTML dasar. Kami juga akan memulai pengembangan game HTML5 kami dengan Index.html.
Waktu aksi
Kami akan membuat game HTML5 Ping Pong kami dari awal. Sepertinya kita harus mempersiapkan semuanya sendiri, dan untungnya setidaknya kita dapat membantu kita dengan perpustakaan Javascript. JQuery adalah perpustakaan JavaScript kami akan menggunakannya di semua contoh kami. Ini akan membantu menyederhanakan logika JavaScript kami:
1. Buat folder baru bernama Pingpong
2. Buat folder lain yang disebut JS di folder
3. Unduh jQuery.
4. Pilih Produksi dan klik DownloadJQuery.
5. Simpan jQuery-1.7.1.min.js di folder yang kami buat 2
6. Buat file baru bernama index.html dan simpan ke folder yang dibuat oleh 1.
7. Buka file index.html dengan editor teks dan masukkan template html kosong:
<! Doctype html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title> ping pong </iteme>
</head>
<body>
<Header>
<h1> ping pong </h1>
</teader>
<footer>
Ini adalah contoh membuat game ping pong.
</footer>
</body>
</html>
8. Lihat file jQuery sebelum tag ujung tubuh
<Script src = js/jQuery-1.7.1.min.js> </script>
9. Akhirnya, kami ingin memastikan bahwa jQuery berhasil dimuat. Kami biasanya menempatkan kode berikut untuk memeriksa setelah file jQuery sebelum tag akhir tubuh:
<script>
$ (function () {
waspada (selamat datang di pertempuran ping pong.);
});
</script>
10. Simpan index.html dan buka dengan browser Anda. Kita harus melihat jendela prompt berikut. Ini berarti bahwa jQuery kami diatur dengan benar:
Apa yang terjadi?
Kami baru saja membuat halaman HTML5 dasar dengan jQuery dan memastikan jQuery dimuat dengan benar.
DOCTYPE HTML5 BARU
Baik tag Doctype dan Meta disederhanakan dalam HTML5.
Di HTML4.01, kami menyatakan bahwa Doctype memerlukan kode berikut:
<! Doctype html public "-// w3c // dtd html 4.01 // en" "http://www.w3.org/tr/html4/strict.dtd">
Itu panjang, kan? Namun, dalam HTML5, deklarasi Doctyp jauh lebih sederhana:
<! Doctype html>
Kami bahkan belum menyatakan versi HTML, yang berarti bahwa HTML5 akan kompatibel dengan versi HTML sebelumnya dan versi HTML di masa depan juga akan mendukung versi HTML5.
Tag meta juga telah disederhanakan. Kami sekarang menggunakan kode berikut untuk menentukan set karakter HTML:
<Meta Charset = UTF-8>