Membuat Proyek Snake Game dengan micro:bit

Snake Game adalah permainan klasik yang mungkin sudah pernah Kita mainkan di ponsel atau komputer. Kini, Kita bisa membuat versi sederhana dari permainan ini dengan menggunakan micro:bit. Proyek ini tidak hanya menyenangkan tetapi juga mendidik, karena Kita akan belajar tentang pemrograman dan penggunaan sensor pada micro:bit. Dalam artikel ini, saya akan memberikan deskripsi dan langkah-langkah untuk membuat Snake Game dengan micro:bit. Yuk, kita mulai!

Apa itu Snake Game?

Snake Game adalah permainan di mana pemain mengontrol seekor ular yang bergerak di sekitar layar. Ular ini harus memakan makanan untuk tumbuh lebih panjang, dan pemain harus menghindari menabrak dinding atau tubuh ular itu sendiri. Tujuannya adalah untuk mengumpulkan poin sebanyak mungkin dengan memakan makanan.

Alat dan Bahan yang Diperlukan

Sebelum memulai, pastikan Kita memiliki semua alat dan bahan berikut:

• 1 x micro:bit
• 1 x Adaptor baterai micro:bit dan dua baterai AAA
• Kabel konektor
• Laptop atau komputer dengan akses internet

Langkah-langkah Membuat Snake Game

Berikut adalah langkah-langkah untuk menyelesaikan proyek Snake Game:

1. Menyiapkan Platform MakeCode Langkah pertama adalah membuka platform MakeCode untuk micro:bit di browser Kita. Kita bisa mengaksesnya melalui tautan MakeCode micro:bit.
2. Membuat Proyek Baru Setelah masuk ke MakeCode, klik tombol “New Project” atau “Proyek Baru” dan beri nama proyek Kita, misalnya “Snake Game“. Kemudian, klik “Create” untuk memulai.
3. Menambahkan Blok Kode Dalam MakeCode, Kita akan melihat berbagai kategori blok kode di sisi kiri layar. Untuk proyek ini, Kita akan menggunakan beberapa blok dari kategori “Game“, “Input“, “Logic“, dan “Variables“.

Langkah-langkah Pembuatan Blok Kode

Langkah 1: Menyiapkan Proyek

1. Buka MakeCode micro:bit di browser Anda.
2. Klik “New Project” dan beri nama proyek Anda, misalnya “Snake Game”.

Langkah 2: Membuat Variabel

1. Pergi ke tab “Variables”.
2. Buat variabel baru bernama snake.
3. Buat variabel baru bernama direction.
4. Buat variabel baru bernama fruit.
5. Buat variabel baru bernama head.
6. Buat variabel baru bernama gameRunning.

Langkah 3: Menginisialisasi Variabel

1. Pergi ke tab “On Start” dan tambahkan blok “on start”.
2. Dalam blok “on start”, tambahkan:

• Blok “set snake to array” dan inisialisasi dengan nilai [[2, 2]].
• Blok “set direction to array” dan inisialisasi dengan nilai [1, 0].
• Blok “set fruit to array” dan inisialisasi dengan nilai acak antara 0 dan 4 untuk koordinat X dan Y.
• Blok “set gameRunning to true”.

Langkah 4: Membuat Fungsi untuk Memindahkan Ular

1. Pergi ke tab “Functions” dan buat fungsi baru bernama moveSnake.
2. Dalam fungsi moveSnake, tambahkan:

• Blok “set head to array” dengan nilai snake[0][0] + direction[0], snake[0][1] + direction[1].
• Blok “if” dengan kondisi jika head[0] < 0 || head[0] > 4 || head[1] < 0 || head[1] > 4 || isSnakeColliding(head):
  • Blok “set gameRunning to false”.
  • Blok “show string GAME OVER”.
  • Blok “return”.
• Blok “insert at beginning of array snake head”.
• Blok “if” dengan kondisi jika head[0] == fruit[0] && head[1] == fruit[1]:
  • Blok “set fruit to array” dengan nilai acak antara 0 dan 4 untuk koordinat X dan Y.
• Blok “else”:
  • Blok “remove last item from array snake”.

Langkah 5: Membuat Fungsi untuk Menggambar Ular

1. Pergi ke tab “Functions” dan buat fungsi baru bernama drawSnake.
2. Dalam fungsi drawSnake, tambahkan:

• Blok “clear screen”.
• Blok “for element of snake” dan di dalamnya:
  • Blok “plot x y” untuk menggambar tiap segmen ular.
• Blok “plot x y brightness” untuk menggambar buah dengan kecerahan 255.

Langkah 6: Menangani Tombol A dan B

1. Pergi ke tab “Input” dan tambahkan blok “on button A pressed”.
2. Dalam blok “on button A pressed”, tambahkan:

• Blok “if” dengan kondisi jika direction[0] == 0:
  • Blok “set direction to array [-1, 0]`.
• Blok “else”:
  • Blok “set direction to array [0, -1]`.

1. Tambahkan blok “on button B pressed”.
2. Dalam blok “on button B pressed”, tambahkan:

• Blok “if” dengan kondisi jika direction[0] == 0:
  • Blok “set direction to array [1, 0]`.
• Blok “else”:
  • Blok “set direction to array [0, 1]`.

Langkah 7: Mengatur Loop Utama

1. Pergi ke tab “Basic” dan tambahkan blok “forever”.
2. Dalam blok “forever”, tambahkan:

• Blok “if” dengan kondisi gameRunning:
  • Blok “call moveSnake”.
  • Blok “call drawSnake”.
  • Blok “pause (ms) 500”.

Langkah 8: Membuat Fungsi untuk Memeriksa Tabrakan

1. Pergi ke tab “Functions” dan buat fungsi baru bernama isSnakeColliding.
2. Dalam fungsi isSnakeColliding, tambahkan:

• Blok “for element of snake” dan di dalamnya:
  • Blok “if” dengan kondisi jika segment2[0] == position[0] && segment2[1] == position[1]:
  • Blok “return true”.
• Blok “return false”.

Mengunggah Kode ke Perangkat micro:bit

1. Menyelesaikan Kode:
   • Pastikan kode Kita telah selesai di platform MakeCode dan berfungsi sesuai dengan yang diharapkan.
2. Mengunduh File HEX:
   • Klik tombol “Download” di sudut kanan bawah layar MakeCode.
   • File dengan ekstensi .hex akan diunduh ke komputer Kita. Ini adalah file yang akan diunggah ke micro:bit.
3. Menghubungkan micro:bit ke Komputer:
   • Gunakan kabel USB untuk menghubungkan micro:bit ke komputer. micro:bit akan terdeteksi sebagai perangkat penyimpanan eksternal, mirip dengan flash drive.
4. Memindahkan File HEX:
   • Buka folder tempat file HEX diunduh.
   • Seret dan lepaskan file HEX ke perangkat micro:bit yang muncul di folder atau jendela file explorer komputer Kita.
   • Tunggu sampai proses penyalinan selesai. Setelah file HEX dipindahkan, micro:bit akan secara otomatis memulai ulang dan menjalankan kode yang telah diunggah.

Merakit Komponen Hardware

1. Persiapan Baterai:
   • Masukkan dua baterai AAA ke dalam adaptor baterai micro:bit.
2. Menghubungkan Baterai ke micro:bit:
   • Hubungkan adaptor baterai ke port baterai di micro:bit. Pastikan konektor terhubung dengan benar dan kuat.

Menyalakan dan Menguji

1. Menyalakan micro:bit:
   • Setelah baterai terhubung, micro:bit akan menyala secara otomatis. Kita akan melihat lampu LED di micro:bit menyala, yang menandakan bahwa micro:bit sedang beroperasi.
2. Menggerakkan Ular:
   • Gunakan tombol A dan B pada micro:bit untuk menggerakkan ular.
   • Tombol A dan B akan digunakan untuk mengubah arah ular (misalnya, A untuk ke kiri dan B untuk ke kanan).
3. Memakan Makanan:
   • Cobalah untuk menggerakkan ular menuju posisi makanan di layar.
   • Pastikan ular tidak menabrak dinding atau tubuhnya sendiri.
4. Memeriksa Fungsionalitas:
   • Ular harus bertambah panjang setiap kali memakan makanan.
   • Jika ular menabrak dinding atau tubuhnya sendiri, permainan akan berakhir dan pesan “Game Over” akan ditampilkan di layar micro:bit.

Dengan langkah-langkah yang lebih rinci ini,kita sekarang dapat mengunggah kode ke micro:bit, merakit komponen hardware, dan menguji proyek Snake Game. Selamat mencoba dan semoga berhasil!

Bentuk Blok Kode Lengkap di Micro:bit

Bentuk Kode Dalam Javascript

function isSnakeColliding (position: any[]) {
    for (let segment2 of snake) {
        if (segment2[0] == position[0] && segment2[1] == position[1]) {
            return true
        }
    }
    return false
}
// Kontrol dengan tombol A dan B
input.onButtonPressed(Button.A, function () {
    if (direction[0] == 0) {
        // Kiri
        direction = [-1, 0]
    } else {
        // Atas
        direction = [0, -1]
    }
})
function moveSnake () {
    head = [snake[0][0] + direction[0], snake[0][1] + direction[1]]
    // Cek apakah ular menabrak dinding atau dirinya sendiri
    if (head[0] < 0 || head[0] > 4 || head[1] < 0 || head[1] > 4 || isSnakeColliding(head)) {
        gameRunning = false
        basic.showString("GAME OVER")
        return
    }
    snake.unshift(head)
    // Jika makan buah, tambah panjang
    if (head[0] == fruit[0] && head[1] == fruit[1]) {
        fruit = [Math.randomRange(0, 4), Math.randomRange(0, 4)]
    } else {
        // Hapus ekor jika tidak makan buah
        snake.pop()
    }
}
input.onButtonPressed(Button.B, function () {
    if (direction[0] == 0) {
        // Kanan
        direction = [1, 0]
    } else {
        // Bawah
        direction = [0, 1]
    }
})
function drawSnake () {
    basic.clearScreen()
    for (let segment of snake) {
        led.plot(segment[0], segment[1])
    }
    led.plotBrightness(fruit[0], fruit[1], 255)
}
let head: number[] = []
let gameRunning = false
let fruit: number[] = []
let direction: number[] = []
let snake: number[][] = []
// Posisi awal ular
snake = [[2, 2]]
// Bergerak ke kanan
direction = [1, 0]
fruit = [Math.randomRange(0, 4), Math.randomRange(0, 4)]
gameRunning = true
// Loop utama
basic.forever(function () {
    if (gameRunning) {
        moveSnake()
        drawSnake()
        basic.pause(500)
    }
})

File .HEX bisa diunduh disini

Penyelesaian dan Pengembangan Lanjutan

Selamat! Kita telah berhasil membuat proyek Snake Game dengan micro:bit. Proyek ini bisa menjadi dasar untuk berbagai pengembangan lebih lanjut. Kita bisa menambahkan lebih banyak fitur, seperti tingkat kesulitan yang meningkat, efek suara, atau tampilan yang lebih menarik.

Proyek Snake Game ini tidak hanya mengajarkan dasar-dasar pemrograman dan penggunaan sensor pada micro:bit, tetapi juga membangkitkan kreativitas dan rasa ingin tahu. Dengan platform MakeCode dan micro:bit, Kita bisa terus bereksperimen dan membuat proyek-proyek yang lebih kompleks dan menantang.

Semoga artikel ini bermanfaat dan menginspirasi Kita untuk terus belajar dan berkreasi dengan teknologi!