Cara Membuat Game Ular Menggunakan HTML, CSS, dan JavaScript

Permainan ular adalah latihan pemrograman klasik yang dapat Anda gunakan untuk meningkatkan keterampilan pemrograman dan pemecahan masalah Anda. Anda dapat membuat game di browser web menggunakan HTML, CSS, dan JavaScript.

Di dalam gim, Anda mengontrol seekor ular yang bergerak di sekitar papan. Ukuran ular bertambah besar saat Anda mengumpulkan makanan. Permainan akan berakhir jika Anda bertabrakan dengan ekor Anda sendiri atau salah satu dinding.

Cara Membuat UI untuk Kanvas

Gunakan HTML dan CSS untuk menambahkan kanvas agar ular bisa bergerak. Ada banyak lainnya proyek HTML dan CSS Anda dapat berlatih, jika Anda perlu merevisi konsep dasar apa pun.

Anda dapat merujuk ke proyek ini repositori GitHub untuk kode sumber lengkap.

1. Buat file baru bernama "index.html".
2. Buka file menggunakan editor teks seperti Kode Visual atau Atom. Tambahkan struktur kode HTML dasar:

   html>
   <htmllang="en-AS">
   <kepala>
   <judul>Permainan Ularjudul>
   kepala>
   <tubuh>
   tubuh>
   html>

3. Di dalam tag body, tambahkan kanvas untuk mewakili papan permainan ular.

   <h2>Permainan Ularh2>
   <divpengenal="permainan">
   <kanvaspengenal="ular">kanvas>
   div>

4. Di folder yang sama dengan file HTML Anda, buat file baru bernama "styles.css".
5. Di dalam, tambahkan beberapa CSS untuk keseluruhan halaman web. Anda juga dapat menata situs web Anda menggunakan yang lain tips dan trik CSS penting.

   #permainan {
   lebar:400px;
   tinggi:400px;
   batas:0mobil;
   warna latar belakang:#eee;
   }
   h2 {
   perataan teks:tengah;
   font-family:Arial;
   ukuran huruf:36px;
   } 
   

6. Di dalam file HTML Anda, tambahkan tautan ke CSS di tag head:

   <tautanrel="lembar gaya"jenis="teks/css"href="styles.css">

7. Untuk melihat kanvas, buka file "index.html" Anda di browser web.

Bagaimana Menggambar Ular

Pada contoh di bawah ini, garis hitam melambangkan ular:

Beberapa kotak atau "segmen" membentuk ular. Saat ular tumbuh, jumlah kotak juga bertambah. Pada awal permainan, panjang ular adalah satu buah.

1. Di dalam file HTML Anda, tautkan ke file JavaScript baru di bagian bawah tag body:

   <tubuh>
    Kode Anda di sini 
   <naskahsrc="skrip.js">naskah>
   tubuh>

2. Buat script.js dan mulai dengan mendapatkan elemen DOM kanvas:

   var kanvas = dokumen.getElementById("ular");

3. Tetapkan konteks untuk elemen HTML kanvas. Dalam hal ini, Anda ingin game merender kanvas 2d. Ini akan memungkinkan Anda untuk menggambar beberapa bentuk atau gambar ke elemen HTML.

   var kanvas2d = kanvas.getContext("2d");

4. Tetapkan variabel dalam game lainnya seperti apakah game telah berakhir, serta tinggi dan lebar kanvas:

   var permainanBerakhir = PALSU;
   kanvas.lebar = 400;
   kanvas.tinggi = 400;

5. Deklarasikan variabel yang disebut "snakeSegments". Ini akan menampung jumlah "kotak" yang akan diambil ular itu. Anda juga dapat membuat variabel untuk memantau panjang ular:

   var ularSegmen = [];
   var panjang ular = 1;
   

6. Nyatakan posisi X dan Y awal ular:

   var ularX = 0;
   var ularY = 0;

7. Buat fungsi baru. Di dalam, tambahkan potongan ular awal ke array snakeSegments, dengan koordinat awal X dan Y:

   fungsimoveSnake() {
    snakeSegments.unshift({ X: ularX, y: ularY });
   }

8. Buat fungsi baru. Di dalam, atur gaya isian menjadi hitam. Ini adalah warna yang akan digunakan untuk menggambar ular:

   fungsidrawSnake() {
    canvas2d.fillStyle = "hitam"; 
   }

9. Untuk setiap segmen yang menyusun ukuran ular, gambarlah persegi dengan lebar dan tinggi 10 piksel:

   untuk (var saya = 0; i < snakeSegments.panjang; saya++) {
    canvas2d.fillRect (snakeSegments[i].x, snakeSegments[i].y, 10, 10);
    }

10. Buat game loop yang akan berjalan setiap 100 milidetik. Ini akan menyebabkan permainan terus-menerus menggambar ular di posisi barunya, yang akan sangat penting saat ular mulai bergerak:

    fungsigameLoop() {
     moveSnake();
     drawSnake();

11. Buka file "index.html" di browser web untuk melihat ular dengan ukuran terkecilnya di posisi awal.

Cara Membuat Ular Bergerak

Tambahkan beberapa logika untuk menggerakkan ular ke arah yang berbeda, tergantung pada tombol apa yang ditekan pemain di keyboard.

1. Di bagian atas file, nyatakan arah awal ular:

   var arahX = 10;
   var arah Y = 0;
   

2. Tambahkan pengendali peristiwa yang aktif saat pemain menekan tombol:

   dokumen.onkeydown = fungsi(peristiwa) {
   };

3. Di dalam event handler, ubah arah ular bergerak, berdasarkan tombol yang ditekan:

   mengalihkan (event.keyCode) {
   kasus37: // Panah kiri
    arahX = -10;
    arah Y = 0;
   merusak;
   kasus38: // Panah atas
    arahX = 0;
    arah Y = -10;
   merusak;
   kasus39: // Panah kanan
    arahX = 10;
    arah Y = 0;
   merusak;
   kasus40: // Panah bawah
    arahX = 0;
    arah Y = 10;
   merusak;
   }

4. Dalam fungsi moveSnake(), gunakan arah untuk memperbarui koordinat X dan Y ular. Misalnya, jika ular harus bergerak ke kiri, arah X akan menjadi "-10". Ini akan memperbarui koordinat X untuk menghapus 10 piksel untuk setiap frame game:

   fungsimoveSnake() {
    snakeSegments.unshift({ X: ularX, y: ularY });
    snakeX += arahX;
    snakeY += arahY;
   }

5. Gim saat ini tidak menghapus segmen sebelumnya saat ular bergerak. Ini akan membuat ular terlihat seperti ini:
6. Untuk memperbaikinya, kosongkan kanvas sebelum menggambar ular baru di setiap bingkai, di awal fungsi drawSnake():

   kanvas2d.clearRect(0, 0, kanvas.lebar, kanvas.tinggi);

7. Anda juga harus menghapus elemen terakhir dari array snakeSegments, di dalam fungsi moveSnake():

   ketika (snakeSegments.panjang > panjang ular) {
    snakeSegments.pop();
   }

8. Buka file "index.html" dan tekan tombol kiri, kanan, atas, atau bawah untuk memindahkan ular.

Cara Menambahkan Makanan ke Kanvas

Tambahkan titik-titik ke papan permainan untuk melambangkan potongan makanan untuk ular.

1. Deklarasikan variabel baru di bagian atas file untuk menyimpan array potongan makanan:

   var titik = [];

2. Buat fungsi baru. Di dalam, hasilkan koordinat X dan Y acak untuk titik-titik tersebut. Anda juga dapat memastikan bahwa hanya 10 titik yang ada di papan setiap saat:

   fungsispawnDots() {
   jika(titik.panjang < 10) {
   var titikX = Matematika.lantai(Matematika.random() * kanvas.lebar);
   var titik = Matematika.lantai(Matematika.random() * kanvas.tinggi);
    dots.push({ X: titikX, y: titik });
    }
   }

3. Setelah membuat koordinat X dan Y untuk makanan, gambarkan ke atas kanvas menggunakan warna merah:

   untuk (var saya = 0; i  canvas2d.fillStyle = "merah";
    canvas2d.fillRect (titik[i].x, titik[i].y, 10, 10);
   }

4. Panggil fungsi spawnDots() baru di dalam loop game:

   fungsigameLoop() {
    moveSnake();
    drawSnake();
    spawnDots();
   jika(!permainanBerakhir) {
    setTimeout (gameLoop, 100);
    }
   }

5. Buka file "index.html" untuk melihat makanan di papan permainan.

Cara Membuat Ular Tumbuh

Anda dapat membuat ular tumbuh dengan menambah panjangnya saat bertabrakan dengan titik makanan.

1. Buat fungsi baru. Di dalamnya, lewati setiap elemen dalam larik titik:

   fungsicheckCollision() {
   untuk (var saya = 0; i 
    }
   }

2. Jika posisi ular cocok dengan koordinat titik mana pun, tambahkan panjang ular, dan hapus titik tersebut:

   jika (snakeX < titik[i].x + 10 && 
    ularX + 10 > titik[i].x && 
    snakeY < titik[i].y + 10 && 
    ularY + 10 > titik[i].y) {
    ularPanjang++;
    dots.sambungan (i, 1);
   }

3. Panggil fungsi checkCollision() baru di loop game:

   fungsigameLoop() {
    moveSnake();
    drawSnake();
    spawnDots();
    checkCollision();
   jika(!permainanBerakhir) {
    setTimeout (gameLoop, 100);
    }
   }

4. Buka file "index.html" di browser web. Gerakkan ular menggunakan keyboard untuk mengumpulkan potongan makanan dan menumbuhkan ular.

Cara Mengakhiri Permainan

Untuk mengakhiri permainan, periksa apakah ular itu bertabrakan dengan ekornya sendiri, atau salah satu dinding.

1. Buat fungsi baru untuk mencetak peringatan "Game Over".

   fungsipermainan telah berakhir() {
    setTimeout(fungsi() {
    peringatan("Permainan telah berakhir!");
    }, 500); 
    permainanBerakhir = BENAR
   }

2. Di dalam fungsi checkCollision(), periksa apakah ular menabrak salah satu dinding kanvas. Jika demikian, panggil fungsi gameOver():

   jika (ularX < -10 || 
    ularY < -10 || 
    snakeX > kanvas.lebar+10 ||
    snakeY > kanvas.tinggi+10) {
    permainan telah berakhir();
   }

3. Untuk memeriksa apakah kepala ular bertabrakan dengan salah satu segmen ekor, lewati setiap potongan ular:

   untuk (var saya = 1; i < snakeSegments.panjang; saya++) {
   }

4. Di dalam for-loop, periksa apakah lokasi kepala ular cocok dengan salah satu segmen ekornya. Jika demikian, berarti kepala bertabrakan dengan ekor, jadi akhiri permainan:

   jika (snakeX snakeSegments[i].x && snakeY snakeSegments[i].y) {
    permainan telah berakhir();
   }

5. Buka file "index.html" di browser web. Cobalah untuk menabrak dinding atau ekor Anda sendiri untuk mengakhiri permainan.

Mempelajari Konsep JavaScript Melalui Game

Membuat game bisa menjadi cara yang bagus untuk membuat pengalaman belajar Anda lebih menyenangkan. Teruslah membuat lebih banyak game untuk terus meningkatkan pengetahuan JavaScript Anda.