Komentar: Makan Ular, Fungsi Utama: 1. Pergerakan ular 2. Ubah arah ular 3. Tempatkan makanan 4. Tingkatkan pengorbanan diri 5. Cara menggantungnya, implementasi spesifiknya adalah sebagai berikut. Ini sederhana dan praktis dalam 60 baris. Teman yang tertarik dapat merujuknya. Saya harap ini akan membantu semua orang.
Saya jarang memperhatikan HTML5 di masa lalu. Saya merasa bahwa memilih HTML secara bertahap menjadi tren, jadi saya ingin mengetahuinya. Saya menemukan permainan untuk mempelajarinya. Setelah menulis game ini, saya merasa bahwa HTML5 dan JS sangat terintegrasi, jika JS tidak terlalu baik. Saya kira saya perlu mengambil les JS terlebih dahulu. Ini hanya saran pribadi saya dan mungkin tidak akurat. Hal lain adalah bahwa Anda harus sangat jelas tentang pemikiran dan logika Anda, jika tidak menulis game mungkin menyakitkan.Fungsi utama ular serakah: 1. Ular bergerak 2. Ubah arah ular 3. Tempatkan makanan 4. Tingkatkan pengorbanan 5. Cara menggantungnya.
Pertama kali saya menulis game, pertama kali saya menulis html5, rasanya sangat sulit. Saya sudah selesai menulis dan saya akan membaginya dengan Anda. Komunikasi satu sama lain ... jika Anda tidak mengerti atau memiliki saran, silakan tinggalkan saya pesan. . . Kode ini sangat singkat, hanya 60 baris.
Tapi ini adalah produk yang setengah jadi, dan selesai. Perbarui lagi
<! Doctype html>
<Html>
<body>
<Canvas> </an Canvas>
<type skrip = "Teks/JavaScript">
var c = document.geteLementById ("myCanvas");
var waktu = 160; // kecepatan ular
var cxt = c.getContext ("2d");
var x = y = 8;
var a = 0; // koordinat makanan
var t = 20; // Korbankan hidup Anda
var peta = []; // Rekam jalan setapak ular
ukuran var = 8; // Ukuran Unit Tubuh Ular
arah var = 2; // 1 naik 2 kanan 0 kiri 3 turun
interval = window.setInterval (set_game_speed, waktu); // Pindahkan ular
fungsi set_game_speed () {// pindahkan ular
switch (arah) {
Kasus 1: y = y-size; break;
Kasus 2: x = x+ukuran; break;
Kasus 0: x = x-size; break;
Kasus 3: y = y+ukuran; break;
}
if (x> 400 || y> 400 || x <0 || y <0) {
waspada ("Kamu mati, tetap bekerja keras! Alasan kegagalan: Aku memukul dinding ..."); window.location.reload ();
}
untuk (var i = 0; i <map.length; i ++) {
if (parseInt (peta [i] .x) == x && parseInt (peta [i] .y) == y) {
waspada ("Kamu sudah mati, tetap bekerja keras! Alasan kegagalan: aku menabrak diriku sendiri ..."); window.location.reload ();
}
}
if (map.length> t) {// pertahankan panjang pengorbanan Anda
var cl = map.shift (); // Hapus item pertama dari array dan kembalikan elemen asli
cxt.clearrect (cl ['x'], cl ['y'], ukuran, ukuran);
};
peta.push ({'x': x, 'y': y}); // Tambahkan data ke akhir array asli
cxt.fillstyle = "#006699"; // warna pengisian internal
cxt.strokestyle = "#006699"; // warna perbatasan
cxt.fillrect (x, y, ukuran, ukuran); // gambar persegi panjang
if ((a*8) == x && (a*8) == y) {// makan makanan
rand_frog (); t ++;
}
}
document.onkeydown = function (e) {// Ubah arah ular
VAR Code = E.KeyCode - 37;
sakelar (kode) {
Kasus 1: arah = 1; break; // on
Kasus 2: arah = 2; break; // kanan
Kasus 3: arah = 3; break; // selanjutnya
case 0: arah = 0; break; // kiri
}
}
// Tempatkan makanan secara acak
fungsi rand_frog () {
a = math.ceil (math.random ()*50);
cxt.fillstyle = "#00000"; // warna pengisian internal
cxt.strokestyle = "#00000"; // warna perbatasan
cxt.fillrect (a*8, a*8, 8, 8); // Gambar persegi panjang
}
// Tempatkan makanan secara acak
rand_frog ();
</script>
</body>
</html>