Project Based Learning – Membuat Tic Tac Toe dengan Scratch
Assalaamu’alaikum, Sobat Pembelajar! 🖥️
Project Based Learning – Membuat Tic Tac Toe dengan Scratch, kita akan membahas sebuah proyek seru yang cocok buat kamu yang baru belajar pemrograman: Membuat Permainan Tic Tac Toe Sederhana dengan Scratch. Proyek ini akan membantu kamu memahami konsep dasar pemrograman seperti variabel, loop, kondisi, dan fungsi, sambil membuat sesuatu yang menyenangkan dan interaktif.
Yuk, simak langkah-langkahnya!
Pendahuluan
Project-based learning (PBL) adalah metode pembelajaran yang melibatkan peserta didik dalam proyek nyata untuk memecahkan masalah tertentu. Salah satu proyek yang menarik adalah membuat permainan sederhana seperti Tic Tac Toe. Pada kesempatan kali ini, kita akan membahas langkah-langkah pembuatan permainan Tic Tac Toe dari persiapan papan hingga menentukan hasil permainan, siapa yang memenangkan permainan player 1 atau player 2 atau hasilnya imbang/seri. Okeh, tidak berlama – lama mari langsung meluncur ke Scratch Offline Editor v.3; Firs of all, beri nama project terlebih dahulu;
Penyiapan Papan Tic Tac Toe
Pertama, kita perlu membuat papan permainan. Papan Tic Tac Toe terdiri dari 3×3 grid kotak. Kita bisa menggunakan Create Clone Of block puzzle untuk merepresentasikan papan ini. Simak langkahnya;
Buat Sprite
Untuk mempermudah pembuatan sprite, silahkan unduh file sprite cell yang sudah ada, pada link berikut;
File Cell.sprite3 bisa di download disini
Setelah file diunduh, extrak file tersebut kemudian upload file Cell.sprite3 ke dalam Scratch.
setelah cell.sprite3 diupload maka jadilah kotak cell dengan ukuran 100 x 100 px. Kemudian dari satu sprite tersebut ada tiga costume. Costume pertama kotak cell kosong, kedua kotak cell berisi tanda silang berwarna merah untuk dijadikan Player 1, ketiga kotak cell berisi tanda lingkaran berwarna biru untuk dijadikan Player 2. seperti terlihat pada gambar berikut;
Buat Cloningan cell tersebut menjadi 3 x 3
Yang pertama kita akan buat 3 cloningan cell dalam 1 baris seperti berikut ini;
Agar codingan ini menjadi lebih efektif dan efisien, kita manfaatkan block puzzle Create Clone of myself yang artinya sprite ini meng-kloning dirinya sendiri. Kemudian kita manfaatkan puzzle Repeat untuk mengkloning sprite tersebut sebanyak 3 kali dalam 1 baris, maka terbentuklah 3 sprite Cell dalam satu baris, ditambah 1 kotak cell sprite aslinya ( bukan cloningan, ada di kotak ke-empat dalam baris tsb ).
Kemudian mari kita manfaatkan kembali block puzzle Repeat untuk membuat kotak cell 3 x 3, seperti tampak pada gambar berikut ini; simak caranya baik – baik ya;
Setelah terbentuk 3 x 3 Cell dengan memanfaatkan teknik yang disebut Nested Loop yaitu perulangan di dalam perulangan menjadikannya 3 x 3 kotak Cell. Namun, disitu terlihat ada 10 kotak cell, dimana kotak cell yang kesepuluh adalah Sprite yang asli ( bukan kloningan ). Untuk itu kita tidak akan tampilkan/disembunyikan agar terlihat oleh user hanya 9 kotak cell, bagaimana caranya ? perhatikan gambar berikut ini;
Jadi yang ditampilkan dari 9 kotak cell tersebut adalah kloningan dari sprite tersebut, sementara sprite aslinya disembunyikan. Itu fungsi dari block puzzle When I Start as a clone ditambahkan Show / tampilkan. Sementara di block code sprite cell nya diberikan Hide, seperti gambar diatas.
Player 1 dan Player 2
Setelah papan permainan selesai dibuat, langkah selanjutnya adalah membuat 2 player, yaitu Player 1 – Tanda Silang Merah dan Player 2 – Tanda Lingkaran Biru. Bagaimana cara membuatnya ? kita bisa memanfaatkan Costume yang sudah disiapkan sebelumnya, berada di dalam Sprite Cell. Jika dicek tab Costume maka akan tampil 3 costume dari Sprite tersebut, yaitu Empty, Cross, Circle. Lalu kita asumsikan Player 1 jalan lebih dahulu kemudian Player 2 mendapat gilirian dan seterusnya secara bergantian. Maka ketika 1 kotak cell tersebut diklik, maka sesuai dengan Playernya kotak cell tersebut berubah, jika diklik oleh player 1 maka berganti menjadi Costume Cross, sebaliknya jika player 2 maka berganti mejadi Costume Circle. Untuk lebih jelasnya bisa disimak pada gambar berikut dengan seksama dan dalam tempo sesingkat singkatnya, 😉
Buat ID Cell unik
Setelah papan permainan disiapkan serta Player 1 dan Player 2 sudah bisa dijalankan bergantian, maka langkah selanjutnya adalah bagaimana agar sistem mengecek siapa yang memenangkan permainan tersebut. Seperti kita ketahui permainan tersebut akan dimenangkan oleh Player yang bisa menyusunnya secara dalam 1 baris sama, 1 kolom yang sama, dan dalam diagonal yang sama.
Untuk itu bagaimana agar sistem ini dapat mengingatnya dan mengeceknya. Tidak lain dan tidak bukan kita akan terlebih dahulu membuat ID Cell yang unik. Kita buat setiap cell memiliki ID. Kita berikan dan tentukan saja ID Cell nya dengan angka 1 sampai 9. Seperti ini;
Pertama kita buat dahulu Variable Cell dengan nama IdCell, kemudian pilih for this sprite only karena IdCell ini dipakai oleh sprite kloningan, yang mana jika kita memakai sprite kloningan harus menggunakan variable lokal hanya khusus untuk sprite ini. Kalau sudah lanjut kita tempatkan variable tersebut diawal dengan nilai awal 1, kemudian disaat membuat kloningan, seperti gambar berikut;
Kita bisa mengeceknya dengan menambahkan dibawah block puzzle when this sprite clicked dengan Say Variable IDCell. Dengan begitu kita diklik maka akan muncul terlihat ID di setiap cell nya. Mulai dari 1 sampai 9. Seperti terlihat pada gambar diatas.
Buat List ID
Selanjutnya, agar sistem kita bisa mengenali, menyimpan data, dan memrosesnya sehingga bisa di cek siapa pemenangnya, maka kita harus bisa memberikan sebuah instruksi agar setiap Player mengklik cell tsb dapat menyimpan datanya. Contoh jika player 1 mengklik ID Cell no. 5, maka akan disimpan dalam memori sementara bahwa ID Cell no. 5 adalah milik player 1 dengan tanda Silang Merah. Begitu pun sebaliknya player 2 mengklik maka akan disimpan datanya dan seterusnya, hingga ada pemenangnya atau hasil akhirnya adalah seri/imbang.
Untuk itu, kita bisa memanfaatkan fitur Make a List pada variable. Seperti contoh gambar berikut;
Setelah membuat sebuah List untuk menampung data yang diklik oleh player, selanjutnya kita tambahkan kedalam blok kloningan, namun sebelum itu di awal kita definisikan untuk menghapus seluruh list yang ada, seperti gambar berikut;
Store List ID
Selanjutnya kita akan menugaskan untuk mengisi List tersebut dengan data yang di klik oleh Player. Dan nanti akan terlihat pada list tersebut apa yang diklik oleh player tertentu. Contoh Player 1 dengan tanda silang merah ketika jalan pertama kali memilih ID Cell no. 5, maka list no. 5 pun terisi dengan tanda X, begitupun sebalikan misalnya Player 2 dengan tanda lingkaran biru mengklik ID Cell no.9 terisi dengan tanga O. Bagaimana caranya ? kita tambahkan block puzzle replace item of list with thing dibawah puzzle when this sprite clicked seperti pada contoh gambar berikut;
Alhamdulillah, sampai tahap ini kita sudah berhasil memubuat agar setiap ID Cell tersimpan data Player agar bisa dicek dengan suatu kondisi yang jika terpenuhi kondisi tersebut Player tersebut menjadi pemenanangnya.
Untuk lebih memudahkan pengecekan oleh sistem, kita bisa memanfaatkan block puzzle My Blocks. ini seperti membuat sebuah Function.
Buat sebuah Function
Dengan adanya block My Blocks, kita dapat dengan mudah membuat sebuah function yang nantinya bertugas untuk mengecek kondisi permainan. Dimana jika Player tertentun dapat menyusun Cell dengan kondisi dalam setiap baris yang sama, setiap kolom yang sama maupun secara diagonal, maka dialah pemenangnya.
Untuk itu mari kita buat sebuah Functionnya terlebih dahulu seperti berikut;
Isi dari Function tersebut adalah berupa serangkaian kondisi dengan block puzzle IF. sebagai contoh jika kondisi ID Cell 1,2, dan 3 diisi oleh Player 1, maka player 1 lah yang menjadi pemenangnya. Ini baru 1 kondisi, seperti terlihat pada contoh gambar berikut;
Tentunya tidak sampai disitu ya, kita harus mendifinisikan seluruhnya, agar kondisi ketika berhasil menyamakan dalam setiap baris, setiap kolom, maupun secara diagonal maka dialah pemenangnya. Untuk itu kita tambahkan lagi dengan block puzzle IF yang lain. seperti pada contoh berikut;
Kondisi yang lain seperti ini, sama dalam setiap baris dengan ID Cell berikut; 1-2-3, 4-5-6, 7-8-9
Kondisi sama dalam setiap kolom dengan ID Cell berikut; 1-3-7, 2-5-8, 3,6,9
Kondisi sama dalam diagonal dengan ID Cel berikut; 1-5-9, 3,5,7
Itu baru satu player X, bagaimana dengan player O. tentunya sangat panjang jika kita harus membuat kondisi lagi dengan mendefinisikan player O. Oleh karena itu bisa kita optimalkan dengan menggunakan My Block kembali untuk mendefinisikannya. Kita buat kembali My Block dengan nama Check Win, yang berisi block Check Player X dan Check Player O. Seperti gambar berikut;
Setelah kita membuat MyBlock Check Win, selanjutnya kita buat 2 parameter yang di cek, yaitu Player X dan Player O.
Jika sudah mendefinikan Function Check Win, jangan lupa bahwa isi dari function tersebut baru cuma ada player X, yang player O belum ada. untuk itu kita harus rubah menjadi Player dengan memberikan blok Player pada define Check Player seperti berikut ini;
Setelah diganti semua dengan check player, maka sistem akan mengecek dan membroadcast jika salah satu Player memenuhi persyaratan untuk memenangkan permainan, eit tapi tunggu dulu, sampai disini kita baru selesai membuat Functionnya, dan belum terpakai di dalam programnya. Sehingga game sederhana ini belum sepenuhnya selesai.
Cek pemenang dengan memanggil sebuah Function
Alhamdulilah function nya sudah jadi, tinggal kita panggil function tersebut untuk mengecek pemenangnya. Caranya tinggal kita tambahkan ke dalam block puzzle ketika sprite ini di klik, seperti berikut;
Buat Backdrops
Langkah selanjutnya agar tampil siapa yang jadi pemenangnya, kita buat dahulu 4 backdrops, yang terdiri dari; 1. Backdrops Kosong, 2. Backdrops X win, 3. Backdrops O win dan 4. Backdrops Draw jika seri/imbang.
Tampilkan pemenang
Pada tahap ini, kita coba test untuk mencari pemenangnya, atau apakah settingan kondisi yang sudah ditentukan berjalan dengan baik dan benar, inilah saatnya.
Pertama diawal kita setting backdrops kosong, kemudian kita definisikan sebuah penerimaan broadcast untuk menampilkan pemenangnya. seperti berikut;
Silahkan dijalankan dan dimainkan, perhatikan jika player X menang atau player O menang. Untuk seri/draw belum kita definisikan, itu nanti setelah cek pemenang berhasil.
Alhamdulillah sampai tahap ini kita sudah berhasil menyelesaikan kondisi mencari pemenangnya. Tahap finishing terakhir adalah bagaimana kondisi jika tidak ada pemenangnya atau hasil akhir adalah imbang.
Draw
Untuk membuat hasil akhir seri/draw adalah dengan melihat kondisi dimana setiap Cell ID yang diklik sampai akhir cell ID ke-sembilan belum ada player yang menang, maka hal tersebut terjadi kondisi seri/draw. Dengan begitu kita bisa memanfaatkan sebuah variable counter untuk menghitung Cell yang diklik, bila Cell ID yang di klik mencapai jumlah 9, maka bisa dikatakan permainan tersebut berakhir seimbang/seri/draw.
Pertama buat variaable Counter. seperti berikut;
Alhamdulillah, finally akhirnya Project Mini Game Tic Tac Toe selesai.
Penutup
Melalui proyek ini, kita telah belajar bagaimana membuat permainan Tic Tac Toe sederhana menggunakan pendekatan Project Based Learning. Kita telah membahas langkah-langkah mulai dari penyiapan papan, mengatur giliran pemain, hingga pengecekan kondisi pemenang dan seri. Proyek ini tidak hanya melatih keterampilan pemrograman, tetapi juga mengajarkan logika dan problem-solving.
Dengan memahami konsep dasar ini, silahkan teman – teman dapat mengembangkan permainan ini lebih lanjut. Selamat mencoba, teruslah berkarya dan berinovasi!
😉