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

Membuat Game Tic-Tac-Toe yang Cerdas dengan AS3

by
Difficulty:IntermediateLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Johari Triana (you can also view the original English article)

"Tic-Tac-Toe, itu membosankan!" Anda mungkin berpikir. Dalam tutorial ini saya akan menunjukkan kepada Anda bahwa membangun game Tic-Tac-Toe sama sekali tidak membosankan. Ini adalah game yang ideal untuk dibuat ketika Anda ingin belajar ActionScript 3.0. Sementara membangunnya, Anda akan belajar banyak tentang fungsi dan event listener, Anda akan melihat betapa mudahnya untuk menyesuaikan grafik permainan dan Anda bahkan akan belajar cara memprogram Artificial Intelligence (AI)!

Pratinjau Hasil Akhir

Mari kita lihat hasil akhir yang akan kita kerjakan:


Langkah 1: Persiapan

Kami akan mulai dengan membuat file Flash baru (File > New > Flash File (ActionScript 3.0)). Atur dimensi stage ke 300x300 dan gunakan latar belakang hitam. Di properti (Window> Properties), isi "TicTacToe" sebagai definisi kelas. Sekarang simpan file di folder proyek Anda (mis. Desktop\MyFirstGame\) sebagai "TicTacToe.fla".

Selanjutnya, kita akan mengatur file AS3 yang akan kita gunakan. Kami mulai dengan tiga file .as, yang juga kami simpan di folder proyek kami. Tulis kode berikut dan simpan file dengan nama yang sama dengan nama kelas. Jadi kelas TicTacToe yang Anda simpan sebagai "TicTacToe.as", dll.

Kelas pertama, TicTacToe.as, akan menjadi kelas dokumen kami. Tidak yakin apa maksudnya? Baca pengantar cepat ini untuk kelas dokumen.


Langkah 2: Latar Belakang Yang Sedikit Lebih Banyak

Kami sekarang memiliki empat file di folder proyek kami: satu file .fla dan tiga file .as. Ketika Anda menguji Flash movie Anda (Control > Test Movie), Anda akan melihat stage dengan latar belakang hitam dan "TicTacToe" di layar Output (Window > Output). Bagus, tapi apa yang akan kita lakukan dengannya?

File TicTacToe.as akan menangani fungsionalitas menu kami, yang akan kami tulis di akhir tutorial ini (lebih menyenangkan untuk mendapatkan game yang berfungsi secepat mungkin, kan?). Menu hanya akan memiliki dua tombol, satu pemain atau dua pemain.

File Game.as akan menangani game kami. Ini juga mengapa kami meminta argumen "num"; ini akan menentukan jumlah pemain manusia. kami akan mulai dengan 2, tetapi nanti kami juga ingin menulis fungsionalitas ketika hanya ada satu pemain. Dalam hal ini, komputer harus bermain sebagai pemain dua.

File terakhir, Tile.as, akan kami gunakan untuk membuat ubin (Anda dapat menebaknya). Maksud saya, ubin adalah salah satu dari sembilan tempat di mana Anda dapat menempatkan O atau X (atau gambar bunga, hewan peliharaan Anda, logo, sebut saja).


Langkah 3: Grafik Garis Grid

Kami akan mulai dengan membuat garis. Anda bisa menjadi sekreatif yang Anda inginkan, tetapi pastikan garis-garisnya membagi stage menjadi 9 blok yang sama. Inilah yang saya lakukan: Saya membuat MovieClip baru (Insert > New Symbol) dan menggambar 2 garis horizontal dan 2 garis vertikal dengan panjang 300px. Garis horizontal yang saya atur di x = 0 dan (y = 100 || y = 200). Garis vertikal saya atur di (x = 100 || x = 200) dan y = 0.

Di perpustakaan Anda (Window > Library), klik kanan MovieClip baru Anda, pergi ke Properties dan centang kotak yang mengatakan "Export for ActionScript". Isi dengan "Grrid" sebagai definisi kelas.


Langkah 4: Ubin Grafik

Selanjutnya kita akan membuat ubin O dan X. Anda dapat menggunakan gambar apa pun yang Anda inginkan, meskipun Anda harus mengingat satu hal: grid kami membagi stage kami menjadi 9 ubin persegi 100x100px, sehingga setiap ubin tidak boleh lebih besar dari 100x100. Inilah yang saya lakukan: Saya membuat MovieClip baru dan membuat bentuk dengan Rectangle Tool 100x100. Bentuk ini saya selaraskan sehingga bagian kiri atas adalah titik registrasi MovieClip. Warna isian bisa apa saja, tetapi atur ke alpha 0%. Dengan cara ini ubin MovieClip Anda selalu 100x100 dan Anda dapat menggambar gambar apa pun yang Anda inginkan di atas bentuk 100x100.

Anda dapat menghapus latar belakang 100x100 setelah Anda menggambar bentuk X dan O, tetapi itu tidak terlalu menjadi masalah. Ini adalah game kecil sehingga tidak perlu menghapus bentuk dengan mempertimbangkan kinerja. Saya merasa mudah untuk meninggalkannya sehingga saya dapat mengubah grafik di kemudian hari tanpa kehilangan orientasi di mana saya dapat meletakkan semuanya. Anda hanya perlu memilih kedua grafik (bentuk 100x100 dan grafik Anda sendiri) dan menyelaraskannya ke tengah (pastikan Align To Stage tidak aktif), dan Anda selesai.

Ini adalah dua MovieClips yang saya buat. Dua telur kecil di sebelah kanan adalah hasil akhir. Saya tidak akan masuk ke detail tentang cara membuat angka telur keren, tutorial ini adalah tentang membuat game. Percobaan dengan grafik Anda sendiri, dan coba hal-hal baru seperti menggunakan timeline MovieClip Anda.

Ekspor kedua MovieClips untuk ActionScript dengan cara yang sama seperti yang Anda lakukan dengan Grid. Pastikan Anda memberikan nama definisi kelas TileO dan TileX. Kami sekarang memiliki tiga item di perpustakaan kami: Grid, TileO dan TileX. Kita hanya perlu dua lagi sebelum kita bisa membuat skrip!


Langkah 5: Penyorot Grafis

Seperti yang saya katakan, kita hampir siap untuk melakukan beberapa scripting, tetapi kita perlu dua grafik lagi. Ketika seseorang memenangkan game, kami tidak ingin memulai game baru segera tetapi melihat garis game terlebih dahulu. Untuk ini kita memerlukan bentuk untuk posisi di atas ubin ketika ubin adalah bagian dari garis yang menang. Saya hanya ,membuat bentuk 100x100 putih dengan alpha diatur ke 50%, tapi saya tahu Anda bisa melakukan yang lebih baik. Anda dapat membuat tanda V hijau yang bagus, senyum bahagia, apa saja. Ekspor MovieClip untuk ActionScript dengan TileE definisi kelas (E untuk "END"; Saya memiliki sesuatu tentang nama pendek, dan dalam game sederhana seperti ini Anda akan ingat apa artinya).

Grafik terakhir yang perlu Anda buat adalah tombol ": ubin, tempat kami menerapkan semua event listener dalam ubin. Sekali lagi, buat bentuk 100x100 dengan alpha yang disetel ke 0%. Pastikan, seperti semua grafik ubin yang kami buat, bahwa titik pendaftaran diatur ke sudut kiri atas. Ekspor MovieClip untuk ActionScript dengan TileB definisi kelas (B untuk "BUTTON").

Kami sekarang memiliki lima MovieClips di perpustakaan kami yang akan kami gunakan untuk membangun game Tic-Tac-Toe.


Langkah 6: Game Baru

Kami akan mulai dengan lambat. Buka kelas dokumen Anda (TicTacToe.as) dan terapkan perubahan berikut:

Itu saja. Ketika kami sekarang menguji Flash Movie, jendela Output akan menampilkan Game. Kami menyediakan 2 sebagai argumen untuk konstruktor Game() karena kami ingin memulai dengan membangun game untuk dua pemain. Kami juga menambahkan game ke daftar tampilan, tetapi tidak akan melihat apa-apa karena kelas game hanya berisi pernyataan jejak saat ini.


Langkah 7: Ubin!

Akan menyenangkan jika ini adalah langkah 9, bukan?

...

Bagaimanapun! Kami akan menambahkan ubin ke game. Saya akan menambahkan banyak kode sekaligus, dan hasilnya adalah kita tidak akan melihat apa pun kecuali 9 jejak dengan kata "Tile", tapi itu sepadan. Saya akan menjelaskan semua kode, tetapi cobalah membaca dan memahaminya sendiri terlebih dahulu.

Seperti yang Anda lihat, pertama saya membuat beberapa variabel. Variabel numPlayers melacak berapa banyak pemain yang bermain. Kita membutuhkan ini nanti ketika kita menambahkan AI. Hal yang sama berlaku untuk variabel turn, yang mencatat giliran siapa. Kami juga membuat _grid, sebuah instance dari simbol Grid, yang ingin kami tampilkan. Akhirnya, array _tiles akan melacak semua ubin.

Fungsinya adalah teman Anda, jadi saya menulis fungsi baru untuk menambahkan ubin, addVisuals() (Anda dapat menulis semua kode di konstruktor, tetapi ini lebih rapi). Dalam fungsi ini, pertama-tama kita membuat sembilan ubin baru. Posisi x dan y ubin diatur sedemikian rupa sehingga ubin akan diposisikan sebagai keypad ponsel:

Kami menambahkan setiap ubin ke daftar tampilan (yang tidak akan kami lihat, karena ubin belum memiliki visual), dan juga mendorongnya ke daftar _tiles (dalam urutan yang benar, ini sangat penting untuk pemeriksaan AI/menang) kemudian). Panggilan addChild() terakhir adalah untuk grid, yang ingin kami posisikan di atas semua ubin. Terakhir tapi bukan yang akhir, kami menambahkan event listener ke semua ubin dengan fungsi addTileListeners(). Event yang kami dengarkan belum ada, tetapi kami akan mengirimkannya dari kelas ubin nanti. Ketika event dipicu, ia menjalankan fungsi nextTurn yang akan menangani giliran dan memeriksa garis kemenangan. Tentu saja kita memanggil fungsi nextTurn() di dalam konstruktor sehingga kita dapat memulai game.


Langkah 8: AI Permulaan

Dimungkinkan untuk membuat sistem AI yang sangat kompleks, tetapi karena Tic-Tac-Toe adalah game yang agak kecil dengan opsi terbatas, lebih baik mengambil jalan keluar yang mudah. Kami menambahkan semua ubin ke Array _tiles. Ubin pertama (tile1) ditambahkan pertama, sehingga memiliki index = 0. Ubin kedua memiliki index = 1, dll. Jika kita memvisualisasikan ini di layar, akan terlihat seperti ini:

Inilah cara kami akan memeriksa apakah seseorang memiliki tiga berturut-turut: kami membuat array dari semua kombinasi yang memungkinkan Anda dapat menang. Sebagai contoh, 0 1 2 adalah kombinasi pemenang, dan begitu juga 1 4 7 dan 2 4 6(diagonal). Tambahkan variabel berikut ke skrip Game.as Anda:

Kemudian, kami akan memeriksa index semua ubin O dan X di dalam array _tiles. Ketika index, misalnya, empat ubin X adalah 0 4 5 dan 8, kita dapat memeriksa apakah kombinasi yang menang cocok dengan index ini. Misalnya, ada 0, tetapi tidak 1 dan 2, jadi ubin X tidak cocok dengan kombinasi pemenang 0 1 2. Kami akan melakukan ini untuk setiap kombinasi, dan pada akhirnya akan melihat bahwa kombinasi 0 4 8 telah dibuat. Script untuk ini akan diberikan beberapa langkah kemudian.


Langkah 9: .. Ubin di Layar!

Lagipula harus membuat lelucon. Saya mungkin membuat Anda takut dengan kode berikut untuk Tile.as, tetapi saya akan bertanya sekali lagi: coba cari tahu sendiri dan setelah membaca komentar saya pada kode. Ini mungkin tampak banyak, tetapi jika Anda membacanya dan membaca komentar Anda akan memahami cara kerjanya.

Apakah Anda sudah mengujinya? Karena jika semuanya berjalan dengan baik, Anda akan melihat game yang berfungsi sekarang! Mari kita bahas skripnya sebentar.

Kami mulai dengan membuat semua gambar. Masing-masing dari sembilan ubin memiliki grafis TileB, TileE, TileX dan TileO. Di konstruktor (fungsi publik Tile()) kami menambahkan grafik ini ke daftar tampilan dan mengatur visibilitas ke false. Hanya grafik TileB yang tetap pada visible = true, karena kami ingin menambahkan event listener kami ke grafik ini. Tidak masalah; itu sebabnya kami mengatur alpha ke 0%.

Baik fungsi addButtonListeners() dan removeButtonListeners() berbicara sendiri. Saat kami menempatkan mouse di atas ubin, kami ingin grafik yang benar ditampilkan. Saat kami memindahkan mouse dari ubin, kami ingin menyembunyikan gambar. Ketika kami mengklik, kami ingin itu menunjukkan grafik dan membuatnya tetap terlihat sehingga pemain berikutnya dapat bermain. Kami melakukan ini dengan operator modulo.

Dalam komputasi, operasi modulo menemukan sisa pembagian satu angka dengan yang lain - Wikipedia.

Saat kami mengeklik ubin, fungsi chooseGraphic(e:MouseEvent) menjadi pemicu. Dalam fungsi ini kami menghapus semua lisener, mengatur variabel isSet (melacaknya) dan menjalankan event TILE_ACTIVE. Langkah selanjutnya: periksa siapa yang menang!


Langkah 10: Game Bagus!

Mari kita mulai dengan mudah: tambahkan skrip berikut ke file Tile.as untuk menangani situasi kemenangan:

Mudah bukan? Ini adalah fungsi publik sehingga kami dapat memanggilnya dari kelas Game, dan yang dilakukannya hanyalah mengatur visibilitas tileE menjadi true. Sekarang buka Game.as lagi dan bersiaplah untuk beberapa skrip serius. Kami akan menambahkan satu variabel, mengedit fungsi nextTurn() dan menambahkan dua fungsi baru:

Kita mulai dengan variabel left. Ketika ini mencapai nol, itu berarti tidak ada ubin lagi yang tersisa dan game berakhir. Biasanya ini berarti seri.

Selanjutnya adalah fungsi nextTurn(e: Event = null), yang pertama hanya turn += 1 di dalamnya. Seperti yang Anda lihat, sekarang memiliki lebih banyak kondisi. Setiap kali fungsi dipanggil, kami memeriksa apakah seseorang menang. Jika tidak, kami tahu ada satu petak yang lebih sedikit untuk dipilih, jadi kami lakukan left  -= 1. Selama ada ubin yang tersisa, kami dapat membiarkan pemain lain melakukan langkahnya. Tidak ada ubin yang tersisa berarti akhir game (seri, karena kami hanya mencapai bagian skrip ini jika belum ada situasi kemenangan).

Fungsi checkWin() paling baik dijelaskan dengan sebuah contoh. Mari kita ambil situasi berikut:

Tile1 memiliki index 0 di dalam array _tiles. Yang pertama untuk pernyataan for each memeriksa semua Array yang bersarang di dalam array _combos. Yang pertama berisi "0 1 2". Yang pernyataan each kedua menangani angka-angka ini (yang mewakili index ubin). Inilah yang terjadi pada pernyataan for each kedua:

Seperti yang Anda lihat, ketika pernyataan for each kedua selesai, xwin akan true dan owin akan false. Ini memicu pernyataan if dan panggilan untuk fungsi endGame(combi: Array = null). Dengan itu, ia memasukan kombinasi pemenang yang akan kami gunakan dalam fungsi. Fungsi checkWin() mengembalikan true atau false, yang saya jelaskan sebelumnya.

Fungsi endGame() mudah dimengerti. Pertama, untuk setiap ubin di Array _tiles, kami menonaktifkan event listener. Kami juga memeriksa apakah ada kombinasi yang disediakan (artinya seseorang menang bukannya seri). Jika demikian, kami memeriksa ubin mana yang merupakan bagian dari kombinasi dan memanggil fungsi showEnd() pada ubin tersebut. Ini akan menampilkan grafik 'TileE'.


Milestone 1

Kami sekarang memiliki game yang berfungsi. Untuk sumber dari semua yang kami lakukan sejauh ini, periksa _milestone1.zip. Hasil!


Langkah 11: Fungsi AI

Saya harap Anda tidak bingung dengan semua skrip yang kami lakukan sejauh ini. kami akan melanjutkan dengan bagian AI dari game, yang membutuhkan beberapa fungsi. Pertama, mari kita buat beberapa perubahan dan tambahkan fungsi untuk menambahkan AI. Di TicTacToe.as, ubah baris berikut:

Selanjutnya, di Game.as, tambahkan variabel berikut:

Dalam fungsi addVisuals(), tambahkan baris berikut (setelah Anda mendorong ubon ke Array _tiles):

Kemudian ubah fungsi nextTurn(e: Event = null) menjadi yang berikut:

Tentu saja, tambahkan juga fungsi handleAI() ke kelas Game.as:

Saat kami sekarang menguji Flash movie, setelah giliran pertama kami, kami melihat tiga daftar di Jendela Output kami. Panjang _xlist akan menjadi satu elemen (Anda memilih ubin untuk ditandai). _olist kosong (pemain dua belum mengambil ubin) dan _flist panjangnya delapan elemen (masih ada delapan ubin yang bisa dipilih). Kami akan menggunakan daftar ini di langkah berikutnya untuk membiarkan AI memilih ubin.


Langkah 12: AI Seberapa Cerdas?

Ada banyak cara untuk skrip perilaku komputer. Seperti yang mungkin Anda ketahui, jika kedua pemain memperhatikan dan mengetahui aturannya, permainan Tic-Tac-Toe selalu berakhir imbang. Kami hanya dapat membuat skrip semua situasi sehingga hasilnya selalu imbang atau menang untuk komputer. Tapi apa yang menyenangkan dari itu? Saya memilih untuk membuat AI yang tidak pintar, tetapi juga tidak bodoh. Ini adalah aturan yang akan kami tulis:

  • untuk setiap ubin bebas, pilih jika ubin ini ditambah semua ubin yang sudah dipilih memenangkan permainan
  • untuk setiap ubin bebas, pilih jika ubin ini ditambah semua ubin yang sudah dipilih memenangkan game
  • jika tidak, pilih ubin bebas acak

Jadi komputer pertama-tama harus memeriksa apakah ia dapat memenangkan game. Jika komputer tidak bisa menang dengan ubin bebas ini, itu harus memeriksa apakah pemain manusia bisa menang dengan ubin ini. Ketika komputer maupun pemain manusia tidak bisa menang, itu harus memilih ubin acak. Kita bisa membuatnya berpikir di depan, dan alih-alih memilih ubin acak, biarkan ubin itu memilih dari ubin yang memungkinkan untuk memenangkan ronde berikutnya. Tetapi sekali lagi, kami tidak akan melakukan itu karena itu akan membuat game cukup membosankan.


Langkah 13: AI Mengaktifkan Ubin

Tidak ada yang lebih mudah dari langkah ini. Kita harus mengaktifkan ubin agar komputer dapat menandainya. Biasanya, ketika kami bermain dengan dua pemain, mouse digunakan untuk memicu pertukaran grafik dan mengirimkan event yang mengatur pergantian ke plus satu. Karena komputer tidak menggunakan MouseEvents, kita perlu mengubah dua fungsi di Tile.as sehingga mereka dapat digunakan dari file Game.as. Ini adalah fungsi-fungsi tersebut:

Dengan cara ini, kita dapat memanggil fungsi showGraphic() dan selectGraphic() (karena bersifat publik) tanpa pasokan MouseEvent (karena jika tidak dimasukan, kami menyediakan nul).


Langkah 14: Skrip AI

Mari kita menulis skrip untuk AI sekarang. Ini adalah tampilan file Game.as Anda. Saya sudah menulis komentar di samping setiap baris yang saya ubah.

Ambil napas dalam-dalam. Perubahan pertama yang harus saya jelaskan adalah pada fungsi handleAI, yang memicu ketika komputer harus memilih ubin. Kami menggunakan variabel _choose di sini dan mengaturnya ke false (komputer belum memilih ubin). Kami kemudian menghapus semua listener dari ubin bebas. Dengan cara ini, pemain manusia tidak dapat mengklik kapan saja untuk bergerak ke komputer. Terakhir namun tidak kalah pentingnya, kami mengatur timer. Saya melakukan ini karena terlihat sedikit lebih keren jika komputer benar-benar "berpikir" tentang kepindahannya. Script untuk membuat pilihan akan dijalankan dalam beberapa milidetik, tetapi dengan cara ini Anda dapat membuatnya terlihat benar-benar membutuhkan sesuatu untuk dipikirkan.

Perubahan besar kedua adalah fungsi handleAIChoice. Saya menambahkan komentar yang harus menjelaskan semuanya di sini. Kami menggunakan trik concat() untuk membuat salinan _olist dan _xlist (var copy = original tidak menyalin array original! Jika Anda memodifikasi copy, Anda juga akan memodifikasi yang original). Bagian yang paling penting adalah panggilan ke fungsi checkWin(), yang kami berikan semua ubin X atau O yang sudah dipilih dengan ubin bebas (kami melakukan ini untuk setiap ubin bebas).

checkAIWin() terlihat seperti fungsi checkWin() yang kami buat sebelumnya, tapi kali ini kami menyediakan array. Kami tidak akan memeriksa semua ubin X atau O, tetapi untuk array ubin yang kami berikan (yang berarti: semua ubin X ditambah satu ubin bebas, atau semua ubin O ditambah satu ubin bebas). Jika array yang disediakan berisi semua ubin yang diperlukan untuk kombinasi yang menang, variabel win akan tetap true. Jika tidak, ini akan disetel ke false.

Dalam kasus win == true, ini artinya ubin bebas akan menciptakan situasi kemenangan. Komputer selalu ingin memilih ubin ini, karena jika itu membuat komputer menang, itu bagus. Dan jika ubin bebas memungkinkan pemain manusia menang, itu harus memblokir ubin bebas sehingga pemain manusia tidak bisa menang.


Milestone 2

Kami sekarang memiliki game yang berfungsi dengan AI. Untuk semua yang kami lakukan sejauh ini, periksa _milestone2.zip. Hasil!


Langkah 15: Menu Grafik

Buat dua Tombol untuk tombol "One Player" dan tombol "Two Players". Ekspor mereka untuk ActionScript dengan nama kelas B1 dan B2 (B untuk "Button"). Ini milik saya:


Langkah 16: Menambahkan fungsionalitas menu

Tentu saja, menu Anda harus ditambahkan ke stage dan bekerja. Ini cukup mudah (ya, Anda bisa santai, bagian yang sulit sudah selesai). Lihatlah file TicTacToe.as Anda dan tulis kode berikut:

Karena semua skrip di atas adalah baru, saya tidak menulis baris komentar apa pun. Pertama, kami membuat tiga variabel. Kami membuat tombol dan variabel game. Dalam konstruktor (TicTacToe()) kami mengatur posisi x dan y dari tombol kami. Pastikan Anda memposisikan tombol Anda sendiri pada koordinat yang benar. Kemudian kami menambahkan tombol ke daftar tampilan dan menambahkan listener MouseEvent. Terakhir, kami memanggil fungsi addMenu().

Di startGame(e: MouseEvent) kami mengatur kedua tombol menjadi visible = false. Dengan cara ini, kita tidak akan melihatnya lagi. Jika Anda ingin melewati bagian ini, Anda harus memastikan Grid MovieClip memiliki latar belakang yang solid. Anda tidak akan dapat melihat tombol itu, karena Anda menempatkan game di atasnya. Saya lebih suka memastikan (Anda mungkin ingin memposisikan game Anda di tempat lain) dan mengatur visibility ke false. Kami kemudian memeriksa tombol mana yang telah ditekan. Jika b1, kami ingin memanggil new Game(1) (1 pemain, vs komputer). Jika tidak, kami membutuhkan new Game(2) (2 pemain manusia). Lalu kami menambahkan event listener RESTART ke game, sehingga kami dapat memeriksa kapan game selesai. Terakhir tapi bukan yang akhir: tambahkan game ke daftar tampilan sehingga kita benar-benar bisa bermain.

Fungsi addMenu(e: Event = null) tidak banyak membantu. Ini dipanggil pertama kali kami membuka Flash Movie kami, dan setiap kali game berakhir. Pertama-tama memeriksa apakah ada game, dan jika demikian itu menghapusnya dari daftar tampilan dan mengatur game ke null. Selanjutnya mengatur visibilitas tombol menjadi true sehingga kita dapat mengkliknya lagi.


Langkah 17: Ini Tidak bekerja!

Saat Anda menguji game, itu berfungsi dengan baik. Tetapi ketika Anda menyelesaikan game pertama Anda, itu tidak menampilkan menu. Ini karena kami belum menambahkan dispatcher event RESTART ke file Game.as. Ayo lakukan itu. Dalam fungsi endGame(combi: Array = null), tambahkan baris berikut:

Ini memulai penghitung waktu 1,5 detik (sehingga Anda akan memiliki waktu untuk melihat siapa yang benar-benar menang). Selanjutnya, buat fungsi yang dipanggil oleh timer:

Semua fungsi ini adalah mengirimkan event RESTART, yang kami tunggu di kelas TicTacToe. Game selesai!


Milestone 3

Kami sekarang memiliki game yang berfungsi dengan AI dan menu. Untuk semua yang kami lakukan sejauh ini, periksa _milestone3.zip. Hasil!


Langkah 18: Bisakah Anda Menemukan Bugnya?

Saya harap Anda masih bersama kami. Kami memang memiliki game yang berfungsi sekarang, tetapi jika Anda menguji game tersebut secara berlebihan, Anda mungkin telah menemukan bug. Komputer AI memeriksa setiap ubin bebas jika itu bisa menang dengan ubin itu. Jika tidak, ia memeriksa apakah bisa hilang oleh ubin itu. Jadi pikirkan: komputer dapat memilih ubin, dan bisa menang dengan ubin 4. Ini juga bisa kalah dengan ubin 2. Jadi ketika memeriksa ubin 2, itu akan memilih ubin itu karena akan kehilangan putaran berikutnya jika tidak , jangan pernah mencapai centang pada ubin 4 yang dengannya memenangkan putaran ini. Solusi: periksa dulu semua ubin bebas untuk situasi menang. Kemudian periksa situasi yang hilang. Ini akan menjadi fungsi handleAIChoice(e: TimerEvent) Anda yang baru (bagi yang pernyataan for pertama menjadi dua):


Langkah 19: Saran Grafik

Meskipun ini tutorial, saya suka melihat orang-orang mempelajari sesuatu dan membangunnya. Untuk membantu Anda dalam perjalanan, saya akan menulis beberapa saran tentang hal-hal yang dapat Anda ubah dan/atau tambahkan.

Secara visual, Anda memiliki sedikit keterbatasan. Perhatikan bahwa Anda dapat mengedit MovieClips dari Grid, Ubin, dan Tombol. Jangan membatasi diri Anda pada satu frame: aset ini adalah MovieClips karena suatu alasan. Misalnya, Anda dapat membuat animasi burung terbang dan menggunakannya sebagai Ubin. Anda dapat membuat warna Grid berubah, biarkan Tombol Anda terpental, namai itu. Anda dapat membuat Loading MovieClip yang bagus dan menambahkannya ke game. Atur visibilitasnya ke false, dan menjadi true saat komputer "berpikir". Daripada mengakhiri permainan dengan jeda, perlihatkan gambar siapa yang menang dengan kembang api dan orang-orang bersorak. Jadilah kreatif.


Langkah 20: Saran Skrip

Meskipun Anda sudah memiliki game Tic-Tac-Toe yang berfungsi, Anda selalu dapat menambahkan lebih banyak fungsi dan mengubah fungsi yang sudah dimilikinya. Misalnya, alih-alih aturan yang saya berikan kepada Anda, Anda bisa membuat aturan baru untuk AI. Selalu pilih sudut pertama. Mulailah dengan ubin tengah jika tersedia. Atau biarkan komputer berpikir selangkah lebih maju - Anda setengah jalan di sana!

Saran lain yang bisa saya buat, adalah secara acak memutuskan siapa yang akan mulai ketika Anda bermain versus komputer. Ini mungkin terlihat cukup mudah, tetapi pastikan Anda memikirkannya. Itu dimulai dengan mengubah baris berikut di Game.as:


if (turn % 2 == 0 && numPlayers == 1) handleAI(); // Change turn % 2 == 0 to turn % 2 == randomBegin

Di konstruktor Game(num: uint), atur randomBegin menjadi 0 atau 1. Ini semua yang perlu Anda lakukan, tetapi lihat fungsi handleAIChoice kami. Dalam fungsi ini pertama-tama kita memeriksa situasi menang untuk O, kemudian untuk X. Ini benar ketika komputer bermain dengan ubin O, tetapi ketika Anda membuat bagian ini acak ... Jadi, mungkin mengubah dua pernyataan for menjadi fungsi dan memanggil mereka dalam urutan yang benar, tergantung pada randomBegin.


Kesimpulan

Saya sangat berharap Anda menyukai tutorial ini. Ini adalah pertama saya, saya mencoba untuk tetap sederhana tetapi menyenangkan dan saya harap saya berhasil. Jika Anda memiliki pertanyaan tentang tutorial ini, silakan tinggalkan komentar di sini. Saya juga ingin melihat apa yang Anda buat dengan bantuan tutorial ini, jadi jangan ragu untuk mengirim URL ke proyek Anda.

Terima kasih telah membaca dan menikmati Flash dan ActionScript!

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.