Membuat Game Whack-a-Mole di HTML5 dengan Menggunakan EaselJS

Indonesian (Bahasa Indonesia) translation by Kholisa Nurrahmah (you can also view the original English article)

Beberapa minggu yang lalu, saya telah menunjukkan cara membuat game Whack-a-Mole (atau, Whack-a-Worm) dengan menggunakan Flash dan AS3. Sekarang, ikutilah petunjuk mulai dari prakata hingga EaselJS saya, maka kita akan melihat bagaimana cara menggunakan pustaka itu untuk membuat game yang sama dengan kanvas HTML5 dan JavaScript.

Langkah 1: Tinjauan Singkat

Dengan menggunakan grafis yang dibuat sebelumnya kita akan membuat kode game Whack A Mole yang menghibur layaknya game di HTML5 menggunakan pustaka EaselJS.

Pemain akan dapat mengeklik cacing di layar dan mendapatkan poin.

Langkah 2: Antarmuka

Antarmuka yang sederhana dan ramah akan digunakan, ini akan melibatkan banyak bentuk, tombol, bitmap, dan lain-lain. Grafik cacing yang digunakan dalam tutorial ini bisa diunduh di sini di bawah Lisensi Creative Commons.

Sumber antarmuka grafis yang diperlukan untuk tutorial ini dapat ditemukan di unduhan yang terlampir.

Langkah 3: Dapatkan EaselJS

Perpustakaan EaselJS akan digunakan untuk membangun game kami - pastikan Anda membaca tutorial Memulai jika Anda baru di perpustakaan ini.

Anda dapat mengunduh EaselJS dari situs resminya.

Langkah 4: Struktur HTML

Mari siapkan dokumen HTML kita, dibawah ini adalah struktur HTML sederhana untuk mulai menulis aplikasi kita.

 
<!DOCTYPE html> 
<html> 
  <head> 
		<title>Whack A Worm</title> 
	</head> 
	<body> 
	</body> 
</html>

Langkah 5: Sembunyikan Hightlight Seluler

Mari tambahkan sedikit CSS juga, baris ini akan menghapus sorotan default saat Anda mengetuk elemen menggunakan browser seluler; tanpa mobile experience (proses peningkatan kepuasan pengguna seluler) akan menurun drastis.

 
<!DOCTYPE html> 
<html> 
	<head> 
		<title>Whack A Worm</title> 
		 
		<style>*{-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}</style> 
	 
	</head> 
	<body> 
	</body> 
</html>

Langkah 6: Pustaka JavaScript

Kode di bawah ini merupakan pustaka JavaScript yang dibutuhkan agar aplikasi kita dapat bekerja.

 
<!DOCTYPE html> 
<html> 
	<head> 
		<title>Whack A Worm</title> 
		 
		<style>*{-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}</style> 
 
		<script src="easel.js"></script> 
		<script src="Tween.js"></script> 
		<script src="WhackAWorm.js"></script> 
	</head> 
	<body> 
	</body> 
</html>

Langkah 7: Panggil Fungsi Utama

Pada baris berikutnya yang kami sebut konstruktor kita, ini adalah fungsi utama yang akan dibuat nanti dalam kode JavaScript kita.

 
<!DOCTYPE html> 
<html> 
	<head> 
		<title>Whack A Worm</title> 
		 
		<style>*{-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}</style> 
 
		<script src="easel.js"></script> 
		<script src="Tween.js"></script> 
		<script src="WhackAWorm.js"></script> 
 
	</head> 
	<body onload="Main();"> 
	</body> 
</html>

Langkah 8: Tag Canvas

Canvas ditambahkan di baris ini. Kita akan menetapkan ID untuk referensi nanti dan juga mengatur lebar dan tingginya.

 
<!DOCTYPE html> 
<html> 
	<head> 
		<title>Whack A Worm</title> 
		 
		<style>*{-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}</style> 
 
		<script src="easel.js"></script> 
		<script src="Tween.js"></script> 
		<script src="WhackAWorm.js"></script> 
 
	</head> 
	<body onload="Main();"> 
		<canvas id="WhackAWorm" width="480" height="320"></canvas> 
	</body> 
</html>

Langkah 9: JavaScript

Mari mulai pembuatan aplikasi kita!

Bukalah editor JavaScript pilihan Anda (editor teks apa saja yang akan berfungsi, tetapi Anda tidak akan memiliki penyorotan sintaks) dan bersiaplah untuk menulis aplikasi Anda yang mengagumkan. Ingatlah untuk menyimpan file dengan ekstensi .js di folder proyek Anda.

Langkah 10: Definisikan Kanvas

Kita akan mulai dengan mendefinisikan semua variabel grafis dan variabel logika.

Variabel berikutnya mewakili elemen kanvas HTML dan tahap yang akan ditautkan dengannya. Variabel stage akan berfungsi mirip dengan stage AS3.

 
/* Define Canvas */ 
 
var canvas; 
var stage;

Langkah 11: Latar Belakang

Variabel ini akan menyimpan gambar latar belakang judul. (Anda dapat mengunduh gambar di atas, atau mendapatkannya dari tutorial file ZIP)

 
/* Background */ 
 
var titleBg;

Langkah 12: Tampilan Judul

Ini adalah Tampilan Judul, yang akan menjadi layar interaktif pertama yang muncul di game kita. Variabel-variabel ini menyimpan komponennya:

 
/* Title View */ 
 
var titleBgImg = new Image(); 
var titleBg; 
var playBtnImg = new Image(); 
var playBtn; 
var creditsBtnImg = new Image(); 
var creditsBtn; 
var titleView = new Container();

Langkah 13: Kredit

Tampilan ini akan menunjukkan kredit, tahun dan hak cipta dari game, dan variabel-variabel ini akan digunakan untuk menyimpannya.

 
/* Credits */ 
 
var creditsViewImg = new Image(); 
var creditsView;

Langkah 14: Tampilan Latar Game

Latar belakang untuk Tampilan Game.

 
/* Game Bg */ 
 
var gameBgImg = new Image(); 
var gameBg;

Langkah 15: Peringatan

Peringatan akan ditampilkan ketika semua Cacing telah muncul, dan akan menampilkan skor akhir yang dicapai pemain.

 
/* Alert */ 
 
var alertBgImg = new Image(); 
var alertBg;

Langkah 16: Skor

Nilai skor akan ditangani oleh variabel berikutnya.

 
/* Score */ 
 
var score;

Langkah 17: Cacing

Variabel berikut digunakan untuk menyimpan grafik cacing dan merujuk ke cacing terakhir yang terlihat.

 
/* Worms */ 
 
var wormImg = new Image(); 
var worm; 
var lastWorm;

Langkah 18: Posisi Array

Array digunakan untuk menyimpan posisi akhir cacing. Ini digunakan untuk memindahkan cacing ke posisi lubang yang benar saat melakukan animasi pop-out.

 
var wormsX = [80, 198, 338, 70, 225, 376, 142, 356]; 
var wormsY = [11, 51, 34, 110, 136, 96, 211, 186];

Langkah 19: Variabel Tambahan

Ini adalah variabel lain yang akan kita gunakan; baca komentar di kode untuk mengetahui lebih banyak tentang mereka. (Beberapa sudah cukup jelas.)

 
var centerX = 240; 
var centerY = 160; 
var gfxLoaded = 0; //used as a preloader 
 
var timerSource; 
var currentWorms = 0; //worms already shown 
var wormsHit = 0; 
var totalWorms = 10; //total of worms to display

Langkah 20: Fungsi Main ()

Fungsi Main() akan menjadi yang pertama dieksekusi ketika halaman web dimuat, karena ini disebut dalam atribut onload dari dokumen HTML (lihat Langkah 7).

Fungsi ini akan memanggil fungsi yang diperlukan untuk memulai game. Periksa fungsi-fungsi tersebut di langkah selanjutnya

 
function Main() 
{ 
	//code... 
}

Langkah 21: Tautkan Kanvas

Kode ini menghasilkan ID kanvas HTML dan menautkannya ke kelas EaselJS Stage. Ini akan membuat variabel stage berfungsi seperti kelas stage di AS3.

 
/* Link Canvas */ 
	 
canvas = document.getElementById('WhackAWorm'); 
stage = new Stage(canvas);

Langkah 22: Aktifkan Mouse Event

Mouse Event (sekumpulan perintah untuk menjalankan aksi saat pengguna mengeklik mousenya) dinonaktifkan secara default di EaselJS untuk meningkatkan kinerja; karena kita membutuhkan mereka dalam game, kita tambahkan baris berikut.

 
stage.mouseEventsEnabled = true;

Langkah 23: Memuat Grafik

Kode ini digunakan untuk melakukan pramuat grafik dengan bantuan fungsi yang akan kami tulis nanti. Ini akan mengatur objek Gambar yang kita buat sebelumnya ke file PNG di folder dokumen kita. Nama diberikan untuk mendeteksi gambar mana yang dimuat dan pada akhirnya fungsi yang memuat gambar yang dimuat akan dipanggil.

 
/* Load GFX */ 
 
titleBgImg.src = 'titleBg.png'; 
titleBgImg.name = 'titleBg'; 
titleBgImg.onload = loadGfx; 
 
gameBgImg.src = 'gameBg.png'; 
gameBgImg.name = 'gameBg'; 
gameBgImg.onload = loadGfx; 
 
playBtnImg.src = 'playBtn.png'; 
playBtnImg.name = 'playBtn'; 
playBtnImg.onload = loadGfx; 
 
creditsBtnImg.src = 'creditsBtn.png'; 
creditsBtnImg.name = 'creditsBtn'; 
creditsBtnImg.onload = loadGfx; 
 
creditsViewImg.src = 'creditsView.png'; 
creditsViewImg.name = 'credits'; 
creditsViewImg.onload = loadGfx; 
 
alertBgImg.src = 'alertBg.png'; 
alertBgImg.name = 'alertBg'; 
alertBgImg.onload = loadGfx; 
 
wormImg.src = 'worm.png'; 
wormImg.name = 'worm'; 
wormImg.onload = loadGfx;

Langkah 24: Mengatur Ticker

Objek Ticker menyediakan tick atau heartbeat terpusat, disiarkan pada interval yang ditentukan melalui ffungsi callback tick().
Kode berikut menetapkan laju bingkai ke 30 dan menentukan stage sebagai pendengar untuk tick.

Kelas TweenJS akan mendengarkan tick ini untuk melakukan animasi.

 
/* Ticker */ 
 
Ticker.setFPS(30); 
Ticker.addListener(stage);

Langkah 25: Fungsi Preload

Setiap kali grafik dimuat, fungsi ini akan berjalan. Ini akan menetapkan setiap gambar ke objek bitmap dan memeriksa apakah semua elemen dimuat sebelum melanjutkan. Seperti yang Anda lihat, hanya lima gambar yang ditugaskan ke bitmap tetapi variabel gfxLoaded menunggu hingga tujuh item dimuat; ini menunggu sampai CreditsView dan Worms grafis diatur dalam memori.

 
function loadGfx(e) 
{ 
	if(e.target.name = 'titleBg'){titleBg = new Bitmap(titleBgImg);} 
	if(e.target.name = 'gameBg'){gameBg = new Bitmap(gameBgImg);} 
	if(e.target.name = 'playBtn'){playBtn = new Bitmap(playBtnImg);} 
	if(e.target.name = 'creditsBtn'){creditsBtn = new Bitmap(creditsBtnImg);} 
	if(e.target.name = 'alertBg'){alertBg = new Bitmap(alertBgImg);} 
	/* --CreditsView 
	   --Worms */ 
	 
	gfxLoaded++; 
	 
	if(gfxLoaded == 7) 
	{ 
		addTitleView(); 
	} 
}

Langkah 26: Tambahkan Tampilan Game

Ketika semua grafik dimuat, latar belakang game ditambahkan ke stage, nanti akan ditutupi oleh Tampilan Judul, ini untuk menunjukkan latar bagian belakang saat tampilan ini di-tween dan dihapus

 
function addTitleView() 
{	 
	/* Add GameView BG */ 
	 
	stage.addChild(gameBg);

Langkah 27: Tampilan Judul

Sekarang kita menempatkan TitleView di stage dan memanggil fungsi yang akan menambahkan pendengar mouse ke tombol.

 
/* Title Screen */ 
 
playBtn.x = centerX - 25; 
playBtn.y = centerY + 35; 
 
creditsBtn.x = centerX - 40; 
creditsBtn.y = centerY + 80; 
			 
titleView.addChild(titleBg, playBtn, creditsBtn); 
 
stage.addChild(titleView); 
 
startButtonListeners('add'); 
 
stage.update(); 
}

Langkah 28: Mulai Tombol Pendengar

Fungsi ini menambahkan pendengar penting ke tombol TitleView.

 
function startButtonListeners(action) 
{ 
	if(action == 'add') 
	{ 
		titleView.getChildAt(1).onPress = showGameView; 
		titleView.getChildAt(2).onPress = showCredits; 
	} 
	else 
	{ 
		titleView.getChildAt(1).onPress = null; 
		titleView.getChildAt(2).onPress = null; 
	} 
}

Langkah 29: Tunjukkan Kredit

Kredit layar ditampilkan ketika pengguna mengeklik tombol kredit, pendengar mouse ditambahkan ke gambar penuh untuk menghapusnya.

 
function showCredits() 
{ 
	playBtn.visible = false; 
	creditsBtn.visible = false; 
	creditsView = new Bitmap(creditsViewImg); 
	stage.addChild(creditsView); 
	creditsView.x = -203; 
	 
	Tween.get(creditsView).to({x:0}, 200).call(function(){creditsView.onPress = hideCredits;}); 
}

Langkah 30: Sembunyikan Kredit

Ketika layar Kredit diklik itu akan membuat tweened kembali dan dihapus dari stage.

 
function hideCredits() 
{ 
	playBtn.visible = true; 
	creditsBtn.visible = true; 
	Tween.get(creditsView).to({x:-203}, 200).call(function(){creditsView.onPress = null; stage.removeChild(creditsView); creditsView = null;}); 
}

Milestone

Mari kita berhenti di sini untuk melakukan tes cepat dan memastikan bahwa kode game kita berfungsi.

Lihatlah milestone di sini.

Perlu diingat bahwa beberapa baris telah dikomentari karena beberapa fungsi belum dibuat.

Ingat bahwa Milestones disertakan dalam file sumber, jadi jika karena alasan tertentu file Anda tidak sama dengan file yang satu ini, lihat sumbernya untuk melihat penyebabnya.

Langkah 31: Tampilkan Tampilan Game

Baris berikut menghapus layar Judul dan membiarkan Layar Game terlihat. Ini juga memanggil fungsi yang akan menampilkan cacing pertama.

 
function showGameView() 
{ 
	Tween.get(titleView).to({x: -480}, 200).call( 
		function(){ 
			startButtonListeners('rmv');  
			stage.removeChild(titleView);  
			titleView = null;  
			showWorm(); 
		} 
	); 
}

Step 32: Score Text

Kode ini menciptakan Objek Teks yang akan memunculkan skor..

 
score = new Text('0' + '/' + totalWorms, 'bold 15px Arial', '#EEE'); 
score.maxWidth = 1000;    //fix for Chrome 17 
score.x = 58; 
score.y = 21; 
stage.addChild(score);

Step 33: Perikasa Game Over

Kode ini memeriksa apakah Worms yang ditampilkan telah melewati batas dan jika benar, kode ini juga akan memanggil Peringatan jika benar.

 
function showWorm() 
{ 
	if(currentWorms == totalWorms) 
	{ 
		showAlert(); 
	}

Step 34: Menghapus Cacing Terakhir

Kode ini mengecek apakah seekor cacing telah ditambahkan dan dihapus.

 
else 
	{	 
		if(lastWorm != null) 
		{ 
			lastWorm.onPress = null; 
			stage.removeChild(lastWorm); 
			stage.update(); 
			lastWorm = null; 
		}

Langkah 35: Menghitung Cacing Acak

Baris berikutnya menghitung nomor acak yang akan digunakan dalam posisi array untuk menempatkan cacing di lubang acak.

 
var randomPos = Math.floor(Math.random() * 8);

Langkah 36: Mambahkan Cacing

Sekarang kita akan menciptakan cacing dan menempatkannya; pendengar mouse juga ditambahkan untuk menangani klik pemain.

 
var worm = new Bitmap(wormImg); 
 
worm.x = wormsX[randomPos]; 
worm.y = wormsY[randomPos]; 
stage.addChild(worm); 
worm.onPress = wormHit; 
 
lastWorm = worm;

Langkah 37: Animasi

Sedikit animasi akan ditampilkan ketika cacing keluar: tween kecil ke properti scaleY nya. Ketika animasi selesai, variabel currentWorms meningkat dan fungsi showWorm() dipanggil lagi; ini akan membuat loop yang akan berakhir setelah variabel currentWorms mencapai nilai totalWorms.

 
lastWorm.scaleY = 0.3; 
lastWorm.y += 42; 
stage.update(); 
 
Tween.get(lastWorm).to({scaleY: 1, y: wormsY[randomPos]}, 200).wait(1000).call(function(){currentWorms++; showWorm()});

Langkah 38: Memukul Cacing

Fungsi ini menangani Cacing yang diklik; pada dasarnya akan meningkatkan skor dan menghancurkan cacing yang diklik.

 
function wormHit() 
{ 
	wormsHit++; 
	score.text = wormsHit + '/' + totalWorms; 
	 
	lastWorm.onPress = null; 
	stage.removeChild(lastWorm); 
	lastWorm = null; 
	stage.update(); 
}

Langkah 39: Tampilkan Peringatan

Fungsi ini akan menghentikan game dan mengungkapkan skor akhir, menampilkan dan melipatgandakan latar belakang peringatan.

 
function showAlert() 
{ 
	alertBg.x = centerX - 120; 
	alertBg.y = -80; 
	stage.addChild(alertBg); 
	 
	Tween.get(alertBg).to({y:centerY - 80}, 200).call(function() 
	{ 
		Ticker.removeAllListeners(); 
		var score = new Text(wormsHit + '/' + totalWorms, 'bold 20px Arial', '#EEE'); 
		score.maxWidth = 1000;    //fix for Chrome 17 
		score.x = 220; 
		score.y = 205; 
		stage.addChild(score); 
		stage.update(); 
	}); 
}

Langkah 40: Uji

Simpan pekerjaan Anda (jika belum Anda simpan dan buka file HTML di browser untuk melihat bagaimana game HTML5 Anda berfungsi!

Kesimpulan

Seperti yang Anda lihat, banyak variabel / parameter game dapat dimodifikasi dan disesuaikan dengan kebutuhan Anda, jadi cobalah membuat versi game Anda sendiri!

Saya harap Anda menyukai tutorial ini, terima kasih telah membaca!