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

AS3 101: Array - Basix

by
Read Time:31 minsLanguages:
This post is part of a series called AS3 101.
AS3 101: Branching - Basix
AS3 101: Loops - Basix

Indonesian (Bahasa Indonesia) translation by Andy Nur (you can also view the original English article)

Dalam tahapan AS3 101 ini, kita akan menghabiskan seluruh tutorial mengeksplorasi satu jenis data yang tersedia untuk sebagian besar bahasa pemrograman: Array.

Array adalah cara untuk menyimpan daftar nilai. Array berguna untuk menjaga jumlah item terkait yang berubah-ubah dikelompokkan bersama, dan dapat mewakili struktur data yang rumit saat bersarang. Dalam ActionScript, Array memiliki sedikit fleksibilitas dan fungsionalitas, seperti yang akan kita lihat. Setelah pengantar abstrak yang biasa, kita akan menerapkan apa yang telah kita pelajari (sementara juga belajar lebih banyak di sepanjang jalannya) dengan membangun permainan puzzle yang agak sederhana.

Langkah 1: Jadi Apa itu Array?

Sedikit basi untuk memulai dengan "Kamus Amerika Oxford Baru mendefinisikan Array sebagai..." tetapi saya tetap akan melakukannya.

Seperti yang kamu lihat, intinya adalah bahwa array adalah kumpulan hal-hal, biasanya jenis yang sama: array literatur, array pasukan, array juri.

Halaman Wikipedia tentang array pada umumnya menampilkan beberapa penggunaan istilah yang menarik di semua jenis industri. Artikel khusus untuk ilmu komputer membahas beberapa ide konseptual dan tingkat rendah yang masuk ke dalam array.

Penggunaan non-pemrograman favorit saya dari array kata adalah Very Large Array, kumpulan 27 antena yang membentuk sebuah observatorium radio di New Mexico. Jika Anda pernah melihat Kontak film, kamu tahu apa ini. Dari situs web resmi VLA:

VLA adalah interferometer; ini berarti bahwa ia beroperasi dengan mengalikan data dari setiap pasangan teleskop bersama-sama untuk membentuk pola interferensi. Struktur pola interferensi tersebut, dan bagaimana mereka berubah seiring waktu ketika bumi berputar, mencerminkan struktur sumber radio di langit: kita dapat mengambil pola-pola ini dan menggunakan teknik matematika yang disebut transformasi Fourier untuk membuat peta.

Fakta menarik tentang VLA adalah bahwa piringan dapat dipindahkan ke beberapa konfigurasi berbeda, untuk lebih fokus pada bagian langit yang berbeda. Setiap antena individu mampu dipindahkan, dan menempatkan dirinya sendiri sehingga mengarah ke lokasi tertentu. Namun, memindahkan dan menempatkan antena tunggal dengan sendirinya tidak memiliki dampak yang hampir sama jika antena dipindahkan dan ditempatkan sambil tetap mengingat antena lainnya. Yaitu, sementara masing-masing antena independen dan berfungsi secara penuh sendiri, itu adalah keanggotaan antena ke grup yang memungkinkan VLA menjadi sekuat itu.

Gambar milik NRAO/AUI

Dalam ilmu komputer, array adalah kumpulan data, atau dengan kata lain, daftar nilai. Dengan kata lain, array adalah variabel tunggal yang menampung banyak nilai. Nah, secara teknis variabel tersebut memiliki nilai tunggal: array itu sendiri. Kemudian array sebenarnya menyimpan beberapa nilai. Dan seperti namanya, nilai-nilai yang disimpan dalam array biasanya dari tipe yang sama, meskipun seringkali tidak ada aturan tentang ini. Poin kunci untuk mengetahui bahwa array adalah sekelompok nilai, masing-masing dengan nilai dan identitas masing-masing, tetapi juga dengan identitas masyarakat yang lebih tinggi, sebagai anggota array.

Langkah 2: Membuat Array Pertamamu

Lanjutkan, cetak sertifikat, karena ini adalah momen spesial! Jika ini adalah Array pertamamu, maka selamat datang di dunia manajemen data yang luar biasa!

Sebenarnya ada dua cara untuk membuat Array, dan kedua cara itu memungkinkanmu untuk membuat mereka dengan elemen di dalamnya atau tidak. Cara pertama, yang mungkin dianggap sebagai cara resmi, terlihat seperti ini:

Kita hanya membuat variabel yang disebut ary, bertipe Array, dan mengatur nilainya ke Array kosong yang baru. Kata kunci new di ActionScript adalah salah satunya yang akan kamu lihat banyak; seperti yang kamu simpulkan, ia menciptakan sesuatu yang berdiri bebas sesuatu atau yang lain, tergantung pada apa yang mengikutinya. Dalam hal ini, kita mengikutinya dengan tipe Array, jadi kita mendapatkan Array baru.

Meskipun ini adalah teknik yang cukup sempurna untuk membuat Array, mari dengan cepat kita melihat cara lain untuk membuat Array.

Langkah 3: Metode Alternatif Membuat Array

Rasa utama lain dari penciptaan Array adalah braket persegi, juga dikenal sebagai array literal. Efeknya, ini hanyalah jalan pintas ke apa yang kita lakukan di langkah terakhir. Ini terlihat seperti ini (jika kamu suka, buka dokumen AS3 Flash baru dan kemudian buka panel Actions dan ikuti bersama):

Baris kode ini identik secara fungsional dengan baris kode dari langkah terakhir, hanya saja kamu mungkin melihatnya lebih pendek dan lebih bersih, atau lebih samar. Dalam semua kecuali satu kasus, mereka identik dengan penggunaan, sehingga yang kamu gunakan sebagian besar adalah masalah preferensi. Saya sarankan mencoba keduanya untuk sementara waktu, kemudian memilih gaya dan tetap konsisten.

Tidak ada variasi sintaksis lainnya untuk membuat Array, tetapi kita memiliki opsi untuk membuat Array yang tidak kosong. Artinya, kita bisa membuat Array dan mengisinya dengan nilai-nilai semuanya dalam langkah yang sama. Baik metode new dan notasi literal mendukung ini. Untuk membuat Array baru dengan tiga String di dalamnya menggunakan kata kunci new:

Untuk melakukan hal yang sama menggunakan Array literal:

Perhatikan bahwa jumlah item tidak masalah, kamu hanya perlu memisahkannya dengan koma. Dan tipenya juga tidak masalah. Kita menggunakan Strings. Kamu dapat menggunakan Number, MoveClip, bahkan Array lainnya (kita akan membahasnya dalam beberapa langkah). Mereka juga tidak perlu tipe yang sama. Berikut ini benar-benar valid:

...meskipun ada sedikit metode untuk kegilaan itu. Secara umum, Array paling cocok untuk menyimpan daftar barang serupa, bukan mengelompokkan barang yang berbeda.

Ada satu hal yang perlu diperhatikan saat membuat Array dengan data pada saat yang sama. Saya sebutkan sedikit sebelumnya bahwa versi new dan versi literal-nya sama, kecuali untuk satu kasus. Kasus itu adalah ini: Jika kamu mencoba untuk membuat Array baru/new dengan satu item di dalamnya, dan item itu kebetulan bilangan bulat (apakah itu int atau hanya Number yang merupakan bilangan bulat), kamu tidak akan mendapatkan satu item Array. Jika kamu menulis:

Kamu akan mendapatkan Array sepuluh item, dengan semua item yang diset ke null. Namun, jika kamu menulis:

Kamu akan mendapatkan satu item array, dan satu item itu adalah nomor 10.

Untuk perbedaan kecil inilah saya memilih notasi braket persegi saat membuat Array. Terlalu mudah untuk melupakan bahwa satu kasus di mana perilakunya berbeda. Saya tidak pernah menemukan kebutuhan untuk membuat multi-item, semua null Array, jadi saya tidak pernah sengaja menggunakan fitur itu. Jarak tempumu mungkin berbeda, tetapi itulah yang saya pertimbangkan.

Setelah salah satu contoh ini, kamu dapat menguji nilai Array yang kamu buat dengan baris berikut:

Kamu akan melihat sesuatu seperti:

yang merupakan upaya terbaik Flash dalam mewakili daftar nilai sebagai output tekstual. Terkadang itu berfungsi, seperti di atas, di lain waktu itu kurang berguna.

Langkah 4: Indeks Array

Untuk melacak semua item kita di Array, setiap item diberikan indeks numerik. Ini adalah "id" jenis yang tidak hanya secara unik mengidentifikasi posisi itu (dan nilai yang tersimpan di dalamnya), tetapi juga menunjukkan posisi item itu dalam daftar.

Tetapi sebelum kita melangkah lebih jauh, kita harus memastikan bahwa ActionScript adalah bahasa berbasis-nol, artinya item pertama dalam Array memiliki indeks 0 (nol). Item kedua memiliki indeks 1. Item terakhir dalam Array akan memiliki indeks jumlah item-in-Array minus 1 (pikirkan tentang itu ... itu akan masuk akal jika tidak pada awalnya).

Adalah kesalahan umum untuk menganggap Array sebagai berbasis satu, terutama ketika memulai karir pemrogramamu, yang mengarah pada sesuatu yang disebut kesalahan satu per satu. Jenis kesalahan logis ini bisa sulit dilacak, tetapi ketika kamu mulai melihat hal-hal seperti hasil terlalu banyak atau terlalu sedikit, periksa untuk memastikan bahwa kamu memulai dari 0.

Langkah 5: Menambahkan Item ke Array

Ingatlah bahwa Array mengidentifikasi anggota mereka dengan numerik, indeks berbasis nol, mari kita lihat cara yang paling mudah untuk memasukkan barang ke dalam Array setelah dibuat:

Setelah membuat Array dengan tiga String di dalamnya, baris kedua mengambil bahwa Array menambahkan String lain ke posisi keempat (yaitu, posisi dengan indeks 3). Menggunakan tanda kurung siku segera setelah referensi ke Array memungkinkan kita mengakses posisi individu dalam Array, sebagaimana ditentukan oleh nilai numerik antara tanda kurung siku. Ini disebut array access notation.

Mari kita lihat apa yang terjadi pada Array:

Jalankan program, dan kamu akan melihat ini di panel Output:

Kamu sekarang dapat melihat bahwa Array-mu memiliki empat item di dalamnya.

Metode sebelumnya paling mudah dipahami, dan sempurna jika kamu tahu persis ke mana kamu ingin item itu pergi. Namun, kadang-kadang, kamu tidak tahu atau tidak peduli, dan hanya ingin memberi nilai pada Array pada akhirnya. Metode push menjadi sangat berharga di saat-saat ini:

Ini mengambil nilai di antara tanda kurung dan menggantinya di daftar di akhir. Yang menyenangkan adalah kamu tidak perlu khawatir tentang berapa lama Array pada saat itu. Kamu hanya menggunakan push dan percaya itu berakhir dan akhirnya.

telusuri lagi dan kamu akan melihat ada lima elemen sekarang.

push memiliki tenaga kuda ekstra yang tampaknya tidak diketahui oleh kebanyakan orang. kamu dapat menggunakannya untuk menambahkan beberapa item sekaligus. Sebagai contoh:

Mungkin tidak mudah terlihat di panel Output, tetapi kamu telah menambahkan tiga item individual ke dalam daftar, memperbesar panjangnya dari 6 menjadi 9. kamu dapat menambahkan item sebanyak yang kamu suka dalam metode push.

unshift adalah saudara kecil push. Ini bekerja secara identik, menyimpan untuk fakta kecil bahwa itu menambahkan item ke awal daftar, daripada akhir. Perhatikan bahwa jika kamu melakukan ini:

Kita belum mengganti item apa pun di Array, kita baru saja menambahkan satu. Item sebelumnya yang berada di indeks 0 meluncur ke indeks 1, menabrak masing-masing ke bawah, sampai kita mencapai akhir. Dengan kata lain, kami menambahkan nilai daripada menimpa nilai.

Silakan dan lacak Array lagi untuk melihat ini dalam tindakan.

Langkah 6: Mengakses Item dalam Array

Sekarang kita memiliki beberapa data dalam Array kita, kita mungkin ingin, pada suatu titik, mengeluarkannya kembali. Ada beberapa cara untuk melakukan ini, tetapi kita akan fokus hanya pada tiga, yang mencerminkan metode memasukkan item ke dalam Array yang telah kita bahas pada langkah terakhir.

Notasi akses array dapat digunakan untuk mengeluarkan data semudah memasukkannya. Dengan asumsi kita masih memiliki variabel "ary" masih tersedia untuk kita, dan itu memiliki 9 item di dalamnya, bentuk "nol" hingga "delapan", Berikut ini:

akan menghasilkan:

Kamu mungkin menganggap notasi akses array sangat mirip dengan variabel tunggal, hanya saja daripada memiliki 9 variabel dengan String ini di dalamnya, kita memiliki variabel tunggal ("ary") yang mampu menampung 9 nilai dengan sendirinya, dan untuk menggunakan salah satu dari mereka sebagai variabel, kita menggunakan tanda kurung siku.

Ini mungkin cara yang paling umum sejauh ini untuk mengakses data dalam sebuah Array, tetapi dua teknik lain juga umum. Metode pop seperti sepupunya, atau mungkin saudara kembar jahat, dari push. Ini bekerja secara terbalik. Jika menghapus item terakhir dari Array. Tetapi sementara itu mengubah Array, itu mengembalikan item terakhir kembali kepadamu. Pertimbangkan yang berikut ini:

Anda akan melihat sesuatu seperti ini di panel Output-mu:

Di baris pertama, kita melihat 9 item Array saat ini.

Kemudian di baris kedua, kita membuang item terakhir dari akhir Array. Kita dapat melacak nilai ini, dan melihat bahwa sebenarnya nilai itulah yang pada akhirnya.

Di baris ketiga, kita melacak seluruh Array lagi, dan memverifikasi bahwa itu sebenarnya kehilangan item terakhir sekarang.

shift adalah untuk pop apa yang unshift adalah untuk push. Ini menghapus item pertama dan mengembalikannya, menggeser item yang tersisa ke bawah satu indeks untuk menutup celah. Kita dapat mencoba latihan serupa seperti yang kita lakukan dengan pop:

Semoga hasilnya akan jelas pada saat ini.

Langkah 7: Berapa Banyak Item?

Sangat umum untuk ingin tahu berapa banyak item dalam Array. Kita bisa meminta panjang/length Array itu sendiri. Sebagai contoh:

Dengan asumsi kita telah mengikuti semua item yang ditambahkan dan muncul dan bergeser, kita akan melihat

Penting untuk diingat bahwa sementara indeks Array berbasis nol, panjang sebenarnya berdasarkan satu. Ini tidak bertentangan; itu pernyataan fakta. Kita bertanya pada Array, "berapa banyak barang yang kamu miliki?" bukan, "Apa indeks item terakhirmu?" Bahkan jika Array berbasis 42, selama ada 7 item dalam Array (indeks 42 hingga 48), panjangnya tetap 7. Ini sering menjadi titik kebingungan di antara mereka yang baru menggunakan Array, jadi cobalah untuk mengingat perbedaan halus antara indeks berbasis nol dari item terakhir dan panjang Array.

Perhatikan bahwa Array tidak mengharuskan ada nilai aktual dalam indeksnya untuk dihitung panjangnya. Mempertimbangkan:

Akan menghasilkan "43," meskipun 42 dari 43 item tersebut tidak ditentukan. Tapi kita mendefinisikan item pada 42, secara implisit membuat slot kosong dalam segala hal hingga indeks itu, sehingga berkontribusi pada panjangnya. Dalam ilmu komputer ini menggambarkan array tipis, yang berarti bahwa ActionScript Array tidak mengharuskan semua nilai menjadi "benar-benar penuh" tanpa nilai null yang mengambil ruang. Beberapa bahasa memiliki array padat yang hanya itu saja, tetapi tidak ActionScript.

Langkah 8: Memanipulasi Array

Ada sejumlah metode berguna lain yang mungkin ingin kamu lakukan untuk Array-mu. Lihat dokumentasi untuk daftar lengkap, tetapi berikut adalah beberapa hal penting:

join mengambil Array dan membangun representasi String darinya. Kamu dapat (dan mungkin harus) menentukan pembatas/delimiter (yaitu, String untuk digunakan di antara setiap elemen). Secara default itu adalah koma, tetapi menggunakan karakter baris baru dapat berguna saat melacak Array:

Cobalah dan lihat apa yang terjadi.

Yang berhubungan secara tangensial adalah metode komplemen String, split. Mengambil String, membaginya menjadi Array, lalu menggabungkannya kembali menjadi sebuah String adalah cara cepat dan kotor untuk melakukan pencarian dan penggantian sederhana:

sebaliknya melakukan apa yang kamu pikir akan dilakukan. Lanjutkan dan coba:

Semoga hasilnya tidak terlalu mengejutkanmu.

sort adalah fungsi yang fleksibel untuk menyortir isi Array. Dengan sendirinya, ia bekerja dengan menyortir menurut aturan abjad standar. Sekali lagi, silakan dan coba untuk melihat:

Tetapi metode sort dapat dikatakan bagaimana dan pada apa yang harus disortir. Lihat dokumentasi untuk deskripsi lengkapnya, tetapi untuk menyimpulkannya, dimungkinkan untuk mengurutkan secara numerik (dengan nomor standar diurutkan secara alfabet, sehingga "10" muncul sebelum "9"), huruf besar-kecil (secara default 'Kebun Binatang' datang sebelum "sempoa"), naik atau turun, dan dengan opsi lain.

Selain itu, sort dapat menggunakan fungsi perbandingan, yang memungkinkanmu menyesuaikan sepenuhnya logika pengurutan, dan dapat sangat berguna ketika kamu memiliki kebutuhan pengurutan yang unik. Sekali lagi, lihat dokumen untuk informasi lebih lanjut, tetapi cukup berguna untuk menjamin disebutkan di sini.

splice adalah metode Array yang memungkinkamu menghapus dan/atau menyisipkan item dari/ke Array. Ini adalah metode yang agak canggih, memungkinkan untuk menghapus dan menyisipkan pada saat yang sama. Mari kita mulai dengan Array dasar ini:

Untuk menghapus item dari Array, kita perlu menggunakan splice dengan dua parameter: yang pertama adalah indeks di mana kita ingin memulai operasi, dan yang kedua adalah jumlah item yang dihapus dari titik awal. Jadi untuk menghapus item "four" (pada indeks 3), kita akan menulis:

Kita juga dapat menggunakan splice untuk memasukkan item. Untuk memasukkan elemen "four-point-two" di antara item "four" dan "five," kita dapat melakukan hal berikut

Ini dimulai dengan item 4 (nilai "five"), menghapus apa-apa (itulah gunanya 0), dan kemudian menyisipkan String yang diberikan, mendorong semuanya turun satu demi satu untuk memberi ruang.

indexOf adalah metode sederhana yang membermu indeks dari item yang ditentukan. Sebagai contoh:

Ini membermu nomor (atau, khususnya, int) 2. Ini adalah indeks dari item pertama yang cocok dengan nilai yang disediakan. Ini adalah cara cepat untuk mencari melalui Array untuk nilai yang diketahui, atau bahkan untuk memeriksa apakah Array berisi nilai, dengan membandingkan hasil indexOf untuk melihat apakah lebih besar dari -1 (indexOf mengembalikan -1 jika nilai tidak ditemukan dalam Array).

Ada banyak lagi yang harus dilakukan dengan Array, dan bahkan metode yang tercantum di sini sering mampu lebih dari apa yang disarankan deskripsi singkat saya. Dokumentasi untuk Array mencantumkan semua metode dan properti yang tersedia, dengan setidaknya deskripsi dasar.

Perhatikan bahwa dalam pemrograman "tradisional", Array cenderung benar-benar immutable/tidak berubah. Yaitu, begitu mereka telah dibuat dengan serangkaian nilai tertentu, mereka tidak dapat (mudah) diubah. Alasan untuk ini melibatkan alokasi memori dan topik tingkat rendah yang kamu tangani dalam bahasa seperti C. Namun dalam ActionScript, dan sebagian besar bahasa skrip, sebagian besar telah dipisahkan, dan kita dibiarkan dengan Array yang dapat mutable/diubah, atau Array yang bisa diubah sesuka hati. Ada banyak hal yang terjadi di balik layar ketika kamu memanggil reverse atau splice, tapi jangan tanya, cukup senang bahwa kamu telah menghemat banyak waktu.

Langkah 9: Array Bersarang

Item array dapat dari jenis apa pun. Array dapat berisi, pada kenyataannya, Array lainnya. "Array pada Array" ini disebut array bersarang atau array multi dimensi. Mereka kemudian dapat digunakan untuk menyimpan struktur data yang kompleks. Yang paling umum adalah Array dua dimensi, yang merupakan Array tunggal di mana setiap item adalah Array lain. Masing-masing "sub-array" tersebut mengandung nilai yang lebih primitif.

Bayangkan spreadsheet, dengan baris dan kolom yang penuh angka. Ini dapat dengan mudah diwakili oleh Array dua dimensi. Indeks Array utama (yaitu, dimensi pertama) sama dengan, katakanlah, baris spreadsheet. Indeks sub Array yang ditunjuk oleh indeks pertama itu sama dengan kolom.

ActionScript sendiri menggunakan Array dua dimensi untuk beberapa operasi, yang dikenal sebagai Matriks matematika. Gagasan yang sama berlaku; angka disimpan dalam kisi (matriks) dan hubungan angka-angka tersebut memiliki efek penjumlahan. Kita tidak akan melihat mereka secara rinci dalam tutorial ini.

Kita akan melihat secara praktis Array dua dimensi hanya dalam beberapa langkah, tetapi mari kita lihat bagaimana ini diatur sekarang.

Kita dapat membangun array semacam itu sedikit demi sedikit:

Melakukannya seperti ini membuat ilustrasi yang agak jelas tentang apa yang terjadi. Ada satu Array, yang disebut "spreadsheet," dan awalnya kosong. Kita menempatkan Array kosong lain sebagai elemen pertama. Kemudian kita mulai mengisi Array itu, yang mirip dengan baris pertama spreadsheet. Kemudian kita ulangi prosesnya, untuk baris kedua dan ketiga.

Proses ini agak membosankan, tetapi ini menggambarkan perlunya memastikan bahwa "barus"-mu dibuat sebagai Array sebelum kamu mencoba menggunakannya. Misalnya, yang berikut ini akan menyebabkan error saat dijalankan:

Sementara pada pandangan pertama tampaknya berfungsi, perhatikan bahwa spreadsheet[0] pernah didefinisikan sebagai Array, jadi mencoba mengakses indeks dari itu akan menyebabkan masalah.

Jika kamu akan melakukan pengaturan seperti ini, kamu mungkin tertarik dengan cara penulisan struktur data yang sama persis:

Pendekatan ini memanfaatkan literal Array dan kemampuan untuk mengisi data pada saat pembuatan. Kedua pendekatan memiliki kelebihan masing-masing, tetapi biasanya bermuara pada preferensi pribadi.

Untuk bacaan lebih lanjut tentang Array multi-dimensi, entri Wikipedia tentang Array memiliki bagian tentang Array multi-dimensi, dan untuk landasan matematika, kunjungi entri pada matriks untuk bacaan ringan. ActionScript 3 menggunakan matriks dalam objek flash.geom.Matrix.

Langkah 10: Vektor

Vektor adalah tipe data baru yang diperkenalkan dengan Flash Player 10 yang hampir identik dengan Array. Perbedaan utama adalah bahwa Vektor diatur hanya untuk memungkinkan jenis nilai tertentu untuk dimuat olehnya. Misalnya, jika kamu melacak posisi, kamu mungkin menginginkan Vektor yang hanya berisi Number. Tentu saja, dan Array mungkin hanya berisi Number, tetapi Vector memungkinkanmu untuk menegakkannya. Cara terbaik untuk menggambarkan ini adalah dengan contoh.

Kita akan membuat Array dan membuatnya menyimpan banyak String.

Sekarang, kita akan mengeluarkan elemen kedua.

Sejauh ini baik. Namun, perhatikan tipe data pada var "item". Ini benar-benar hanya karena saya tahu bahwa saya tidak memasukkan apa pun kecuali String ke dalam Array. Apa yang terjadi jika saya mengacau, dan menaruh int di sana?

Mencoba mengeluarkan ary[1] dan memasukkannya ke dalam variabel String-typed akan menyebabkan masalah. Mungkin ada kesalahan runtime, tetapi kamu tidak mendapatkan kompiler yang memperingatkanmu tentang hal ini. Lanjutkan dan terbitkan skrip di atas. SWF akan dikompilasi tanpa kesalahan, tetapi hasilnya tidak seperti yang kamu harapkan:

Objek Sprite diubah menjadi String setelah pengambilan dari Array.

Vektor, bagaimanapun, dijamin hanya memiliki satu jenis objek di dalamnya. Pengaturannya terlihat sedikit aneh dibandingkan dengan sisa ActionScript:

Ini membuat Vektor baru yang hanya mengharapkan Strings. yang jangan dan kurung sudut hanya sintaks untuk ini. Tipe data lengkap adalah "Vektor.<Sprite>", di mana "Sprite" secara teknis bisa berupa tipe data lain yang ingin kamu simpan.

Sekarang pindah melalui pengaturan data kita, kita dapat mencoba ini:

Tetapi cobalah untuk mempublikasikan ini; kamu akan melihat bahwa kita mendapatkan kesalahan runtime yang mengatakan bahwa kita mencoba memasukkan angka ke dalam Vector yang mengharapkan Sprite.

Jika kita memperbaikinya, tetapi cobalah untuk mendapatkan data seperti itu:

Kemudian kita mendapatkan error yang serupa tetapi ini seharusnya terjadi pada waktu kompilasi. Kami tidak dapat memasukkan selain Sprite ke dalam Vector ini, dan kita tidak bisa mengeluarkan apa pun selain Sprite.

Mengapa menggunakan Vektor di banding Array? Alasan utamanya adalah untuk keamanan tipe. Sebagian besar waktmu hanya memiliki satu jenis data di dalam Array-mu, jadi kamu bisa membuatnya resmi. Lebih dari itu, Vektor seharusnya lebih cepat daripada Array, terutama untuk Vektor besar yang mengandung tipe primitif seperti Number. Perasaan saya adalah kamu tidak bisa salah dengan Vector, jadi jika kamu menggunakan Flash Player 10, silakan dan gunakan Vektor. Namun, jika kamu khawatir tentang kompatibilitas dengan Flash 9, kamu harus menggunakan Array (misalnya, di library kode yang tidak bergantung pada fitur Flash 10). Karena FlashTuts+ belum siap untuk mengunci Flash 9, untuk sisa tutorial ini kita akan menggunakan Array.

Langkah 11: Grid

Sudah waktunya untuk mulai memasukkan semua buku ini ke dalam beberapa kearifan jalanan. Kami akan membuat game puzzle sederhana, yang sebagian besar tidak mungkin dikendalikan tanpa bantuan Array. Anda mungkin pernah melihat jenis puzzle ini sebelumnya. Ini adalah kisi tombol, masing-masing dalam keadaan hidup atau mati. Saat kamu menekan tombol, tombol ini akan mengubah statusnya. Tapi bukan hanya state-nya sendiri; empat tombol yang bersebelahan langsung dengan tombol yang ditekan juga akan berganti. Tujuannya adalah untuk mematikan (atau menghidupkan, tergantung pada bagaimana kamu melihatnya) semua tombol. Lebih mudah memainkannya sendiri daripada menjelaskan dengan kata-kata:

Untuk melihat bagian demo ini, kamu harus menginstal Flash Player 9 atau lebih tinggi, dan JavaScript yang dihidupkan.

Untuk kenyamanan, unduhan tersedia yang menyediakan FLA starer, dengan karya seni dan kebutuhan dasar lainnya, sehingga kita bisa langsung ke ActionScript. Empat langkah selanjutnya merinci apa yang masuk ke dalam FLA ini jika kamu ingin memulai dari awal, atau jika kamu hanya ingin tahu tentang apa yang sudah ada (yang seharusnya).

Langkah 12: Membuat FLA

Buat dokumen Flash ActionScript 3 baru. Pastikan untuk menyimpannya, dan atur dimensi panggung ke 600 x 400. Saya mengatur lapisan latar belakang dengan persegi panjang di dalamnya dengan isian gradien coklat.

Langkah 13: Membuat tombol Grid

Pada layer baru, gambar persegi 99 piksel dengan lebar 99 tinggi. Gunakan warna yang akan kontras dengan latar belakang (saya menggunakan isian gradien oranye). Pilih karya seni ini dan tekan F8 untuk membuat simbol MovieClip baru keluar.

Langkah 14:Membuat Transisi Tombol

Klik dua kali MovieClip-mu yang baru dibuat untuk memasukkan timeline-nya. Perpanjang timeline hingga 9 frame. Tergantung pada jenis transisi yang kamu inginkan, dan versi Flash yang kamu gunakan, kamu akan memiliki pendekatan berbeda untuk membuat animasi yang sebenarnya. Saya menyerahkan kepada pembaca untuk menyelesaikannya - dalam kasus saya, saya membuat bentuk tween dan menganimasikan gradien. Namun itu benar-benar terjadi, tujuannya adalah bahwa pada frame 1 dan 9 kita akan memiliki status "normal" dan pada frame 5 kita akan memiliki status '"off', dengan transisi singkat dan manis antara kedua kondisi tersebut.

Pada layer baru, tempatkan keyframe "tradisional" pada frame 1 dan 5, dan letakkan skrip "stop()" sederhana pada frame tersebut. Idenya adalah bahwa kita akan mengendalikan animasi dari perulangan tanpa henti. Itu harus dimulai pada frame 1 dan menunggu, dan ketika kita menulis beberapa logika lain, kami akan memberitahukan klip untuk bermain, yang akan membiarkan animasi bermain sampai hits bingkai 5, dan sekali lagi di jalan kembali.

Langkah 15: Tata Letak Panggung

Sekarang untuk bagian yang membosankan (itulah sebabnya kamu mudah-mudahan mengunduh FLA starter). Kembali keluar di timeline utama, duplikat MovieClip ini sehingga ada 24 contoh di atas panggung. Aturlah sehingga mereka membentuk grid 6 kolom dan 4 baris.

Mulai dari kotak kiri atas dan beri nama instance "s1." Klik pada kotak di sebelah kanan dan beri nama "s2," dan lanjutkan dengan cara yang sama sampai kamu sampai di kotak kanan atas, dengan nama "s6." Mulai kembali di sisi kiri, maju ke baris kedua, dan nama "s7." Lanjutkan dengan cara ini sampai kamu berakhir di kanan bawah, dengan nama "s24."

Catatan yang termasuk dalam unduhan adalah skrip JSFL yang disebut "nameGrid.jsfl." Jika kamu hanya memilih semua 24 kotak, lalu klik dua kali skrip itu, itu akan berjalan, dan beri nama kotak untukmu (mudah-mudahan).

Langkah 16: Mengatur Skrip

Sekarang setelah kita menyiapkan visual, kita dapat mulai menulis skrip. Kita akan mulai dengan membuat layer baru tempat kode akan berada, klik pada frame-nya, dan tekan F9 (Windows) / Opt-F9 (Mac).

Kita akan mendapatkan hal-hal yang bergulir dengan mendefinisikan beberapa variabel. Sebenarnya, dua yang pertama bisa berupa konstanta:

Lalu kita akan mengatur dua Array, yang keduanya akan menyimpan referensi ke MovieClips yang menyusun grid. Kita akan membuat Array dua dimensi yang disebut "grid," yang nanti akan kita isi melalui proses yang cerdas. Kita juga akan membuat flat list Array yang disebut "list," yang akan kita lanjutkan dengan MovieClips saat ini:

Flat list hanyalah istilah untuk konsep Array satu dimensi (dengan kata lain, Array "normal"). Implikasinya, bagaimanapun, adalah bahwa data ini biasanya dipikirkan dengan baik dengan struktur multi-dimensi, tetapi karena satu dan lain alasan kita menyajikannya sekarang sebagai daftar dimensi tunggal.

Langkah 17: Menyiapkan Setiap Kotak

Ini akan menjadi skrip yang sangat membosankan jika kita harus mengatur pengendali aksi mouse dan yang lainnya di 24 kotak secara individual. Untungnya, Array memberi kita metode forEach yang akan berguna agar beralih ke Array, dan melakukan tindakan yang ditentukan pada masing-masing secara bergantian.

Harap dicatat bahwa pendekatan yang lebih umum untuk situasi ini adalah dengan menggunakan struktur pengulangan. Saya sengaja menggunakan teknik yang kurang dikenal dan kurang digunakan ini karena dua alasan. Satu, kita akan membahas perulangan pada tutorial AS3 101 berikutnya dan saya tidak ingin harus menyelami mereka secara prematur. Dua, ini memungkinkan kesempatan lain untuk mengeksplorasi Array lebih lanjut.

Apa yang sedang terjadi disini? Metode forEach mengambil referensi fungsi sebagai parameter (seperti metode addEventListener). Ketika forEach dipanggil, Array memeriksa setiap item yang dikandungnya dan memanggil fungsi yang ditentukan sekali untuk setiap item. Fungsi akan diteruskan:

  1. Item dalam Array
  2. Indeks item itu
  3. Array itu sendiri

Kita akan kembali ke fungsi ini dan menyempurnakannya, tetapi untuk saat ini, mari kita tulis saja fungsi onSquareClick dan uji filmnya:

Jika kamu menguji filmnya sekarang, kamu seharusnya dapat mengklik setiap kotak dan melihat nama kotak muncul di panel Output. Semoga kamu dapat memahami jumlah pekerjaan yang telah kita simpan dengan menggunakan metode forEach sebagai lawan dari menambahkan 24 event listener secara individual.

Langkah 18: Toggle Kotak yang Diklik

Oke, kita akhirnya bisa mendapatkan sesuatu yang sedikit lebih menarik. Mari kita memicu efek visual yang akan kamu lihat ketika kamu mengklik kotak.

Pertama, mari kita menulis sebuah fungsi untuk menangani toggling dari sebuah kotak (yaitu, jadikan ini "off" saat kotak "on", dan sebaliknya).

Inilah yang terjadi:

Pertama, kita memeriksa untuk memastikan bahwa suatu nilai benar-benar diteruskan ke fungsi ini. Jika tidak, kita hanya mengembalikan/return dan tidak melakukan hal lain. Ini akan menjadi penting nanti.

Kemudian kita periksa untuk melihat apakah kotaknya "isOn". Jika ya, kita pastikan '"isOn" bernilai false, dan kita memberi tahu klip kuadrat untuk memutar timeline dari frame 2 (sehingga transisi ke status "off" pada frame 5). Jika tidak, kita set menjadi "isOn" menjadi true dan mainkan linimasa dari frame 6 (yang akan memutar kembali ke keadaan "on" pada frame 9 dan kemudian kembali ke frame 1, di mana ia akan berhenti lagi).

Tapi tunggu, dari mana "isOn" ini berasal? Kita harus menambahkannya. Kita hanya secara dinamis menambahkan properti ke MovieClip yang merupakan kuadrat dan membiarkan setiap kuadrat melacak statusnya sendiri. Untuk mengatur ini pada awalnya, kembali ke fungsi setupSquare dan tambahkan baris ini:

Kita akan bekerja dengan ini nanti, tetapi untuk sekarang kita hanya ingin memastikan variabel dideklarasikan dan memiliki nilai yang akurat (karena kita memulai papan dengan keadaan "all", kita perlu memastikan bahwa variabel "isOn" bernilai true).

Satu bit terakhir di sini: pada onSquareClick, hapus jejaknya dan tambahkan ini:

Silakan dan uji ini; kamu sekarang harus memiliki kotak kotak toggling yang dapat diklik!

Langkah 19: Menyiapkan Array Multi-Dimensi

Sekarang segalanya menjadi sangat menarik. Kita akan mengatur Array multi-dimensi dengan mencari tahu baris dan kolom setiap kotak dengan sedikit matematika. Kemudian kita akan menggunakan Array itu untuk toogle tidak hanya persegi yang kamu klik, tetapi juga kotak di setiap sisi.

Pertama, kita perlu menentukan baris dan kolom. Di sini, kita akan mengandalkan fakta bahwa klip kita telah diatur dalam "list" Array dalam urutan kiri-ke-kanan, dari atas ke bawah. Di setUpSquare, tambahkan baris ini:

Yang kita lakukan adalah menggunakan "index" sebagai cara untuk mencari tahu baris dan kolom mana yang kita tuju. Saya tidak akan masuk terlalu dalam terkait matematikanya, tetapi ini adalah trik yang bagus untuk di simpan dan digunakan saat dibutuhkan. Saya akan menawarkan penjelasan untuk simbol % ​​dalam kode: Ini adalah operator modulus, yang memberi kita sisa operasi pembagian dua angka (10 % 3 memberi kita 1, karena 10 dibagi 3 adalah 3 dengan sisa 1). Sebagai latihan bagi pembaca yang bingung, saya serahkan kepadamu untuk membaca setiap indeks, satu demi satu, dan mengerjakan perhitungan matematika untukmu sendiri (menggunakan kertas, bukan komputer). Kamu akan segera melihat polanya, dan kamu akan menghemat beberapa paragraf pengetikan.

Sekarang, gunakan nilai-nilai itu untuk mengatur Array multidimensi:

Pertama-tama kita perlu memastikan bahwa grid[col] adalah array. Jika tidak ada, maka kita perlu mengaturnya sebagai Array baru. Kemudian kita dapat memperlakukan grid sebagai Array dua dimensi dan pop di MovieClip pada posisi baris/kolom yang sesuai.

Langkah 20: Toogle Berbatasan

Dengan pengaturan Array dua dimensi, kita dapat menambahkan kode ini ke fungsi onSquareClick:

Ini adalah jumlah kode yang wajar, tetapi benar-benar turun menjadi hanya toggling empat kotak. Pertama, kita menggunakan metode Array indexOf untuk menemukan indeks flat list dari persegi yang diklik. Lalu kita melakukan matematika yang sama seperti sebelumnya untuk mengubah indeks itu menjadi baris dan kolom.

Terakhir, kita panggil toggleSquare di kotak yang bertetangga dengan kotak yang diklik. Kita menentukan ini dengan menambahkan atau mengurangi satu dari kolom atau baris yang diklik.

Sekarang, ada kemungkinan bahwa sebenarnya tidak akan ada persegi di posisi berbatasan. Ketika kamu mengklik di sudut kiri atas, misalnya, tidak ada berbatasan atas atau kiri. Mengklik di mana saja di baris bawah berarti tidak ada berbatasan bawah.

Untuk melindungi dari ini, kita telah menambahkan tanda "jika tidak ada kotak yang sebenarnya, jangan lakukan apa pun" centang ke toggleSquare. Tetapi dalam kasus kolom tepi, masalah sebenarnya adalah masalah seluruh kolom yang tidak ada. Bayangkan ini: Kamu mengklik di kolom kiri. Kolom ditentukan berada di posisi 0. Untuk menemukan berbatasan kiri, kamu kurangi satu dari posisi kolom. Ini memberi kita kolom -1. Namun, mengakses grid Array dengan indeks -1 menghasilkan tidak ada nilai; tidak ada apa pun dengan nilai -1! Jadi, kita melakukan dua pemeriksaan pada nilai kolom, untuk memastikan itu dalam batasnya sebelum mencoba untuk beralih kuadrat dengan indeks kolom berbatasan.

Jika kamu mencobanya sekarang, kamu harus memiliki permainan yang hampir berfungsi.

Langkah 21: Periksa untuk Menang

Untuk mengetahui apakah kita telah memenangkan pertandingan, kita perlu memeriksa kemenangan pada dasarnya setiap kali terjadi sesuatu yang berpotensi menghasilkan kemenangan. Dalam kasus permainan sederhana ini, kemenangan mungkin terjadi kapan saja pengguna mengklik kotak. Jadi, kita akan menambahkan kode ke fungsi onSquareClick yang akan memeriksa variabel "isOn" setiap kotak dan memutuskan apakah ada kemenangan atau tidak tergantung pada apakah semua kotak variabel "isOn" bernilai false. Tambahkan kode ini ke akhir fungsi "onSquareClick":

Setiap metode Array mirip dalam konsepnya dengan metode forEach, meskipun ini adalah cara untuk memeriksa situasi ya/tidak dalam Array. Pada dasarnya, fungsi yang kita suplai ke setiap metode harus mengembalikan nilai true atau false. Metode itu sendiri akan mengembalikan true jika setiap item dalam Array menghasilkan kembalian true dari fungsi yang disediakan, atau false jika setidaknya satu item menyebabkan kembalian yang false. Kita akan menulis fungsi "checkWin" yang mengembalikan nilai true saat kotak yang diberikan dalam Array adalah "on," dan false jika "off." Letakkan fungsi ini di mana saja yang masuk akal, di luar fungsi lainnya:

Seperti metode forEach, fungsi ini akan menerima item dalam Array (MovieClip), bersama dengan indeks dan Array itu sendiri. Kita hanya tertarik pada MovieClip, khususnya variabel "isOn" yang terkandung di dalamnya. Namun, tidak seperti metode forEach, kita perlu mengembalikan nilai Boolean. Kita hanya akan mengembalikan nilai variabel "isOn" itu sendiri. Jika salah satu dari kotak tidak aktif, variabel "isOn' akan bernilai false, dan setiap metode akan mengembalikan false, artinya kita tidak menang. Namun, jika semua aktif, kita akan mendapatkan true dari setiap metode, dan karena itu kita akan melihat pesan kemenangan.

Mengapa kita menggunakan setiapnya bukan forEach? Pertama, lebih tepat untuk apa yang kita coba lakukan. Kita bisa menyelesaikan ini dengan forEach, tetapi itu akan melibatkan lebih banyak langkah. Namun, manfaat lainnya adalah efisiensi. Pada false pertama dikembalikan ke setiapnya, setiapnya akan berhenti iterasi dan hanya mengembalikan false. Jadi, jika kotak pertama mati, maka kita tahu itu bukan kemenangan, dan kita tidak perlu mengulangi 23 kotak yang tersisa.

Lanjutkan dan coba ini. Karena permainan dimulai dengan semua kotak, itu seharusnya cukup mudah untuk diuji: cukup klik kotak apa saja, lalu klik lagi, dan kamu akan melihat jejaknya. Untuk memberikan tes yang lebih kuat, coba klik beberapa kotak yang berbeda, lalu klik lagi untuk kembali ke keadaan menang.

Langkah 22: Mengacak Awalnya

Yah, sangat mudah untuk menang ketika kamu mulai dalam keadaan menang, bukan? Untuk menjadikan ini permainan yang layak tantangan, mari kita buat papan acak, dengan beberapa kotak dan beberapa, kita bisa menang.

Idenya adalah untuk secara otomatis melakukan apa yang kamu lakukan secara manual pada langkah terakhir saat pengujian. Kita tidak ingin hanya mengaktifkan beberapa kotak dan beberapa kotak secara acak, karena ada kemungkinan besar bahwa papan tidak akan dapat dipecahkan. Kita dapat yakin membuat game yang bisa dimenangkan dengan memulai dalam kondisi menang, dan kemudian meminta komputer memilih beberapa kotak dan acak, melangkahi mereka melalui seluruh proses beralih (yaitu, beralih ke berbatasan juga), satu pada suatu waktu. Paling tidak, permainan bisa dimenangkan dengan mengklik semua kotak yang dipilih secara acak.

Namun, kita perlu memastikan seluruh papan sudah diatur sebelum kita mencoba untuk mengaktifkan salah satu kotak. Jadi pendekatan termudah adalah dengan mengatur panggilan forEach lain setelah panggilan forEach yang mengatur kotak. Tambahkan baris ini tepat di bawah list.forEach (setupSquare); baris:

Dan kemudian menemukan tempat yang bagus untuk menulis fungsi baru (masuk akal untuk meletakkannya setelah fungsi "setupSquare", tetapi itu benar-benar tidak masalah. Atur kodemu dengan cara yang masuk akal bagimu):

Ini berarti bahwa secara statistik, sekitar 40% dari kotak akan diinstruksikan untuk beralih ke keadaan tidak aktif. Ini teknik yang menarik, tetapi kita bisa "memalsukan" aksi klik dengan memberi tahu persegi untuk mengirim MouseEvent palsu. Ini pada gilirannya memicu fungsi "onSquareClick", seolah-olah pengguna telah mengklik kotak, toggling dan berbatasannya. Namun, dalam kasus ini, beberapa kotak disorot dalam sekejap mata, mengatur papan untuk permainan yang dapat dimenangkan.

Uji film ini sekarang, dan Anda harus siap untuk memainkan papan relatif sulit. Kamu dapat mengubah kesulitan dengan meningkatkan angka di sisi kanan perbandingan. Jangan atur ke 0 atau 1, tetapi semakin dekat ke 0, semakin mudah; semakin dekat ke 1, semakin sulit (secara umum).

Kesimpulan

Kamu seharusnya menjadi Master Array bersertifikat pada saat ini. Kamu telah menggunakan Array dengan cara yang bahkan beberapa ActionScripters berpengalaman tidak tahu tentangnya (silakan, bertanya ActionScripter berpengalaman jika dia tahu apa yang dilakukan pada setiap metode). Array berperan dalam hampir setiap aplikasi. Kamu akan segera mengetahui bahwa Array ditambah dengan iterasi dapat menghemat segala macam waktu. Ketika diatur secara cerdas dan dengan pandangan ke arah ekspansi di masa depan, jika kamu hanya mengubah Array, program itu sendiri akan menangani sisanya. Misalnya, untuk membuat papan dengan lebih banyak kotak, yang perlu kita lakukan adalah membuat perubahan visual dan memperbarui "list" Array. Setelah itu, fungsi iterasi secara elegan menangani Array terlepas dari berapa banyak item yang ada di dalamnya.

Lain kali, kita akan berbicara tentang struktur lingkaran, yang melengkapi Array cara kacang polong melengkapi wortel. Kita sebenarnya telah menghindari loop secara khusus dalam tutorial ini, tetapi kita akan melihatnya dalam waktu beberapa minggu saja.

Advertisement
Did you find this post useful?
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.