Bab 4 PENGGUNAAN
ENCHANT.JS
4.1 Gambaran Enchant.js
Enchant.js terdiri dari perpustakaan inti dan perpustakaan Plugin. Plugin uta- ma termasuk pada permainan dev dan situs berbagi 9leap.net, sehingga Anda dapat mencoba plugin ini dengan mudah.
Bagi mereka enchant.js belajar, code.9leap.net menyediakan cara mudah un- tuk melakukannya.
4.1.1 Basic Enchant.js
Enchant.js adalah perpustakaan yang berjalan di browser HTML5 kompatibel. Hal ini dapat digunakan untuk mengembangkan game dengan mudah, tetapi tentu saja dapat digunakan untuk membuat program selain game.
Contoh program sederhana yang menggunakan enchant.js ditampilkan di bawah.
1
2
1.enchant() // declares the use of enchant.js
2.window.onload = function(){ // run this function after the window has been loaded
3.game = new Core(320,320); // create a new game with resolution of 320×320
4.game.preload(‘ g1.png’,’ g2.png’); // speci es which image les should be loaded when the game starts
5.game.onload = function(){ // describes what should be executed when the game starts
6.var bear = new Sprite(32,32); // create a sprite
7.bear.image = game.assets[‘ g1.png’]; // speci es the image le *this must have been preloaded
8.bear.x = 50; // speci es position on the x-axis
9.bear.y = 50; // speci es position on the y-axis
10.game.rootScene.addChild(bear); // display the image on the screen
11.}
12.game.start(); // begin the game
13.}
Setelah menciptakan sebuah instance dari kelas inti, dari dalam window.onload, dan setelah preloading gambar untuk digunakan oleh permainan, isi game.onload dieksekusi.
Mayoritas pengolahan permainan sebenarnya ditentukan oleh isi game.onload
4.1.2 Entitas
Adegan, sprite, label, dan kelompok adalah gambar yang ditampilkan, dan di- sarikan oleh enchant.js menjadi entitas, yang membuat game. Semua entitas mewarisi kelas Entity, dan ditampilkan dengan diberi posisi tertentu pada x dan y sumbu, dan kemudian dengan yang ditambahkan ke adegan tertentu.Langkah-langkah yang membuat sebuah instance dari kelas permainan adalah sebagai berikut. Karena adegan default adalah secara default diatur ke ga- me.rootScene, itu adalah hal yang lumrah untuk menggunakan addChild untuk ini untuk menampilkan sesuatu di layar.
Adegan dapat berisi kelompok. Sejak kelompok juga dapat ditambahkan ke
3
entitas lain (seperti adegan) dengan addChild, ketika menampilkan sesuatu di layar, Anda perlu untuk melacak yang adegan kelompok sedang ditambahkan.
Jika Anda perlu menghapus sebuah entitas dari sebuah adegan, menggunak- an removeChild.
Layar yang sebenarnya ditampilkan tergantung pada sprite dan label. Kata “sprite” awalnya memiliki arti dari “fairy-like creature,” dan berarti gambar diharapkan untuk terbang di sekitar layar.
4.1.3 Events
Peristiwa terjadi ketika sesuatu menyentuh sesuatu yang lain pada layar, ketika jumlah waktu tertentu telah berlalu, atau beberapa jenis lain dari perubah- an terjadi. Ketika acara berlangsung, fungsi disebut “acara pendengar” dapat dibuat.
Dengan menambahkan pendengar acara untuk entitas, entitas dapat diken- dalikan.. Ketika pendengar acara dipicu, mereka mengeluarkan perintah untuk entitas induk mereka.
1.var bear = new Sprite(32,32); // create a sprite
2.bear.image = game.assets[‘ g1.png’]; // set the image to be displayed
3.bear.x = 50; // set the position on the x-axis
4.bear.y = 50; // set the position on the y-axis
5.bear.addEventListener(‘enterframe’,function(){ // add an event listener
6.// the event listener for the enterframe event
7.this.x+=2; // move two pixels to the right
8.});
9.game.rootScene.addChild(bear); // show the image on the screen Dengan melakukan ini, animasi beruang bergerak ke kanan dapat ditampilk-
an pada layar. Acara enterFrame memanggil semua entitas ditampilkan pada layar satu-per-satu dan dalam interval tetap.
Contoh lainnya:
1.bear.addEventListener(‘touchend’,function(){ //add an event listener
2.//event listener for the touchend event this.x+=2; //move two dots to the right
3.});
Dengan mengubah nama acara untuk touchend, kali ini karakter hanya akan
4
bergerak 2 piksel ke kanan ketika diklik oleh pengguna, dan membuat sprite interaktif.
Untuk membuat pendengar acara untuk seluruh layar, menambahkan pen- dengar acara untuk adegan itu sendiri.
1.game.rootScene.addEventListener(‘touchend’,function(param){ // scene event listener
2.bear.x = param.x; // move the bear to the clicked location
3.bear.y = param.y; });
Pendengar acara dapat menerima parameter. Di sini, dengan menggunakan param, pendengar acara melewati koordinat yang diklik.
Di sini, dengan menggantikan koordinat beruang dengan posisi diklik di layar, karakter tersebut akan dipindahkan. Acara juga dapat ditambahkan ke entitas beberapa kali.
4.1.4 Classes
Ketika Anda terbiasa dengan mengembangkan, membuat game yang lebih rumit akan menjadi lebih mudah dengan menciptakan kelas kustom Anda sendiri. Kelas dienchant.js dapat dibuat dengan fungsi Class.create.
1.Bear = Class.create(Sprite, { // declare a custom class called Bear
2.initialize:function(){ // initialize the class (constructor)
3.Sprite.call(this,32,32); // initialize the
4.sprite this.image = game.assets[‘ g1.png’]; // set the image ga- me.rootScene.addChild(this);
5.}
6.});
Dengan mende nisikan kelas ini, lebih mudah untuk menciptakan karakter ini akan maju.
1. bear = new Bear();
Itu dia. Hanya dengan melakukan hal ini, kita membuat sebuah instance dari kebiasaan beruang kelas, yang mewarisi kelas Sprite. Dengan mewarisi kelas, kita dengan mudah membuat kelas beruang yang berisi semua fungsi dari kelas Sprite.
Untuk tidak menggunakan warisan, berikut ini digunakan.
5
1.hoge = Class.create({
2.initialize:function(){
3.this.x=10;
4.});
Juga, mende nisikan pendengar acara di sini membuatnya lebih mudah ma-
ju.
1.Bear = Class.create(Sprite, { // de ne the custom class
2.initialize:function(){ // initialize the class (constructor)
3.Sprite.call(this,32,32); // initialize the sprite
4.this.image = game.assets[‘ g1.png’]; // designate the sprite image
5.game.rootScene.addChild(this);
6.},
7.onenterframe:function(){ // enterframe event listener
8.this.x+=2;
9.},
10.ontouchend:function(){ // the event listener for the touchend event
11.this.y+=10;
12.}
13.});
Ini akan membantu Anda sangat bisa menulis kelas seperti ini. Sebuah kelas yang Anda buat sekali dapat disalin berulang-ulang.
1.bear1 = new Bear();
2.bear1.x=100;
3.bear2 = new Bear();
4.bear2.x=150;
Mampu secara efektif menerapkan kelas-kelas ini akan meningkatkan esiensi dengan yang Anda mengembangkan permainan.
6
4.1.5 Collision Detection
Untuk mengetahui apakah entitas telah berpotongan, atau melakukan kontak dengan, entitas lain, gunakan dalam atau bersinggungan.
1.if(bear1.intersect(bear2)){ // if bear1 hits
2.bear2 bear1.x -= 10;
3.bear2.x += 10; }
4.2Classes Index
4.2.1 enchant.Action
Action(tindakan) adalah unit yang membentuk timeline. Ini adalah unit yang digunakan untuk menentukan tindakan yang ingin Anda lakukan. Tindakan yang telah ditambahkan ke timeline dilakukan secara berurutan. Transisi dari satu tindakan ke depan terjadi secara otomatis setelah jumlah frame yang di- tentukan oleh parameter waktu telah berlalu. Sebuah acara actionstart dipecat ketika aksi telah dimulai. Sebuah acara actionend dipecat ketika tindakan te- lah berhenti. Untuk setiap frame yang berlalu, acara actiontick dipecat. Anda dapat menentukan pendengar untuk acara ini untuk melakukan acara tertentu ketika mereka terjadi.
Class Detail
enchant.Action(param)
Parameters: {Object} param {Number} param.time
Optional Jumlah frame bahwa tindakan akan bertahan. Untuk jumlah tak ter- batas mengatur ini ke null.
{Function} param.onactionstart Optional Pendengar kejadian untuk saat aksi dimulai. {Function} param.onactiontick Optional
Pendengar kejadian untuk saat aksi telah berlalu satu frame. {Function} param.onactionend Optional
Pendengar acara untuk saat aksi selesai.
4.2.2 enchant.Map
Sebuah kelas untuk membuat dan menampilkan peta dari satu set ubin.
7
Class Detail
enchant.Map(tileWidth, tileHeight)
Parameters: {Number} tileWidth Lebar ubin.
{Number} tileHeight Tinggi ubin.
Field Detail
{Number[][]} collisionData Array dua dimensi untuk menyimpan jika ta- brakan harus dilakukan untuk ubin.
{enchant.Surface} image Gambar dengan yang ditetapkan genteng ditam- pilkan pada peta.
{Number} tileHeight
|
Tinggi ubin peta.
|
{Number} tileWidth
|
Lebar ubin peta.
|
8
Method Detail
{*} checkTile(x, y) Cek apa ubin pada posisi tertentu.
Parameters: {Number} x x koordinat titik pada peta. {Number} y
y koordinat titik pada peta.
Returns: {*} Data ubin untuk posisi tertentu.
{Boolean} hitTest(x, y) rintangan berada di atas Peta.
Parameters: {Number} x
x koordinat deteksi tempat di peta. {Number} y
y koordinat deteksi tempat di peta.
Returns: {Boolean} Benar, jika ada kendala.
loadData(data) Set data peta. Set data genteng, sedangkan data (array dua dimensi dengan indizes mulai dari 0) dipetakan pada gambar mulai dari sudut kiri atas. Bila lebih dari satu peta array data diatur, mereka akan ditampilkan dalam urutan terbalik.
Parameters: {…Number[][]} data
Array dua dimensi dari indizes genteng. Beberapa sebutan mungkin.
4.2.3 enchant.Node
Kelas dasar untuk objek di pohon layar yang berakar pada adegan sebuah. Tidak digunakan secara langsung.
Class Detail
enchant.Node()
9
Field Detail
{Number} age Usia (frame) dari node ini yang akan meningkat sebelum node ini menerima enchant.Event.ENTER_FRAME.
{enchant.Group} parentNode Node induk dari Node ini.
{enchant.Scene} scene Adegan yang dimiliki Node.
{Number} x x koordinat Node.
{Number} y y koordinat Node
Method Detail
moveBy(x, y) Pindahkan Node relatif terhadap posisi saat ini.
Parameters: {Number} x sumbu x jarak gerakan. {Number} y
y jarak sumbu gerakan.
moveTo(x, y) Pindahkan Node ke lokasi target yang diberikan.
Parameters: {Number} x Menargetkan x koordinat. {Number} y
Menargetkan y koordinat.
4.2.4 enchant.Group
Sebuah kelas yang dapat menampung beberapa enchant.Node.
Class Detail
enchant.Group()
10
var stage = new Group(); stage.addChild(player); stage.addChild(enemy); stage.addChild(map);
stage.addEventListener(‘enterframe’, function() {
// Moves the entire frame in according to the player’s coordinates. if (this.x > 64 – player.x) {
this.x = 64 – player.x;
}
});
Field Detail
{enchant.Node[]} childNodes Nodes anak.
{enchant.Node} rstChild Node yang merupakan anak pertama.
{enchant.Node} lastChild Node yang merupakan anak terakhir.
{Number} originX
|
Titik asal rotasi, skala
|
{Number} originY
|
Titik asal rotasi, skala
|
{Number} rotation
|
Sudut rotasi kelompok (derajat).
|
{Number} scaleX Scaling Faktor pada sumbu x dari Grup. See:enchant.Group#originX,enchant.Group#originY {
Number} scaleY Scaling Faktor pada sumbu y dari Grup. See:enchant.Group#originX,enchant.Group#originY
11
Method Detail
addChild(node) Menambahkan Node kepada Grup.
Parameters: {enchant.Node} node
Menambahkan Node
insertBefore(node, reference) Menggabungkan Node ke Group.
Parameters: {enchant.Node} node Menggambungkan Node {enchant.Node} reference
Node dalam posisi sebelum penyisipan.
removeChild(node) Menghapus Node dari grup
Parameters: {enchant.Node} node
Node yang akan dihapus.
4.3 Membuat Simpel Game dengan enchant.js
4.3.1 Mempersiapkan Struktur Proyek Anda
Enchant.js tidak menerapkan struktur direktori untuk proyek-proyek. Anda dapat struktur folder proyek cara apapun yang Anda suka. Jadi dalam tutorial ini, Anda akan struktur hal dengan cara yang masuk akal bagi saya. Mudah- mudahan, itu akan masuk akal untuk Anda, juga. Sebelumnya anda download terebih dahulu asset-aset ini untuk tutorial, dan unzip pada hard drive anda.
Pergi ke direktori yang Anda ingin menjadi ruang kerja Anda dan membuat folder baru bernama penguindive.
Selanjutnya, buatlah subfolder dengan didalamnya terdapat folder penguin- dive kamu jadi folder tersebut akan seperti ini:
penguindive/
penguindive/js
penguindive/js/lib
penguindive/res
Res dan js folder akan di mana Anda menyimpan le JavaScript Anda dan aset permainan Anda, masing-masing. Folder lib akan di mana Anda menyimp- an pihak ketiga JavaScript le / perpustakaan.
Langkah berikutnya adalah untuk menempatkan semua aset permainan An- da download tadi di dalam folder res. Cukup ekstrak le ZIP dan menyalin le.
12
Gambar 1: enchant.js
Setelah Anda melakukan itu, Anda harus memiliki le- le berikut di folder res:BG_Over.png
BG.png
bgm.mp3
Eat.mp3shSheet.png Hit.mp3 Ice.png
penguinGameOver.png
penguinSheet.png
Anda tidak akan menggunakan semua le- le ini dalam tutorial ini. Namun, jangan ragu untuk menggunakannya untuk memperpanjang permainan Anda sendiri, sebagai tantangan. Ada beberapa saran untuk bagaimana melakukan ini pada akhir tutorial.
Berikutnya, ekstrak enchant.js arsip Anda download dari GitHub. Salin le enchant.jsdan memasukkannya ke dalam js Anda \ folder lib.
13
Catatan: Anda akan melihat bahwa ada dua versi dari enchant.js dalam arsip –enchant.js dan enchant.min.js. File kedua adalah versi mini ed, di mana ruang ekstra dan tombol kembali telah dihapus untuk membuat versi download terkecil yang mungkin untuk kode.
Sejak versi yang juga menggantikan nama variabel dan metode dengan sing- kat (biasanya dimengerti) alternatif, itu tidak menyebabkan kode yang sangatterbaca-manusia. Jadi yang terbaik untuk menggunakan versi standar kode sela- ma pengembangan dan debugging (enchant.js) dan menggunakan versi mini ed dalam produksi (enchant.min.js).
Anda sekarang siap untuk memulai coding yang sebenarnya!
4.3.2 Kenapa Hello There, Ocean!
Mari kita mulai dengan sesuatu yang sederhana: mengatakan Hello word di mana permainan Anda akan berlangsung.
Meluncurkan editor teks favorit Anda dan mulai dengan membuat le in- dex.html, yang seperti yang saya yakin Anda menyadari, akan menjadi le per- tama dimuat ketika folder game diakses melalui browser:
Simpan le (nama itu index.html) dalam folder penguindive.
Kode HTML cukup sederhana. Anda sudah termasuk dua le JavaScript – perpustakaan enchant.js sendiri, dan main.js, yang akan menjadi le mana Anda menulis kode untuk permainan Anda.
Berikutnya, buat main.js dan tambahkan kode berikut untuk itu (sebagai leindex.html ditunjukkan, le main.js masuk dalam subfolder js ketika Anda menyimpannya):
14
Kode di atas adalah semua yang Anda butuhkan untuk mendapatkan kerja enchant.jsgame. Mari kita langkah-demi-langkah:
1.Ekspor semua kelas perpustakaan global. Hal ini memungkinkan Anda un- tuk menggunakan kelas dari enchant.js tanpa harus mengetik namespace setiap kali.
2.Membuat fungsi yang akan dipanggil sekali dokumen HTML selesai loa- ding. Anda akan menginisialisasi permainan Anda di dalam fungsi ini.
3.Membuat sebuah instance dari kelas permainan, yang merupakan kelas aplikasi utama permainan enchant.js. Konstruktor untuk kelas Permain- an membutuhkan dua argumen: lebar dan tinggi layar permainan dalam piksel.
4.Preload gambar latar belakang untuk permainan. Bila Anda memiliki sumber daya yang mengambil banyak waktu untuk memuat (seperti gam- bar besar atau soundtrack latar belakang), itu ide yang baik untuk me- muat mereka sebelum Anda benar-benar perlu untuk menggunakannya.
5.Mengkon gurasi pengaturan pertandingan. Perhatikan garis pengaturan frame rate game ke 30 fps (frame per detik). Ini tidak berarti bahwa permainan akan selalu dijalankan pada 30 fps. Ini sangat mungkin bahwa fps akan turun pada platform mobile. Pikirkan ini sebagai fps maksimum bahwa permainan akan mencoba yang terbaik untuk mencapai.
6.Acara onload Game objek akan dipanggil setelah permainan selesai loading segala sesuatu di antrian preload. Ini adalah titik masuk dari permainan Anda.
15
Gambar 2: Konsol Browser
7.Seperti nama metode menyiratkan, ini akan memulai permainan Anda. Memulai permainan Anda akan memulai proses preloading, dan memang- gil metode onload setelah preloading selesai.
Catatan: frame rate game ini dan skala tidak dapat diubah setelah Anda memu- lai permainan. Pastikan untuk mengatur mereka sebelum memanggil game.start ()!
Simpan main.js. Anda Saatnya untuk melihat apakah permainan Anda ber- jalan dengan benar pada browser desktop. Cukup index.html terbuka, atau, jika Anda menggunakan server web, arahkan ke folder game via localhost.
Ketika Anda membuka halaman permainan, seharusnya tidak ada apa-apadi layar – setelah semua, Anda tidak memasukkan apa pun di sana belum! Tetapi jika Anda memeriksa JavaScript konsol browser Anda, Anda akan melihat “Hai, Ocean!” Ditampilkan
4.3.3 Node, Tema dan Game: The Konsep Dasar
Ketika bekerja dengan enchant.js, ada beberapa konsep dasar yang perlu Anda ketahui:
Scene
enchant.js menggunakan konsep adegan untuk menangani aliran permainan. Sebuah permainan dapat memiliki banyak adegan, tetapi hanya salah satu dari mereka dapat berjalan pada satu waktu. Dengan beralih adegan, Anda dapat mengubah permainan negara / layar.
Misalnya, aliran permainan akan terlihat seperti ini:
Menurut diagram, ada empat adegan dalam permainan. Mulai dari adegan Judul, pemain dapat pergi ke Scene permainan, di mana gameplay utama ber- langsung. Dari sana, mereka dapat beralih antara Scene permainan dan Scene Pilihan untuk menyesuaikan pengaturan permainan.
Setelah pemain adalah kembali Scene permainan dan permainan berakhir, permainan bergerak ke Game Tema Over, sebelum kembali ke Scene Judul lagi, siap untuk sesi game berikutnya.
16
Gambar 3: Scene
Game
Seperti yang dinyatakan sebelumnya, kelas Game kelas aplikasi utama. Salah satu objek permainan merupakan salah satu enchant.js permainan tunggal. Ga- me kelas juga bertindak sebagai adegan Manager. Menyimpan contoh adegan dalam tumpukan, di mana adegan top pada stack adalah adegan aktif.
Dalam enchant.js, permainan selalu datang dengan sebuah adegan yang dise- but Root Scene (yaitu adegan pertama di stack). Dengan memanipulasi adegan stack, Anda dapat mengubah keadaan permainan dengan mudah.
berikut adalah tiga cara Anda dapat memanipulasi adegan tumpukan mela- lui objek permainan:
ˆReplace: ini menggantikan adegan aktif dengan yang baru. Anda tidak bisa kembali ke tempat lama, kecuali jika Anda menyimpan referensi ke suatu tempat sebelum menggantinya.
ˆPop: Ini menghilangkan adegan di atas tumpukan, membuat adegan ber- ikutnya dalam tumpukan adegan aktif.
Node
Adegan di enchant.js diimplementasikan menggunakan struktur data pohon. Oleh karena itu, banyak objek dalam pertandingan enchant.js node. Bahkan, jika Anda sudah familiar dengan perkembangan Cocos2D, konsep ini cukup mirip dengan node di Cocos2D.
17
Gambar 4: Replace
18
Gambar 5: Pop
19
Ada banyak jenis node di enchant.js. Berikut adalah beberapa contoh, semua yang akan Anda gunakan segera:
ˆSprite: node untuk menampilkan gambar statis dan animasi.
ˆLabel: node untuk menampilkan teks.
ˆGroup: node untuk mengelompokkan banyak node bersama-sama.
Oleh karena itu, adegan sebenarnya pohon node, di mana akar adalah simpul Scene. Ini mungkin memiliki beberapa anak node yang sprite, label, dan seba- gainya.
Apakah Anda “node” apa yang saya maksud? Tidak terlalu? Mari kita menulis beberapa kode untuk membantu Anda memahami hal ini lebih baik!
Tambahkan baris berikut ke main.js setelah Anda mencetak ke konsol “Hai, Ocean!”:
//1 – Variables var scene, label, bg;
//2 – New scene scene = new Scene();
//3 – Add label
label = new Label(“Hi, Ocean!”); // 4 – Background
bg = new Sprite(320,440);
bg.image = game.assets[‘res/BG.png’];
//5 – Add items scene.addChild(bg); scene.addChild(label);
//6 – Start scene game.pushScene(scene);
Mari kita lihat lebih dekat pada setiap bagian:
ˆMende nisikan beberapa variabel yang akan digunakan dalam kode beri- kut.
ˆBuat adegan kosong. Anda akan menggunakan adegan ini sebagai adegan permainan utama Anda.
ˆBuat simpul Label untuk menampilkan teks “Hai, Samudra!” Di layar. Kelas Label konstruktor mengambil satu argumen, yang merupakan teks yang ingin ditampilkan.
ˆBuat simpul Sprite untuk gambar latar belakang. Konstruktor mengambil dua argumen: lebar dan tinggi gambar yang ingin ditampilkan. Setelah
20
sprite dibuat, Anda menetapkan gambar yang ingin sprite ini untuk me- nampilkan. Anda dapat mengakses data gambar Anda telah dimuat ke dalam permainan melalui permainan aset kamus. Kamus ini akan meme- takan jalan ke sumber daya dimuat. Karena Anda mengatakan permainan untuk preload le di path res / BG.png, jalan ini akan digunakan sebagai kunci yang memetakan dengan latar belakang laut.
ˆMenambahkan node baru ke TKP. Metode addChild berarti bahwa node Anda tambahkan akan menjadi salah satu node anak adegan itu.
Catatan: Urutan di mana Anda menambahkan node ke sebuah adegan penting. Dalamenchant.js, kerangka akan menarik node baru ditambahkan di atas orang- orang yang ditambahkan sebelumnya.
Jika Anda beralih urutan kode di atas, Anda tidak akan melihat label meskipun sebenarnya dalam adegan. Hal ini karena latar belakang akan berada di atas label.
ˆAdegan Anda siap. Saatnya untuk membuat adegan ini adegan aktif An- da. Untuk melakukan ini, Anda hanya mendorong adegan ke adegan per- mainan stack.
Simpan main.js dan kembali halaman browser Anda. Anda akan melihat sesuatu yang mirip dengan berikut:
4.3.4 Object-Oriented Style dengan enchant.js
Enchant.js sudah dilengkapi dengan kerangka berorientasi objek sendiri. Tanpa ini, Anda akan harus membuat adegan dan menambahkan segala sesuatu dalam acara onload permainan. Sementara ini sederhana, kerangka OOP yang en- chant.jsmemberikan membuat lebih mudah bagi Anda untuk memperpanjang kode Anda, dan kode Anda akan menjadi lebih bersih dalam jangka panjang!
OOP di enchant.js menggunakan implementasi yang sama seperti Proto- type.js, dalam kasus Anda akrab dengan Prototype. Jadi, dalam rangka untuk membuat kelas baru, Anda hanya perlu melakukan hal berikut:
initialize adalah fungsi konstruktor. Ini akan dipanggil ketika Anda membuat contoh baru dari kelas.
21
Gambar 6: Hai Ocean
22
Untuk menambahkan metode, cukup tambahkan koma pada akhir metode terakhir sebelum memulai yang baru.
Jika Anda ingin membuat ClassB yang merupakan subclass dari ClassA, Anda akan menerapkan ClassB seperti ini:
Dilengkapi dengan pengetahuan ini, mari kita refactor kode sebelumnya menggunakan sistem OOP enchant.js.
Pergi ke akhir window.onload di main.js (setelah game.start ();) dan tam- bahkan baris-baris:
Kode di atas menciptakan SceneGame sebagai subclass dari Scene. Mari kita pergi atas kode:
1.Memanggil konstruktor dari Scene, yang merupakan superclass dari Sce- neGame Anda, untuk melakukan apapun perlu inisialisasi.
2.Sering kali Anda akan menemukan diri Anda yang membutuhkan mengak- ses objek permainan, terutama ketika Anda ingin mengakses kamus aset. Untungnya, contoh permainan yang tunggal, yang berarti hanya ada satu contoh dari permainan dan dapat diakses dari mana saja. Baris kode akan menetapkan Game contoh tunggal untuk variabel game untuk digunakan nanti.
3.Buat node anak untuk adegan, seperti sebelumnya.
4.Tambahkan node anak seperti sebelumnya, tapi kali ini menggunakan ini bukan adegan karena variabel ini mengacu pada contoh saat SceneGame.
23
Maka garis masih melakukan hal yang sama – yaitu, menambahkan node ke TKP simpul Anda.
Dengan ini, Anda akhirnya menciptakan kelas enchant.js pertama Anda! Saatnya untuk menggunakan SceneGame. Ganti kode di dalam game.onload
dengan berikut:
Onload permainan sekarang jauh lebih bersih. Anda instantiate objek Sce- neGame, dan menambahkannya ke adegan stack.
Simpan perubahan Anda dan kembali browser. Ini harus persis sama seper- ti sebelumnya, kecuali sekarang kode Anda siap untuk diperpanjang menjadi sebuah permainan penuh!
4.3.5 Memunculkan Penguins
Saatnya untuk memperkenalkan pahlawan air es-mencintai permainan Anda – penguin! Tambahkan res / penguinSheet.png ke daftar sumber daya preload di window.onload di main.js:
Pergi ke konstruktor SceneGame dan menambahkan variabel bernama pe- nguin baru ke baris pertama:
var game, label, bg, penguin;
Kemudian tambahkan kode berikut tepat setelah Anda menetapkan gambar ke node bg:
Dua baris pertama mirip dengan apa yang Anda lakukan dengan latar be- lakang. Anda membuat Sprite simpul baru berukuran 30 Ö 43 piksel, dan menetapkan le gambar ke sprite penguin.
Dua baris berikutnya mengatur posisi penguin. Perhatikan bagaimana mu- dahnya untuk mengakses layar dan lebar penguin. Anda dapat mengakses dan memodi kasi ketinggian simpul sama.
Akhirnya, jangan lupa untuk menambahkan penguin ke TKP. Jika tidak, Anda tidak akan melihatnya di layar!
Tambahkan kode berikut tepat setelah baris menambahkan node bg ke tem- pat kejadian. Ingat bahwa urutan di mana Anda menambahkan node penting!
24
Gambar 7: Penguin
this.addChild(penguin);
Anda ingin penguin untuk berada di atas latar belakang, tetapi di bawah label. Oleh karena itu, Anda harus menambahkan dia setelah latar belakang, tapi sebelum label.
Sekarang menyimpan perubahan dan kembali halaman tersebut di browser Anda untuk melihat keadaan saat permainan Anda:
Anda sekarang harus melihat penguin di layar. Bukti visual Anda pertama kemajuan!
4.3.6 Pandangan lebih dekat di Sprite
Sementara penguin terlihat seperti itu hanyalah simpul Sprite, itu sedikit ber- beda jika dibandingkan dengan Sprite latar belakang.
Lihatlah bagaimana Anda menciptakan sprite penguin:
penguin = new Sprite(30,43);
25
Ingat apa artinya ini? Baris ini dibuat sprite dengan ukuran 30 Ö 43. Namun, jika Anda melihat le penguinSheet.png, Anda akan melihat bahwa
ukuran gambar yang sebenarnya 60 Ö 43. Mengapa, yang pasti tidak 30 Ö 43!
Jadi apa artinya ini? Bila Anda instantiate sprite dengan ukuran 30 Ö 43, tapi menetapkan gambar berukuran 60 Ö 43 untuk itu, ini adalah bagaimana enchant.jsmelihat gambar:
Sprite node dalam enchant.js memperlakukan gambar yang menetapkan se- bagai lembar sprite. Ini akan menggunakan ukuran yang Anda berikan ukuran frame, dan memberikan nomor indeks untuk setiap frame. Indeks akan mulai dari 0, menghitung dari kiri ke kanan dan atas ke bawah.
Anda dapat mengubah frame animasi dengan menyetel properti bingkai dari Sprite. Ini adalah apa yang Anda akan lakukan selanjutnya!
4.3.7 Dasar Animasi
Karena ada akan banyak hal yang terjadi dengan penguin Anda, lebih baik untuk menempatkan dia ke kelas sendiri. Dan itulah bagaimana kaya baru Anda, batu-menantang penguin lebih suka itu.
Tambahkan kode untuk kelas Penguin tepat di bawah SceneGame di main.js, sebagai berikut:
Penguin adalah subclass dari Sprite. Seperti Anda mungkin telah melihat, garis yang memanggil konstruktor superclass sedikit berbeda dari apa yang Anda gunakan ketika Anda subclassed Scene. Hal ini karena konstruktor Sprite membutuhkan dua argumen.
Untuk mengirim argumen untuk konstruktor superclass Anda, Anda mele- wati mereka sebagai array dalam argumen kedua.
Dua baris di bagian # 2 bernyawa penguin Anda. Pada baris pertama, Anda
26
mendeklarasikan variabel contoh, yang akan digunakan sebagai timer untuk animasi Anda. Baris kedua memperkenalkan Anda ke sistem acara di enchant.js. Jika Anda sudah familiar dengan ActionScript atau pengembangan Corona, Anda akan menemukan ini mudah dimengerti.
Sederhananya, benda-benda di enchant.js dapat api peristiwa yang objek lain mungkin akan tertarik. Jika suatu benda tertarik peristiwa tertentu, Anda dapat memberitahu objek yang mendengarkan untuk acara itu dan menentukan fungsi yang harus dipanggil sekali bahwa peristiwa tertentu terjadi.
Oleh karena itu, pada baris di atas, Anda memberitahu penguin untuk men- dengarkan acara ENTER_FRAME, dan memanggil metode bernama update- Animation setiap kali peristiwa ini terjadi.
ENTER_FRAME merupakan acara yang dipecat setiap frame, mirip de- ngan fungsi update dalam lingkaran permainan.
Kelas Penguin Anda tidak memiliki metode updateAnimation belum. Itu benar, Anda akan menambahkan satu!
Menjaga petunjuk sebelumnya untuk menulis kelas dalam pikiran, tambahk- an koma setelah penjepit keriting penutupan untuk initialize di kelas Penguin, dan kemudian tambahkan kode berikut untuk kelas Penguin:
Karena Anda sudah pindah semua hal-sprite yang berkaitan dengan kelas Penguin, semua yang perlu Anda lakukan adalah instantiating sebuah instance dari kelas Penguin dan posisi itu.
Simpan le dan refresh browser untuk melihat apa yang telah Anda capai. Penguin Anda sekarang bergerak! Er, setidaknya dia mengepakkan sirip nya.
Dia masih hidup – dan arus air yang memanggil. Mari kita mendapatkan dia dalam perjalanan.
4.3.8 Mendeteksi Sentuhan
Sekarang bahwa Anda punya mengepakkan penguin, saatnya untuk mendapatk- an dia merespon sentuhan pemain. Untuk melakukan ini, Anda akan membagi layar menjadi tiga bagian vertikal. Ketika pemain klik atau menyentuh pada bagian manapun, penguin cepat akan bergerak ke bagian dari layar.
Sentuh / klik deteksi di enchant.js adalah yang sederhana seperti mende- ngarkan untuk acara sentuhan. Tambahkan kode berikut ke akhir konstruktor SceneGame:
27
Gambar 8: Penguin
28
TOUCH_START adalah salah satu peristiwa sentuhan Anda dapat mende- teksi. Tiga peristiwa sentuhan yang tersedia adalah:
ˆTOUCH_START: kebakaran ketika tombol mouse diklik atau jari me- nyentuh layar.
ˆTOUCH_MOVE: terus menembak selama pemain menyeret mouse sambil menekan tombol, atau bergerak jari yang terus menyentuh layar.
ˆTOUCH_END: kebakaran setelah pemain melepaskan tombol mouse, atau mengangkat jari dari layar.
Karena Anda mendengarkan TOUCH_START, handleTouchControl akan di- panggil segera setelah pemain menyentuh layar.
Tambahkan handleTouchControl ke kelas SceneGame (jangan lupa koma setelah metode sebelumnya):
Anda membagi lebar layar sebesar 3 untuk mendapatkan lebar masing- masing bagian / jalur.
Nilai evt untuk acara sentuhan berisi informasi tentang posisi sentuhan, dan Anda dapat mengaksesnya melalui x dan y properti. Kemudian Anda menggunakan informasi ini untuk menemukan nomor jalur. Setelah Anda telah menentukan yang jalur diklik / menyentuh, Anda memberitahu penguin untuk pindah ke jalur itu.
Menambahkan metode switchToLaneNumber untuk kelas Penguin (perha- tikan bahwa metode baru masuk Penguin dan tidak SceneGame):
Tidak ada yang rumit di sini – Anda hanya menghitung posisi x untuk pe- nguin, mengingat jumlah lajur.
Simpan main.js dan refresh browser lagi. Sekarang coba klik pada layar, dan Anda akan melihat penguin pindah ke jalur yang Anda pilih.
29
Gambar 9: Penguin Bergerak
30
4.3.9 Ice Ice Baby
Penguin Anda sekarang dapat berenang sekitar, tetapi jika ini adalah untuk menjadi permainan yang tepat, harus ada beberapa kendala bagi penguin untuk menghindar. Sudah saatnya Anda menambahkan beberapa – jangan biarkan penguin terlalu mudah!
Mulailah dengan menambahkan kelas Ice akhir main.js:
Kelas Ice juga subclass dari kelas Sprite. The Ice konstruktor mengambil argumen yang menunjukkan jalur mana ia akan muncul.
Perhatikan bahwa kelas Ice Anda hilang dua metode. Yang pertama adalah setLane, yang akan Anda gunakan untuk mengatur posisi objek sesuai dengan jumlah lane. Yang kedua adalah update, yang Anda sebut setiap kali EN- TER_FRAME terjadi.
Tambahkan setLane ke kelas Ice sebagai berikut:
itu metode sederhana. Ini menghitung kecepatan rotasi acak untuk Ice, yang akan Anda gunakan untuk menghidupkan es dalam metode pembaruan. Kemudian posisi Sprite diatur, berdasarkan jalur.
Salah satu metode bawah, satu lagi untuk pergi! Tambahkan metode update sebagai berikut:
31
Sekali lagi, ini adalah cukup sederhana. Anda terus menambahkan kecepatan untuk y posisi es sehingga itu akan bergerak dari atas layar ke bawah. Anda juga menggunakan rotationSpeed untuk menjaga batu es berputar.
Setelah es bergerak melampaui bawah layar, itu dihapus dari node induk, efektif mengeluarkannya dari tempat kejadian.
Anda dapat mengakses node induk setiap node melalui properti parentNode. Dengan itu, Anda dapat memberitahu es induk simpul untuk menghapus es dari struktur pohon setelah bergerak melampaui bagian bawah layar. Ingat node dan adegan hubungan? Jika Anda menambahkan es ke TKP, adegan menjadi node induk es.
Anda menggunakan sumber daya, res / Ice.png, bahwa Anda belum meng- atakan permainan untuk preload. Jadi mari kita kembali ke awal main.js dan menambahkannya ke daftar preload.
Memodi kasi garis preload terlihat seperti ini:
Dan dengan ini, kelas Ice Anda membeku dan siap untuk menyebarkan. Mengapa Anda tidak mengujinya dengan membuat batu es muncul setiap tiga detik!
Untuk melakukan hal ini, pergi ke SceneGame konstruktor. Tambahkan baris berikut setelah baris TOUCH_START pendengar acara:
Menambahkan metode update untuk SceneGame sebagai berikut:
32
Gambar 10: Rintnagan Penguin
Simpan perubahan Anda dan menjalankan game lagi. Sekarang batu-batues akan muncul pada posisi acak setiap 0,5 detik!
4.3.10 Mendeteksi Tabrakan(Collision)
Yap, batu-batu es pergi kanan melalui penguin. Anda harus melakukan sesua- tu tentang hal ini, atau penguin Anda akan mendapatkan malas dan sebelum
33
kau tahu itu, dimakan oleh ikan paus pembunuh. Buatlah dia berjuang untuk hidupnya!
Mulailah dengan menambahkan variabel baru ke konstruktor SceneGame, sehingga baris pertama terlihat seperti ini:
var game, label, bg, penguin, iceGroup;
Kemudian tambahkan kode ini di konstruktor SceneGame, tepat setelah menciptakan penguin:
Di sini Anda telah membuat simpul Grup yang disebut iceGroup. Masih ingat apa node Group adalah?
Sebuah Group adalah node yang dapat berisi node lain, seperti apa adeg- an lakukan dengan sprite dan label. Anda akan menggunakan grup ini untuk menyimpan semua batu-batu es, sehingga Anda dapat mengatur mereka semua dari satu tempat.
Berikutnya, menambahkan grup baru ke TKP. Pergi ke mana Anda menam- bahkan node ke TKP di konstruktor SceneGame dan tambahkan kode berikut, segera setelah di mana Anda menambahkan node bg:
this.addChild(iceGroup);
Dengan menambahkan iceGroup setelah latar belakang tapi sebelum pengu- in, Anda memastikan bahwa penguin akan selalu berada di atas es. Menggunak- an node Group, Anda dapat membuat sistem lapisan yang memberikan Anda kontrol lebih besar atas urutan rendering.
Pergi ke metode update SceneGame ini. Ingat di mana Anda menghasilkan batu es? Membuat perubahan berikut:
//this.addChild(ice);
this.iceGroup.addChild(ice);
Anda tidak menambahkan batu baru langsung ke TKP lagi. Sebaliknya, baru dibuat batu-batu yang ditambahkan ke grup es. Tapi mereka masih ak- an diberikan di tempat kejadian, karena Anda sudah menambahkan kelompok untuk adegan di konstruktor.
Itu semua baik dan bagus, saya mendengar Anda berkata. Tapi apa semua ini harus dilakukan dengan batu-batu memukul penguin? Anda mendapatkan ada. :] Bahkan, saatnya untuk bekerja pada tabrakan sehingga Anda dapat mengetahui kapan batu hits penguin!
Satu hal yang baik tentang node Group adalah bahwa Anda telah mengum- pulkan koleksi node Anda tertarik. Anda akan pergi melalui setiap batu dalam kelompok dan melihat apakah itu bertabrakan dengan penguin Anda.
Masih di dalam metode update SceneGame, tambahkan baris berikut setelah
34
jika blok:
Sebuah node Group memiliki array childNodes yang melacak semua anak- anaknya. Ini blok iterates kode melalui setiap anak dan cek jika bertabrakan dengan penguin.
Sebuah instance dari kelas Sprite memiliki metode berpotongan yang dapat Anda gunakan untuk memeriksa apakah dua sprite yang berpotongan. Sejak Es dan Penguin keduanya subclass dari Sprite, Anda dapat memeriksa apakah ke- dua berbenturan dengan menggunakan metode ini. Jika batu besar bertabrakan dengan penguin, Anda menghapus batu dari grup.
Simpan main.js dan refresh browser Anda. Sekarang, ketika batu besar bertabrakan dengan penguin Anda, itu harus menghilang!
Untuk saat ini, Anda akan meninggalkan penguin untuk membayangkan bahwa dia menghancurkan terpisah mereka batu-batu dengan paruhnya setiap kali ia bertabrakan dengan satu. Anda akan menerapkan realitas suram segera.
4.3.11 Perhitungan Skor
Permainan ini bisa menggunakan cara untuk menjaga skor. Jadi, mari kita mengubah “Hi, Ocean” label menjadi sesuatu yang lebih berguna.
Pergi ke mana Anda membuat label di konstruktor SceneGame dan memo- di kasi kode untuk terlihat seperti ini:
Kali ini Anda mengatur teks untuk SCORE<br> 0. <br> antara SCORE dan 0 adalah tag line-break.
Sisa kode set properti label, seperti posisinya, warna, font, dan perataan teks. Ini harus jelas.
Untuk beberapa efek yang menarik, Anda dapat mengedit gaya CSS dari label dengan mengakses properti _style. Sebagai contoh:
35
Gambar 11: Skor Penguin
label._style.textShadow =”-1px 0 black, 0 1px black, 1px 0 black, 0 -1px black”;
Baris di atas menggunakan properti text shadow menambahkan perbatasan hitam di sekitar teks.
Akhirnya, Anda tetap referensi ke label dalam hal SceneGame Anda dengan nama scoreLabel. Simpan dan menjalankan permainan lagi. “Hi, Ocean” label sekarang harus di tengah atas layar permainan, dan harus membaca, “SCORE 0”.
Tentu saja, saat ini tidak ada mekanisme gol! Anda akan meningkatkan skor seiring berjalannya waktu.
Tambahkan dua variabel berikut pada akhir konstruktor SceneGame ini:
Anda menggunakan scoreTimer sebagai timer untuk meningkatkan skor per- tandingan dengan berjalannya waktu, sedangkan variabel nilai mengandung skor pertandingan (jelas!).
36
Anda ingin label melaporkan skor saat pemain. Setiap kali skor dimodikasi, teks pada label harus diperbarui juga. Oleh karena itu, itu adalah ide yang baik untuk membungkus modi kasi skor menjadi sebuah metode.
Menambahkan metode yang disebut setScore ke SceneGame:
Metode ini tidak persis apa yang Anda inginkan. Ini perubahan skor, dan update label skor untuk mencerminkan nilai saat ini.
Pergi ke metode update SceneGame dan tambahkan baris berikut di awal:
Anda mungkin akrab dengan pola ini sekarang: setiap 0,5 detik, Anda me- ningkatkan skor dengan 1 poin menggunakan metode setScore.
Simpan dan menjalankan permainan lagi. Sekarang meningkat skor dengan setiap melewati kedua, dan Anda bahkan tidak perlu berpura-purauntuk ber- main! Wow, bisa mendapatkan game ini lebih sulit atau menarik?
4.3.12 Memberikan Musik
Sebelum Anda mengkon gurasi permainan akhir Anda, mari kita berhenti seje- nak untuk bertanya: apa permainan yang baik tanpa beberapa efek suara manis dan musik?
enchant.js juga dilengkapi dengan sistem audio yang sederhana. Namun, sementara sistem audio bekerja dengan cukup baik pada browser desktop, ini tidak cukup kasus untuk mobile browser.
Audio pada browser mobile masih merupakan masalah besar pada OS apa- pun. Saat ini, diterima untuk HTML5 mobile game untuk TIDAK memiliki audio sama sekali. Mudah-mudahan, hal ini akan memperbaiki browser mobile segera.
Sistem audio di enchant.js menggunakan Web Audio API dengan Flash mun- dur. Untuk mengaktifkan ash mundur, Anda harus menambahkan beberapa le pembantu untuk proyek Anda.
Pergi ke folder enchant.js (satu di mana Anda diekstrak le dari proyek GitHub) dan copy sound.as dan sound.swf:
Kembali ke folder proyek Anda dan paste le disalin ke dalam folder root, penguindive. Sekarang, jika browser tidak mendukung Web Audio, ia akan
37
Gambar 12: Penguin poin
38
Gambar 13: Sound
menggunakan Flash untuk memutar le suara sebagai gantinya.
Sudah waktunya untuk preload lebih banyak barang! Memodi kasi garis preload dimain.js menjadi sebagai berikut:
Dalam metode update SceneGame ini, pergi ke jika blok di mana Anda memeriksa tabrakan. Memodi kasi jika blok terlihat seperti ini:
Tidak seperti gambar, le audio dimuat oleh enchant.js akan disimpan se- bagai objek Suara dalam kamus aset. Anda dapat mengakses objek-objek ini secara langsung dan memanggil metode bermain untuk bermain audio.
Simpan dan menjalankan permainan. Ketika penguin hits batu besar, efek suara memukul harus bermain, yang terdengar agak seperti papan membanting dinding (well, setidaknya jika Anda menggunakan browser yang mendukung itu).
39
Catatan: Pemutaran Audio mungkin atau mungkin tidak bekerja dengan benar, tergantung pada browser. Bekerja dengan baik bagi saya di Safari pada Mac, tetapi tidak akan bekerja dengan benar dengan Firefox beta terbaru jika saya memuat le secara langsung. Tetapi jika saya dimuat permainan melalui server web lokal, maka itu bekerja dengan baik pada Firefox juga.
Jadi, jika Anda mendapatkan sebuah bar loader (biasanya muncul sangat ce- pat tanpa suara pra-loading, dan sehingga Anda mungkin tidak menyadarinya) dan tidak lengkap, kemudian mencoba browser yang berbeda atau, jika Anda memuat le langsung, mencoba memuat melalui server web lokal. Jika tidak ada yang berhasil, menghapus suara pra-loading, dan hal yang harus bekerja dengan benar lagi.
Berikutnya, Anda akan menambahkan musik latar belakang untuk permain- an. Pergi ke mana Anda mendeklarasikan variabel misalnya dalam konstruktor SceneGame. Tambahkan berikut setelah variabel misalnya:
Kode di atas menyimpan benda suara musik latar untuk digunakan, dan kemudian memberitahu musik latar belakang untuk bermain.
Karena tidak ada pilihan lingkaran dalam sistem audio enchant.js, Anda harus melaksanakan secara manual. Ini blok kode memeriksa untuk melihat apakah waktu audio saat telah mencapai akhir dari le audio. Jika memiliki, maka audio dimainkan dari awal lagi.
Simpan dan menjalankan permainan, dan Anda harus mendengar berma- in musik latar belakang – sebuah lagu bahagia dan konyol, sempurna untuk permainan ini!
4.3.13 Penguin
Anda hampir ada! Saatnya untuk membuat hidup menantang untuk penguin riang Anda. Dia akan dihukum karena memukul es dengan kematian, dan ketika dia meninggal, Anda akan memungkinkan pemain untuk memulai permainan.
Mulailah dengan menciptakan kelas SceneGameOver. Tambahkan kode ini ke akhirmain.js, seperti halnya dengan semua kelas-kelas lain:
40
Seperti SceneGame, SceneGameOver adalah subclass dari kelas Scene. An- da akan menciptakan dua label untuk menunjukkan di layar. Satu label akan berkata “Game Over”, dan yang lain akan melaporkan skor akhir.
Anda juga mengatur warna latar belakang dari tempat kejadian saat ini, daripada menggunakan gambar. Saat warna diatur ke hitam, tapi Anda dapat mencoba warna lain jika Anda ingin.
Catatan: Daripada nama warna, Anda juga dapat menggunakan kode hex atau nilai-nilai warna RGB. Sebagai contoh:
Tambahkan kode berikut tepat setelah mana Anda mengatur warna latar belakang di SceneGameOver:
Ini sangat mudah: Anda membuat label dan menyesuaikan gaya. Berikutnya membuat label untuk melaporkan skor akhir. Tambahkan kode
berikut tepat setelah kode sebelumnya:
Sama seperti Anda lakukan sebelumnya, ini akan membuat label skor. Va- riabel nilai berasal dari konstruktor SceneGameOver. Ini berarti bahwa ketika Anda membuat sebuah instance dari adegan ini, Anda harus melewati skor akhir untuk itu. Label Anda siap. Saatnya untuk menambahkannya ke scene!
Tambahkan kode berikut setelah blok sebelumnya:
41
Akhirnya, membuat adegan mendengarkan acara TOUCH_START, sehing- ga pemain dapat me-restart permainan dengan menekan pada layar. [TODO: Masukan mana ini?
SceneGameOver hilang metode untuk penangan sentuhan. Memperbaikinya dengan menambahkannya [TODO:? Dimana]:
Metode ini tidak apa-apa tapi ganti adegan saat ini dengan SceneGame, yang berarti bahwa permainan akan kembali ke SceneGame lagi.
Sekarang bahwa Anda memiliki SceneGameOver Anda siap, mari kita meng- gunakannya dalam permainan!
Sejak permainan akan pindah ke SceneGameOver saat penguin terkena oleh batu es, memodi kasi kode tabrakan Anda sebagai berikut:
Kode menghentikan musik latar belakang, dan kemudian memberitahu per- mainan untuk menggantikan adegan saat ini dengan sebuah contoh dari Scene- GameOver, menggunakan nilai saat ini sebagai argumen untuk Instansiasi.
Simpan main.js dan refresh browser Anda lagi. Biarkan penguin tertabrak batu dan menonton layar pergi hitam. Mengklik pada permainan di atas layar harus kembali Anda untuk permainan.
Permainan Anda selesai! Namun, semua sementara Anda telah menguji game ini pada browser desktop Anda
42
Gambar 14: Game over
Bab 5 Penutup
5.1 Kesimpulan
Dalam penulisan buku ini telah ditulis beberapa penulisan seperti pengenal- an, proses instalasi dan penggunaan dasar game engine Enchant.js yang dapat meunjang pengguna Enchant.js agar lebih baik lagi.
5.2 Saran
Penulis menyadari bahwa dalam penulisan buku ini masih banyak kekurang- an seperti kurangnya contoh penggunaan ataupun informasi lain terkait game engineEnchant.js. Penulis menyarankan kepada pembaca agar berkenan mem- berikan saran terhadap penggunaan game engine Turbulenz agar lebih diperda- lam lagi terutama dari segi contoh sempel program yang dibuat dengan game engineEnchant.js agar para pembaca menjadi tertarik untuk menggunakan dan pengguna lebih terbantu.
43
Daftar Pustaka
[1] Enchant.js, Documentation Enchant.js (http://enchantjs.com/download/, diakses tanggal 20 Oktober 2015)
[2]http://wise9.github.io/enchant.js/doc/plugins/en/index.html, diakses tang- gal 23 Oktober 2015)
[3]http://www.raywenderlich.com/23370/how-to-make-a-simple-html5-game-with-enchant-js, diakses tanggal 26 Oktober 2015)
44
