Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Games
Code

Membangun Permainan Snake Klasik di AS3

by
Difficulty:IntermediateLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Ari Ana (you can also view the original English article)

Dalam tutorial ini saya ingin menunjukkan kepada Anda betapa mudahnya membuat permainan "Snake" klasik dalam Flash. Saya akan mencoba menjelaskan semuanya dengan mudah, selangkah demi selangkah, sehingga Anda dapat mengembangkan permainan lebih lanjut untuk kebutuhan Anda! Permainan ini akan dikembangkan di AS3 dan saya akan menggunakan IDE FlashDevelop.


Perkenalan

Permainannya tidak akan rumit. Setiap kali kita menabrak dinding, itu akan memulai kembali permainannya. Setelah memakan apel, ular akan tumbuh, dan Apple 'baru' akan muncul. (Sebenarnya, itu akan menjadi apel yang sama, tapi saya akan menjelaskannya nanti.)

Salah satu aspek terpenting dari permainan ini adalah reaksi kode terhadap peristiwa KEY_DOWN. Ular hanya akan mengubah arahnya setelah tanda tick berlalu, tidak segera setelah penekanan tombol. Ini berarti bahwa, jika ular itu berjalan dengan benar, dan Anda menekan ke bawah dan kiri dengan sangat cepat, ular itu akan turun, bukan ke bawah DAN kiri. Tanpa 'fitur' ini ular akan memungkinkan kita untuk pergi ke kiri ketika kita berjalan ke kanan, yang berarti itu menghantam dirinya sendiri.


Mari Lihat Permainan Ini!

Mari kita lihat hasil akhir yang akan kita jalani:


Langkah 1: Membuat Proyek

Di FlashDevelop, buat Project baru, dan di dalam folder 'src' buat folder 'com'. Di folder 'com' buat kelas baru, dan beri nama 'Element.as'.

Atur dimensi proyek menjadi 600x600px.

The FlashDevelop project structure

Langkah 2: Tunggu... Apa itu Elemen?

Ular itu membentuk kotak biru, yang saya sebut elemen. Kita akan membuat Kelas Element, yang menggambar elemen. Apel merah juga akan menjadi elemen, jadi kita akan memperpanjang kode dengan beberapa baris lagi.

Oleh karena itu kita tidak akan membuat kelas baru untuk apel. (Tetapi jika Anda benar-benar ingin, Anda bisa.)


Langkah 3: Menulis Kelas Element

Kelas Element menciptakan persegi. Itu tidak menggambarnya di atas panggung, itu hanya menciptakannya. Titik registrasi elemen - posisi yang dimaksud oleh koordinat x dan y - berada di kiri atas.

Setelah membuka Element.as Anda akan melihat sesuatu seperti ini:

Pertama kita membutuhkan ini untuk memperluas kelas Shape, jadi kita bisa menggunakan obyek graphics untuk menggambar persegi. Setelah ini, buat dua variabel: satu untuk arah (jika itu bagian dari ular), dan satu untuk nilai skor (jika itu apel), dan kemudian ubah parameter fungsi constructor:

Sekarang isi fungsi dengan beberapa kode:

Sekarang, setiap kali kita membuat elemen, itu akan menggambar persegi panjang dan mengatur nilai skor dari elemen ke 0 secara default. (Ia tidak akan menempatkan persegi panjang di atas panggung, itu hanya menggambarnya di dalam dirinya sendiri. Perhatikan bahwa kita belum memanggil fungsi addChild().)

Mari selesaikan kelas ini dan akhirnya kita bisa menguji seberapa banyak yang sudah kita lakukan:

Kita menciptakan empat fungsi untuk mengubah arah dan nilai dari apel. Kita mencapai ini dengan menggunakan setter dan getter. Lebih lanjut tentang Setter/Getter di artikel ini!


Langkah 4: Menguji Kelas Element

Buka Main.as sekarang.

Impor kelas com.Element dan buat Element dalam fungsi init():

Pertama kita membuat variabel testElement yang memegang elemen kita. Kita membuat Element baru dan menetapkan itu ke variabel testElement kita. Perhatikan argumen yang kita kirimkan: pertama kita berikan warna, lalu alfa, lebar, dan tinggi. Jika Anda melihat pada fungsi Element di kelas Element, Anda dapat melihat bagaimana menggunakan data ini untuk menggambar persegi panjang.

Setelah membuat Element, kita memposisikannya dan meletakkannya di atas panggung!


Langkah 5: Mengatur Variabel

Lihatlah kode berikut. Saya menulis fungsi variabel di setelahnya (perhatikan bahwa kita mengimpor kelas yang diperlukan juga):

Variabel yang paling penting adalah snake_vector. Kita akan menempatkan setiap Element dari ular di Vector ini.

Lalu ada markers_vector. Kita akan menggunakan penanda untuk mengatur arah dari bagian-bagian ular. Setiap obyek dalam Vector ini akan memiliki posisi dan tipe. Tipe ini akan memberi tahu kita apakah ular harus pergi ke kanan, kiri, atas, atau ke bawah setelah 'memukul' obyek. (Mereka tidak akan bertabrakan, hanya posisi penanda dan bagian ular yang akan diperiksa.)

Sebagai contoh, jika kita menekan DOWN, sebuah obyek akan dibuat. X dan y dari obyek ini akan menjadi koordinat x dan y kepala ular, dan jenisnya akan "Down". Setiap kali posisi salah satu Element ular sama dengan objek ini, arah elemen ular akan diatur ke "Down".

Silakan baca komentar di sebelah variabel untuk memahami apa yang dilakukan variabel lain!


Langkah 6: Menulis Fungsi attachElement()

Fungsi attachElement() akan mengambil empat parameter: elemen ular baru, koordinat x dan y, dan arah bagian terakhir dari ular.

Sebelum kita meletakkan elemen di atas panggung kita harus memposisikannya. Tetapi untuk ini kita memerlukan arah elemen terakhir ular, untuk mengetahui apakah elemen baru harus berada di atas, di bawah, atau di samping ini.

Setelah memeriksa arah dan mengatur posisi, kita bisa menambahkannya ke panggung.

Sekarang kita dapat menggunakan fungsi ini dalam fungsi init():

Kita membuat 10 Element pertama, dan mengatur arah mereka ke 'R' (kanan). Jika ini adalah elemen pertama, kita memanggil attachElement() dan kita mengubah alpha-nya sedikit (jadi "head" adalah warna yang sedikit lebih terang).

Jika Anda ingin mengatur posisi di tempat lain, maka ingatlah hal-hal berikut: ular harus diletakkan di atas grid, jika tidak maka akan terlihat buruk dan tidak akan berfungsi. Jika Anda ingin mengubah posisi x dan y Anda dapat melakukannya dengan cara berikut:

Mengatur posisi x: (snake_vector[0].width+space_value)*[UINT], di mana Anda harus mengganti [UINT] dengan bilangan bulat positif.

Mengatur posisi y: (snake_vector[0].height+space_value)*[UINT], di mana Anda harus mengganti [UINT] dengan bilangan bulat positif.

Mari kita ubah ke ini:

Dan elemen pertama ular diatur ke ruang 20 di x-grid dan 10 ruang di y-grid.

Inilah yang telah kita dapat sejauh ini:


Langkah 7: Menulis Fungsi placeApple()

Fungsi ini melakukan hal berikut:

  1. Ini memeriksa apakah apel itu tertangkap. Untuk ini kita akan menggunakan parameter caught, dan mengatur nilai defaultnya ke true, jika kita tidak melewatkan nilai apa pun sebagai parameter di masa depan. Jika tertangkap, itu menambah 10 nilai skor apel (jadi apel berikutnya bernilai lebih).
  2. Setelah ini apel harus direposisi (kita tidak membuat apel baru) pada posisi grid acak.
  3. Jika ditempatkan pada ular, kita harus menempatkannya di tempat lain.
  4. Jika belum di atas panggung, kita letakkan di sana.

Akan ada beberapa matematika di sini, tetapi jika Anda memikirkannya, Anda harus memahami mengapa demikian. Hanya menggambar di beberapa kertas jika perlu.

  • boundsX akan menampung berapa banyak elemen yang dapat digambar dalam satu baris.
  • randomX mengambil boundsX ini, mengalikannya dengan Angka antara nol dan satu, dan membulatkan kebawah. Jika boundsX adalah 12 dan Angka acak adalah 0,356, maka floor(12*0,356) adalah 4, sehingga apel akan ditempatkan pada tempat ke-4 pada x-grid.
  • boundsY akan menampung berapa banyak elemen yang dapat digambar dalam satu kolom.
  • randomY mengambil boundsY ini, mengalikannya dengan Angka antara nol dan satu, dan membulatkan kebawah.
  • Kemudian kita menetapkan posisi x dan y ke angka-angka ini.

Dalam perulangan for, kita memeriksa apakah posisi x dan y apel yang baru identik dengan salah satu elemen snake_vectors. Jika demikian, kita memanggil fungsi placeApple() lagi (fungsi rekursif), dan mengatur parameter ke false. (Artinya apel itu tidak tertangkap, kita hanya perlu memposisikan ulang)

(apple.stage) mengembalikan nilai true jika apel ada di panggung. kita menggunakan operator '!' untuk membalikkan nilai itu, jadi jika TIDAK di atas panggung, kita letakkan di sana.

Hal terakhir yang perlu kita lakukan adalah memanggil fungsi placeApple() di akhir fungsi init().

Perhatikan bahwa kita melewatkan false sebagai parameter. Ini logis, karena kita tidak menangkap apel dalam fungsi init(). Kita hanya akan menangkapnya dalam fungsi moveIt().

Sekarang hanya ada tiga fungsi untuk menulis: fungsi directionChanged(), moveIt() dan gameOver().


Langkah 8: Memulai Fungsi moveIt()

Fungsi moveIt() bertanggung jawab untuk semua pergerakan. Fungsi ini akan memeriksa batas dan memeriksa apakah ada obyek pada posisi x dan y dari kepala ular. Itu juga akan mencari apel di posisi ini.

Untuk semua ini, kita akan menggunakan variabel timer kita.

Tambahkan dua baris lagi di akhir fungsi init():

Lihatlah komentar-komentar di source code, untuk melihat blok kode mana yang melakukan apa.

Sekarang kita perlu mengkodekan pergerakannya. Untuk ini kita melompat ke blok switch, yang akan berjalan pada setiap bagian ular, karena perulangan for.

Pertama kita perlu memeriksa arah elemen saat ini.

Ketika arah bagian diatur ke "R", misalnya, kita perlu menambahkan sesuatu ke posisi X saat ini (nilai space_value plus lebar bagian ular).

Dengan pemikiran ini, kita bisa mengisinya:

Setelah menguji kode, Anda harus melihat bahwa ular bergerak, dan pergi keluar dari panggung dan tidak pernah berhenti. (Anda mungkin perlu menyegarkan halaman - atau klik saja di sini untuk memuatnya di jendela baru.)

Jadi kita harus menghentikan ular itu


Langkah 9: Menulis Fungsi gameOver()

Fungsi ini akan menjadi yang terpendek. Kita hanya membersihkan panggung dan memulai kembali:

Itu saja. Kita mengatur variabel dead menjadi true, menghentikan pergerakan dengan timer, menghapus setiap anak dari kelas dan memanggil fungsi init(), seperti kita baru saja memulai permainan.

Sekarang, mari kita kembali ke fungsi moveIt().


Langkah 10: Melanjutkan Fungsi moveIt()

Kita akan menggunakan fungsi gameOver() di dua tempat. Yang pertama adalah ketika kita memeriksa apakah kepala berada di luar batas, dan yang kedua adalah ketika ular menyerang dirinya sendiri:

Ini adalah kode yang kita miliki sekarang:


Langkah 11: Fungsi directionChanged()

Kita ingin listen ke keyboard, jadi kita benar-benar dapat mengendalikan ular. Untuk ini kita perlu memasukkan beberapa kode ke fungsi init() dan fungsi gameOver().

Taruh ini di akhir fungsi init() (mengatur fungsi listener):

Dan ini di akhir fungsi gameOver():

Sekarang buat fungsi baru:

Apa yang masuk ke blok if?

  • Arah kepala harus ditulis ulang.
  • Obyek penanda harus diatur dengan benar.
  • Variabel last_button harus disetel ke tombol terakhir yang ditekan.

Ulangi ini tiga kali lagi, dan kita akan memiliki ini:

Kita membutuhkan satu hal lagi untuk mengujinya. Dalam fungsi moveIt() kita memiliki sesuatu seperti ini:

Di sini kita perlu perulangan lagi, untuk memeriksa setiap bagian ular terhadap setiap penanda di atas panggung, dan memeriksa apakah mereka bertabrakan. Jika iya, kita perlu mengatur arah bagian ular ke jenis penanda. Jika ini adalah bagian ular terakhir yang bertabrakan dengan penanda, kita perlu menghapus penanda dari markers_vector, juga, sehingga bagian ular tidak bertabrakan dengannya lagi.

Sekarang jika Anda bermain dengannya itu terlihat baik-baik saja, tetapi ada bug di sana. Ingat apa yang saya katakan di awal tutorial?

Sebagai contoh, jika ular bergerak ke kanan dan Anda menekan kombo turun-kiri dengan sangat cepat, ia akan memukul dirinya sendiri dan memulai kembali permainan.

Bagaimana kita memperbaikinya? Itu mudah. Kita memiliki variabel flag kita, dan kita akan menggunakannya untuk ini. Kita hanya akan dapat mengubah arah ular ketika ini diatur ke true (Default adalah false, periksa fungsi init() untuk itu).

Jadi kita perlu mengubah fungsi directionChanged() sedikit. Kepala blok if harus diubah: tambahkan sebuah klausa && flag di akhir setiap 'if'.

Jika Anda mengujinya sekarang, itu tidak akan berhasil karena penandanya selalu false.

Kapan kita perlu mengaturnya menjadi true?

Setelah pindah/tick kita dapat mengizinkan pengguna untuk mengubah arah, kita hanya tidak ingin mengubahnya dua kali dalam satu tick. Jadi letakkan ini di akhir fungsi moveIt():

Sekarang uji, dan tidak ada bug lagi.


Langkah 12: Menyelesaikan Permainan

Sekarang satu-satunya hal yang perlu kita lakukan adalah 'apple-check'

Ingat ini di awal fungsi moveIt()?

Inilah yang perlu kita lakukan di sana:

  • Memanggil fungsi placeApple(). (Kita tidak menetapkan parameter ke false; kita membiarkannya seperti itu. Default adalah true.)
  • Menampilkan skor saat ini
  • Lampirkan elemen baru ke bagian terakhir ular.

Sekarang semuanya harus berfungsi dengan baik. Cobalah:

Di sini adalah seluruh kelas Main lagi:


Langkah 13: Menyimpulkan Semuanya

Selamat! Anda baru saja membuat permainan yang bagus. Sekarang Anda bisa mengembangkannya lebih jauh, dan membuat apel super atau sesuatu. Untuk itu saya sarankan menggunakan fungsi lain yang bernama placeSuperApple() dan kelas baru bernama SuperApple. Setiap kali Anda menangkap apel super, bagian ular bisa diperpanjang oleh tiga elemen, mungkin. Ini bisa diatur dengan setter/getter di kelas SuperApple.

Jika Anda ingin melakukan ini, dan Anda terjebak di suatu tempat, tinggalkan saja saya komentar di sini.

Terima kasih atas waktu Anda!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.