The classic Snake game is a simple but useful project for learning the foundations of browser-based game development. The player controls a snake that moves around a board, collects food, and grows longer each time it eats. The challenge is to avoid the walls and the snake’s own body. Although the rules are easy to understand, implementing them introduces several important programming concepts, including coordinates, arrays, keyboard input, timing, and collision detection.

You can build a playable version with HTML and JavaScript, without installing a game engine or adding a third-party library. HTML provides the page structure, while JavaScript handles movement, game rules, score updates, and the game loop. A small amount of CSS can make the board easier to read, but the core mechanics can remain in plain JavaScript. This makes Snake a practical first project for people who want to understand how interactive web pages work.

This tutorial explains the main parts of the game in a step-by-step order. The goal is not to copy a large framework or hide the logic behind a library. Instead, you will see how the board is represented, how the snake moves, how food appears, and how the game detects a loss. By the end, you will have a foundation that can be extended with a start screen, increasing difficulty, sound effects, or a high-score system.

1. Prepare the HTML Game Board

Start by creating a file named index.html. It will contain the game’s interface and the JavaScript needed to run it. For a small learning project, keeping the first version in one file makes it easier to see how the pieces connect. Later, you can separate the HTML, CSS, and JavaScript into individual files as the project becomes more complex.

The board can be drawn with an HTML <canvas> element. Canvas provides a two-dimensional drawing area that JavaScript can update whenever the game state changes. Add a heading, a score display, the canvas, and a restart button. Give the canvas a fixed width and height so that the game has predictable boundaries. For example, a board that is 400 pixels wide and 400 pixels tall can be divided into equally sized cells.

Each cell represents one possible position for a segment of the snake or a piece of food. If a cell is 20 pixels wide, a 400-pixel board contains 20 columns and 20 rows. Using a grid is easier than moving the snake by arbitrary pixel values because the head, body, and food can all share the same coordinate system. The JavaScript can store a position as an object with an x value and a y value, measured in grid cells rather than pixels.

2. Represent the Snake and Control Its Movement

Store the snake as an array of coordinate objects. The first element represents the head, and the remaining elements represent the body. For example, the snake might begin with a head at column 8 and row 10, followed by body segments at columns 7 and 6 on the same row. Keeping the segments in order makes it possible to move the snake by updating its head and shifting the body behind it.

At each game update, calculate a new head position based on the current direction. Moving right increases the horizontal coordinate, moving left decreases it, moving down increases the vertical coordinate, and moving up decreases it. Add the new head to the beginning of the array. If the snake has not eaten food, remove the final element from the array so the total length stays the same. When food is eaten, keep the tail instead, causing the snake to grow by one segment.

Use keyboard events to let the player change direction. The arrow keys are a familiar choice, and the W, A, S, and D keys can be supported as an alternative. Prevent an immediate 180-degree turn, because allowing the snake to reverse directly into its own body can make the game feel unfair. A simple direction check can reject a new direction if it is the exact opposite of the current one. Also consider preventing the browser from scrolling when the player presses an arrow key while the game is active.

3. Add Food, Scoring, and a Timed Game Loop

Food can be represented by another grid coordinate. When the snake reaches the food’s position, increase the score and create a new food position. Randomly select a column and row within the board’s limits. Before placing the food, check that the selected cell is not occupied by any snake segment. If it is occupied, choose another position. This small check prevents food from appearing inside the snake, where the player would not be able to collect it.

The game needs a repeated update cycle. JavaScript’s setInterval can run an update function at a chosen interval, while requestAnimationFrame is useful for rendering animations that follow the browser’s display cycle. For a grid-based beginner game, a timed update can be straightforward to understand. Keep the game logic separate from the drawing function: one function changes the game state, and another clears the canvas and draws the food and snake based on the current state.

A consistent update interval makes movement predictable. A shorter interval makes the snake move faster, while a longer interval slows it down. You can start with a comfortable speed and increase the difficulty after every few pieces of food. Avoid creating multiple timers when the player restarts the game. Instead, maintain one game loop or stop the existing timer before starting a new one. This prevents the snake from moving several times per tick because duplicate loops are running.

4. Detect Collisions and End the Game

Collision detection is one of the most important parts of Snake. First, check whether the new head position falls outside the grid. If the horizontal coordinate is below zero or reaches the number of columns, the snake has crossed a side boundary. Apply the same check to the vertical coordinate. If wall collisions are enabled, the game should end as soon as one of these conditions becomes true.

Next, check whether the head overlaps the snake’s body. Compare the new head coordinate with the coordinates of the existing body segments. If a match is found, the snake has collided with itself. Be careful about the update order: when the snake is not growing, its tail is about to move away, so implementations may handle that final segment separately to avoid treating a legal move into the departing tail cell as a collision. For a first version, a simpler check can be acceptable, but the rule should be consistent.

When a collision occurs, stop updating the game state and display a clear game-over message. Do not continue moving the snake behind the message. A restart button should restore the initial snake coordinates, direction, score, food position, and running state. Test the game by deliberately hitting each wall and steering into the body. Testing these cases early helps reveal mistakes in coordinate calculations and game-loop management before you add more features.

5. Test, Improve, and Extend the Game

Once the basic game works, test it at different stages. Confirm that the snake moves in all four directions, food appears inside the board, the score increases after eating, and the game ends on a collision. Check that the snake grows by exactly one segment per food item and that restarting resets the entire game. It is also useful to test what happens when the player presses keys rapidly, since quick input can reveal direction-handling bugs.

You can improve the experience with a start screen, pause and resume controls, a best-score display, sound effects, and responsive layout styling. Make the score easy to read and use colors with enough contrast to distinguish the snake, food, and background. If you add touch controls for mobile devices, make sure the buttons are large enough to tap and do not block the board. These additions are optional; the core game should remain understandable and playable without them.

For clean code, use descriptive variable names and keep drawing, input, collision detection, and state updates in separate functions. Add comments where they explain a decision rather than repeating what a line already says. You do not need a framework to make this project useful. Building Snake with basic browser technologies gives you hands-on practice with arrays, conditionals, functions, event listeners, random numbers, and timing. Those skills also apply to many other interactive web projects.

Conclusion

Creating a classic Snake game with HTML and JavaScript is an accessible way to learn how browser games work. HTML supplies the canvas and controls, while JavaScript manages the snake’s coordinates, movement, food, score, timing, and collisions. Breaking the project into small parts makes the logic easier to test and maintain.

Start with a small playable version before adding extra features. Once the movement and collision rules are reliable, you can experiment with new themes, difficulty levels, sound, mobile controls, and saved high scores. The most valuable result is not just a working Snake game, but a clearer understanding of how simple game systems are built from fundamental programming concepts.

Pendahuluan: Membuat Ulang Permainan Snake Klasik

Permainan Snake klasik merupakan proyek sederhana yang bermanfaat untuk mempelajari dasar-dasar pengembangan game berbasis browser. Pemain mengendalikan ular yang bergerak di dalam papan, mengambil makanan, lalu bertambah panjang setiap kali berhasil memakannya. Tantangannya adalah menghindari dinding dan tubuh ular itu sendiri. Walaupun aturannya mudah dipahami, proses pembuatannya mengenalkan beberapa konsep pemrograman penting, seperti koordinat, array, input keyboard, pengaturan waktu, dan deteksi tabrakan.

Kamu dapat membuat versi yang bisa dimainkan menggunakan HTML dan JavaScript tanpa memasang game engine atau menambahkan library pihak ketiga. HTML menyediakan struktur halaman, sedangkan JavaScript mengatur pergerakan, aturan permainan, pembaruan skor, dan game loop. Sedikit CSS dapat membuat papan lebih nyaman dilihat, tetapi mekanisme utamanya tetap bisa dibuat menggunakan JavaScript dasar. Karena itu, Snake cocok sebagai proyek pertama bagi siapa pun yang ingin memahami cara kerja halaman web interaktif.

Tutorial ini menjelaskan bagian-bagian utama permainan secara bertahap. Tujuannya bukan menyalin framework besar atau menyembunyikan logika di balik library. Sebaliknya, kamu akan mempelajari cara merepresentasikan papan, menggerakkan ular, memunculkan makanan, dan mendeteksi kekalahan. Setelah memahami fondasinya, kamu dapat mengembangkan permainan dengan layar awal, tingkat kesulitan yang meningkat, efek suara, atau sistem skor tertinggi.

1. Menyiapkan Papan Permainan HTML

Mulailah dengan membuat file bernama index.html. File ini akan memuat antarmuka permainan dan kode JavaScript yang dibutuhkan agar permainan berjalan. Untuk proyek pembelajaran kecil, menyimpan versi pertama dalam satu file membuat hubungan antarbagian lebih mudah dipahami. Setelah proyek berkembang, kamu dapat memisahkan HTML, CSS, dan JavaScript ke dalam file masing-masing.

Papan permainan dapat digambar menggunakan elemen HTML <canvas>. Canvas menyediakan area gambar dua dimensi yang dapat diperbarui JavaScript setiap kali kondisi permainan berubah. Tambahkan judul, tampilan skor, canvas, dan tombol untuk memulai ulang permainan. Tetapkan lebar dan tinggi canvas agar batas papan konsisten. Sebagai contoh, papan berukuran 400 × 400 piksel dapat dibagi menjadi sejumlah kotak dengan ukuran sama.

Setiap kotak mewakili posisi yang dapat ditempati segmen ular atau makanan. Jika ukuran setiap kotak adalah 20 piksel, papan 400 piksel memiliki 20 kolom dan 20 baris. Menggunakan sistem grid lebih mudah daripada menggerakkan ular dengan nilai piksel sembarang karena kepala, tubuh, dan makanan memakai sistem koordinat yang sama. JavaScript dapat menyimpan posisi sebagai objek dengan nilai x dan y, yang dihitung dalam satuan kotak grid, bukan piksel.

2. Merepresentasikan Ular dan Mengatur Pergerakannya

Simpan ular sebagai array berisi objek koordinat. Elemen pertama mewakili kepala, sedangkan elemen berikutnya mewakili bagian tubuh. Sebagai contoh, kepala ular dapat dimulai di kolom 8 dan baris 10, dengan segmen tubuh berada di kolom 7 dan 6 pada baris yang sama. Urutan segmen ini memudahkan pergerakan karena posisi kepala diperbarui, kemudian tubuh mengikuti di belakangnya.

Pada setiap pembaruan permainan, hitung posisi kepala yang baru berdasarkan arah saat ini. Bergerak ke kanan menambah koordinat horizontal, ke kiri menguranginya, ke bawah menambah koordinat vertikal, dan ke atas menguranginya. Masukkan kepala baru ke bagian awal array. Jika ular belum memakan makanan, hapus elemen terakhir agar panjangnya tetap sama. Ketika makanan dimakan, bagian ekor tidak dihapus sehingga ular bertambah panjang satu segmen.

Gunakan event keyboard untuk memungkinkan pemain mengubah arah. Tombol panah merupakan pilihan yang umum, sedangkan tombol W, A, S, dan D dapat disediakan sebagai alternatif. Cegah perubahan arah 180 derajat secara langsung karena ular bisa berbalik tepat ke tubuhnya sendiri dan membuat permainan terasa tidak adil. Pemeriksaan arah sederhana dapat menolak arah baru jika arahnya berlawanan dengan arah saat ini. Pertimbangkan juga untuk mencegah browser menggulir halaman ketika pemain menekan tombol panah saat permainan aktif.

3. Menambahkan Makanan, Skor, dan Game Loop

Makanan dapat direpresentasikan sebagai koordinat grid. Ketika ular mencapai posisi makanan, tambahkan skor dan buat posisi makanan baru. Pilih kolom dan baris secara acak di dalam batas papan. Sebelum menempatkan makanan, periksa apakah kotak tersebut sedang ditempati segmen ular. Jika iya, pilih posisi lain. Pemeriksaan kecil ini mencegah makanan muncul di dalam tubuh ular sehingga tidak mungkin diambil pemain.

Permainan memerlukan siklus pembaruan yang berulang. JavaScript menyediakan setInterval untuk menjalankan fungsi pembaruan pada interval tertentu, sedangkan requestAnimationFrame berguna untuk animasi yang mengikuti siklus tampilan browser. Untuk game grid sederhana bagi pemula, pembaruan berbasis waktu mudah dipahami. Pisahkan logika permainan dari fungsi gambar: satu fungsi mengubah kondisi permainan, sementara fungsi lain membersihkan canvas dan menggambar ular serta makanan sesuai kondisi terbaru.

Interval pembaruan yang konsisten membuat pergerakan lebih mudah diprediksi. Interval lebih pendek membuat ular bergerak lebih cepat, sedangkan interval lebih panjang memperlambatnya. Kamu dapat memulai dengan kecepatan yang nyaman lalu meningkatkan kesulitan setelah beberapa makanan berhasil dimakan. Hindari membuat banyak timer ketika pemain memulai ulang permainan. Gunakan satu game loop atau hentikan timer sebelumnya sebelum memulai yang baru. Dengan begitu, ular tidak bergerak beberapa kali dalam satu giliran akibat adanya loop duplikat.

4. Mendeteksi Tabrakan dan Mengakhiri Permainan

Deteksi tabrakan merupakan salah satu bagian terpenting dalam Snake. Pertama, periksa apakah posisi kepala yang baru berada di luar grid. Jika koordinat horizontal kurang dari nol atau mencapai jumlah kolom, ular telah melewati batas samping. Terapkan pemeriksaan serupa pada koordinat vertikal. Jika tabrakan dengan dinding diaktifkan, permainan harus berakhir ketika salah satu kondisi tersebut terjadi.

Selanjutnya, periksa apakah kepala bertumpuk dengan tubuh ular. Bandingkan koordinat kepala baru dengan koordinat segmen tubuh yang ada. Jika ditemukan posisi yang sama, berarti ular menabrak dirinya sendiri. Perhatikan urutan pembaruan: ketika ular tidak bertambah panjang, ekornya akan segera berpindah. Implementasi tertentu dapat menangani segmen ekor terakhir secara terpisah agar langkah menuju kotak yang baru saja ditinggalkan ekor tidak keliru dianggap sebagai tabrakan. Untuk versi pertama, pemeriksaan yang lebih sederhana dapat digunakan, tetapi aturannya harus konsisten.

Ketika tabrakan terjadi, hentikan pembaruan kondisi permainan dan tampilkan pesan bahwa permainan berakhir. Ular tidak boleh terus bergerak di balik pesan tersebut. Tombol mulai ulang sebaiknya mengembalikan koordinat ular, arah, skor, posisi makanan, dan status permainan ke kondisi awal. Uji permainan dengan sengaja menabrakkan ular ke setiap dinding dan mengarahkannya ke tubuh sendiri. Pengujian ini membantu menemukan kesalahan koordinat dan pengelolaan game loop sebelum fitur tambahan dibuat.

5. Menguji, Memperbaiki, dan Mengembangkan Permainan

Setelah permainan dasar berfungsi, lakukan pengujian dalam berbagai kondisi. Pastikan ular bisa bergerak ke empat arah, makanan muncul di dalam papan, skor bertambah setelah makanan dimakan, dan permainan berakhir ketika terjadi tabrakan. Periksa juga apakah ular bertambah tepat satu segmen untuk setiap makanan dan apakah tombol mulai ulang mengatur ulang seluruh kondisi permainan. Menguji input keyboard yang cepat juga berguna karena dapat mengungkap masalah pada pengaturan arah.

Kamu dapat meningkatkan pengalaman bermain dengan menambahkan layar awal, fitur jeda dan lanjut, tampilan skor terbaik, efek suara, serta tata letak responsif. Buat skor mudah dibaca dan gunakan warna dengan kontras yang cukup agar ular, makanan, dan latar belakang mudah dibedakan. Jika menambahkan kontrol sentuh untuk perangkat seluler, pastikan tombol cukup besar untuk ditekan dan tidak menutupi papan. Fitur-fitur ini bersifat opsional; permainan inti tetap harus mudah dipahami dan dimainkan tanpa tambahan tersebut.

Untuk menjaga kode tetap rapi, gunakan nama variabel yang jelas dan pisahkan fungsi menggambar, input, deteksi tabrakan, serta pembaruan kondisi permainan. Tambahkan komentar ketika komentar tersebut menjelaskan alasan suatu keputusan, bukan sekadar mengulang isi baris kode. Kamu tidak memerlukan framework agar proyek ini bermanfaat. Membuat Snake dengan teknologi web dasar memberikan latihan langsung menggunakan array, kondisi, fungsi, event listener, angka acak, dan pengaturan waktu. Keterampilan ini juga berguna untuk banyak proyek web interaktif lainnya.

Kesimpulan

Membuat permainan Snake klasik dengan HTML dan JavaScript merupakan cara yang mudah dijangkau untuk mempelajari cara kerja game di browser. HTML menyediakan canvas dan kontrol, sementara JavaScript mengatur koordinat ular, pergerakan, makanan, skor, waktu, dan tabrakan. Memecah proyek menjadi bagian-bagian kecil membuat logikanya lebih mudah diuji dan dirawat.

Mulailah dari versi sederhana yang bisa dimainkan sebelum menambahkan fitur ekstra. Setelah pergerakan dan aturan tabrakan berjalan dengan benar, kamu dapat bereksperimen dengan tema baru, tingkat kesulitan, suara, kontrol seluler, dan penyimpanan skor tertinggi. Hasil terpentingnya bukan hanya permainan Snake yang berfungsi, tetapi juga pemahaman yang lebih baik tentang bagaimana sistem permainan sederhana dibangun dari konsep pemrograman dasar.