Mempelajari CreateJS dengan Membangun Permainan Pong HTML5

() translation by (you can also view the original English article)

Web bergerak cepat - begitu cepat sehingga tutorial EaselJS asli kami sudah ketinggalan zaman! Dalam tutorial ini, Anda akan belajar bagaimana menggunakan suite CreateJS terbaru dengan membuat klon Pong sederhana.

Pratinjau Hasil Akhir

Mari kita lihat hasil akhir yang akan kita jalani:

Klik untuk bermain

Tutorial ini didasarkan pada Membuat Permainan Pong di HTML5 Dengan EaselJS oleh Carlos Yanez, yang dibangun dengan panduan Memulai Dengan EaselJS-nya. Efek grafis dan suara semua diambil dari tutorial sebelumnya.

Langkah 1: Membuat `index.html`

Ini akan menjadi file index.html utama kita:

<!DOCTYPE html>
<html>
  <head>
		<title>Pong</title>
		
		<style>/* Removes Mobile Highlight */ *{-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}</style>

		<script src="http://code.createjs.com/easeljs-0.4.2.min.js"></script>
		<script src="http://code.createjs.com/tweenjs-0.2.0.min.js"></script>
		<script src="http://code.createjs.com/soundjs-0.2.0.min.js"></script>
		<script src="http://code.createjs.com/preloadjs-0.1.0.min.js"></script>
		<script src="http://code.createjs.com/movieclip-0.4.1.min.js"></script>
		<script src="assets/soundjs.flashplugin-0.2.0.min.js"></script>
		<script src="Main.js"></script>
		
	</head>
	<body onload="Main();">
		<canvas id="PongStage" width="480" height="320"></canvas>
	</body>
</html>

Seperti yang Anda lihat, ini cukup singkat dan terutama terdiri dari pemuatan perpustakaan CreateJS.

Sejak diluncurkannya CreateJS (yang pada dasarnya menggabungkan semua perpustakaan EaselJS yang terpisah), kita tidak lagi harus mengunduh file JS dan meng-hostnya di situs kita; file tersebut sekarang ditempatkan di CDN (Content Delivery Network) yang memungkinkan kita memuat file-file ini dari jarak jauh secepat mungkin.

Mari meninjau kodenya:

1	<style>/* Removes Mobile Highlight / {-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}</style>

Baris ini menghilangkan sorotan mobile yang mungkin muncul saat Anda mencoba memainkan game di mobile. (Sorotan mobile menyebabkan objek canvas disorot sehingga mengabaikan gerakan jari Anda.)

Selanjutnya, kita memiliki pemuatan perpustakaan CreateJS:>

<script src="http://code.createjs.com/easeljs-0.4.2.min.js"></script>
		<script src="http://code.createjs.com/tweenjs-0.2.0.min.js"></script>
		<script src="http://code.createjs.com/soundjs-0.2.0.min.js"></script>
		<script src="http://code.createjs.com/preloadjs-0.1.0.min.js"></script>
		<script src="http://code.createjs.com/movieclip-0.4.1.min.js"></script>

Kode ini memuat file JS dari CDN CreateJS dan pada dasarnya memungkinkan kita untuk menggunakan salah satu fungsi CreateJS dalam kode kita

Selanjutnya, kita akan memuat plugin SoundJS Flash, yang memberikan dukungan suara untuk browser yang tidak mendukung Audio HTML5. Ini dilakukan dengan menggunakan SWF (objek Flash) untuk memuat suara.

1	<script src="assets/soundjs.flashplugin-0.2.0.min.js"></script>

Dalam hal ini kita tidak akan menggunakan CDN; sebagai gantinya, kita akan mengunduh perpustakaan SoundJS dari http://createjs.com/#!/SoundJS/download dan letakkan file soundjs.flashplugin-0.2.0.min.js dan FlashAudioPlugin.swf di folder lokal yang diberi nama assets.

Terakhir di antara file JS, kita akan memuat file Main.js yang berisi semua kode ke permainan kita:

1	<script src="Main.js"></script>

Akhirnya, mari kita letakkan objek canvas di atas panggung kita.

1	<body onload="Main();">
2	<canvas id="PongStage" width="480" height="320"></canvas>
3	</body>

Sekarang kita bisa mulai mengerjakan kode permainannya.

Langkah 2: Variabel-variabel

Kode permainan kita akan berada di dalam sebuah file bernama Main.js, jadi buat dan simpan sekarang.

Pertama-tama, mari kita definisikan variabel-variabel untuk semua objek grafis dalam permainan:

var canvas; //Will be linked to the canvas in our index.html page
var stage; //Is the equivalent of stage in AS3; we'll add "children" to it

// Graphics
//[Background]

var bg; //The background graphic

//[Title View]
 

var main; //The Main Background
var startB; //The Start button in the main menu
var creditsB; //The credits button in the main menu

//[Credits]


var credits; //The Credits screen

//[Game View]


var player; //The player paddle graphic
var ball; //The ball graphic
var cpu; //The CPU paddle
var win; //The winning popup
var lose; //The losing popup

Saya telah menambahkan komentar untuk setiap variabel sehingga Anda tahu apa yang akan kita muat di variabel tersebut

Selanjutnya, skornya:

//[Score]

var playerScore; //The main player score
var cpuScore; //The CPU score
var cpuSpeed=6; //The speed of the CPU paddle; the faster it is the harder the game is

Kita akan, membutuhkan variabel untuk kecepatan bola:

1	// Variables
2
3	var xSpeed = 5;
4	var ySpeed = 5;

Anda dapat mengubah nilai ini menjadi apapun yang Anda inginkan, jika Anda ingin membuat permainan menjadi lebih mudah atau lebih sulit.

Jika Anda adalah pengembang Flash, Anda tahu onEnterFrame dari Flash sangat berguna saat membuat permainan, karena ada hal-hal yang perlu terjadi di setiap bingkai yang diberikan. (Jika Anda tidak terbiasa dengan ide ini, lihat artikel ini di Game Loop.)

Kita memiliki persamaan untuk onEnterFrame di CreateJS, dan itu adalah objek ticker, yang dapat menjalankan kode setiap fraksi dalam sedetik. Mari buat variabel yang akan menautkannya:

1	var tkr = new Object;

Selanjutnya kita memiliki preloader, yang akan menggunakan metode PreloadJS yang baru.

1	//preloader
2	var preloader;
3	var manifest;
4	var totalLoaded = 0;

preloader - akan berisi objek PreloadJS.
manifest - akan menyimpan daftar file yang perlu kita muat.
totalLoaded - variabel ini akan menyimpan sejumlah file yang sudah termuat.

Yang tidak kalah penting dalam daftar variabel kita, kita memiliki TitleView, yang akan menyimpan beberapa grafis untuk menampilkannya bersama-sama (seperti DisplayObjectContainer dari Flash).

1	var TitleView = new Container();

Mari beralih ke fungsi Main...

Langkah 3: Fungsi Main()

Fungsi ini adalah fungsi pertama yang berjalan setelah semua file JS dari index.html dimuat. Tapi apa yang memanggil fungsi ini?

Nah, ingat baris ini dari file index.html?

1	<body onload="Main();">

Cuplikan kode ini menyatakan bahwa begitu HTML (dan perpustakaan JS) dimuat, fungsi Main harus dijalankan.

Mari kita tinjau:

function Main()
{
	/* Link Canvas */
	
	canvas = document.getElementById('PongStage');
  	stage = new Stage(canvas);
  		
  	stage.mouseEventsEnabled = true;
  	
  	
	/* Set The Flash Plugin for browsers that don't support SoundJS */
  	SoundJS.FlashPlugin.BASE_PATH = "assets/";
    if (!SoundJS.checkPlugin(true)) {
      alert("Error!");
      return;
    }

  	manifest = [
				{src:"bg.png", id:"bg"},
				{src:"main.png", id:"main"},
				{src:"startB.png", id:"startB"},
				{src:"creditsB.png", id:"creditsB"},
				{src:"credits.png", id:"credits"},
				{src:"paddle.png", id:"cpu"},
				{src:"paddle.png", id:"player"},
				{src:"ball.png", id:"ball"},
				{src:"win.png", id:"win"},
				{src:"lose.png", id:"lose"},
				{src:"playerScore.mp3|playerScore.ogg", id:"playerScore"},
				{src:"enemyScore.mp3|enemyScore.ogg", id:"enemyScore"},
				{src:"hit.mp3|hit.ogg", id:"hit"},
				{src:"wall.mp3|wall.ogg", id:"wall"}
			];



  	preloader = new PreloadJS();
  	preloader.installPlugin(SoundJS);
    preloader.onProgress = handleProgress;
    preloader.onComplete = handleComplete;
    preloader.onFileLoad = handleFileLoad;
    preloader.loadManifest(manifest);

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

Mari kita rinci setiap bagian:

1	canvas = document.getElementById('PongStage');
2	stage = new Stage(canvas);
3
4	stage.mouseEventsEnabled = true;

Di sini kita menghubungkan objek Canvas PongStage dari file index.html ke variabel canvas, dan kemudian membuat objek Stage dari canvas tersebut. (Panggungnya akan memungkinkan kita untuk menempatkan objek di atasnya.)

mouseEventsEnabled memungkinkan kita untuk menggunakan event mouse, jadi kita bisa mendeteksi gerakan dan klik mouse.

/* Set The Flash Plugin for browsers that don't support SoundJS */
  	SoundJS.FlashPlugin.BASE_PATH = "assets/";
    if (!SoundJS.checkPlugin(true)) {
      alert("Error!");
      return;
    }

Di sini kita mengkonfigurasi dimana plugin suara Flash berada pada browser yang tidak didukung Audio HTML5

	manifest = [
				{src:"bg.png", id:"bg"},
				{src:"main.png", id:"main"},
				{src:"startB.png", id:"startB"},
				{src:"creditsB.png", id:"creditsB"},
				{src:"credits.png", id:"credits"},
				{src:"paddle.png", id:"cpu"},
				{src:"paddle.png", id:"player"},
				{src:"ball.png", id:"ball"},
				{src:"win.png", id:"win"},
				{src:"lose.png", id:"lose"},
				{src:"playerScore.mp3|playerScore.ogg", id:"playerScore"},
				{src:"enemyScore.mp3|enemyScore.ogg", id:"enemyScore"},
				{src:"hit.mp3|hit.ogg", id:"hit"},
				{src:"wall.mp3|wall.ogg", id:"wall"}
			];

Dalam variabel manifest kita menempatkan sebuah array dari file-file yang ingin kita muat (dan memberikan ID unik untuk masing-masing). Setiap suara memiliki dua format - MP3 dan OGG - karena browser yang berbeda (tidak)kompatibel dengan format yang berbeda.

  	preloader = new PreloadJS();
  	preloader.installPlugin(SoundJS);
    preloader.onProgress = handleProgress;
    preloader.onComplete = handleComplete;
    preloader.onFileLoad = handleFileLoad;
    preloader.loadManifest(manifest);

Di sini kita mengkonfigurasi objek preloader menggunakan PreloadJS. PreloadJS adalah tambahan baru untuk perpustakaan CreateJS dan cukup berguna.

Kita membuat objek PreloadJS baru dan menempatkannya di variabel preloader, kemudian menetapkan sebuah metode ke setiap event (onProgress, onComplete, onFileLoad). Akhirnya kita menggunakan preloader untuk memuat manifest yang kita buat sebelumnya.

1	Ticker.setFPS(30);
2	Ticker.addListener(stage);

Di sini kita menambahkan objek Ticker ke atas panggung dan mengatur frame rate menjadi 30 FPS; kita akan menggunakannya nanti di permainan untuk fungsi enterFrame.

Langkah 4: Membuat Fungsi Preloader

function handleProgress(event)
{
	//use event.loaded to get the percentage of the loading
}

function handleComplete(event) {
         //triggered when all loading is complete
}

function handleFileLoad(event) {
         //triggered when an individual file completes loading
            
         switch(event.type)
         {
         	case PreloadJS.IMAGE:
         	//image loaded
         	 var img = new Image();
              img.src = event.src;
              img.onload = handleLoadComplete;
              window[event.id] = new Bitmap(img);
         	break;

         	case PreloadJS.SOUND:
         	//sound loaded
         	handleLoadComplete();
         	break;
         }
}

Mari kita tinjau fungsinya:

handleProgress - Dalam fungsi ini Anda dapat mengikuti persentase kemajuan pemuatan menggunakan parameter ini: event.loaded. Anda bisa menggunakan ini untuk misalnya membuat progress bar.
handleComplete - Fungsi ini dipanggil sekali begitu semua file telah dimuat (jika Anda ingin menempatkan sesuatu di sana).
handleFileLoad - Karena kita memuat dua jenis file - gambar dan suara - kita memiliki fungsi ini yang akan menangani masing-masing secara terpisah. Jika itu adalah gambar, kita membuat gambar bitmap dan menempatkannya dalam variabel (yang namanya sama dengan ID gambar yang dimuat) dan kemudian memanggil fungsi handleLoadComplete (yang akan kita tulis selanjutnya); jika itu suara maka kita langsung saja memanggil handleLoadComplete.

Sekarang mari kita bahas fungsi handleLoadComplete yang baru saja saya sebutkan:

 function handleLoadComplete(event) 
 {

	totalLoaded++;
	
	if(manifest.length==totalLoaded)
	{
		addTitleView();
	}
 }

Ini adalah fungsi yang cukup sederhana; kita meningkatkan variabel totalLoaded (yang menyimpan jumlah aset yang dimuat sejauh ini) dan kemudian kita memeriksa apakah jumlah item dalam manifest kita sama dengan jumlah aset yang dimuat, dan jika demikian, masuk ke layar Main Menu.

Langkah 5: Membuat Main Menu

function addTitleView()
{
	//console.log("Add Title View");
	startB.x = 240 - 31.5;
	startB.y = 160;
	startB.name = 'startB';
	
	creditsB.x = 241 - 42;
	creditsB.y = 200;
	
	TitleView.addChild(main, startB, creditsB);
	stage.addChild(bg, TitleView);
	stage.update();
	
	// Button Listeners
	
	startB.onPress = tweenTitleView;
	creditsB.onPress = showCredits;

Main MenuTidak ada yang spesial disini. Kita menempatkan gambar Background, Start Button dan Credits Button di atas panggung dan menautkan event handler onPress ke tombol Start dan Credits.

Berikut adalah fungsi yang menampilkan dan menghapus layar kredit dan tweenTitleView yang memulai permainannya:

function showCredits()
{
	// Show Credits
		
	credits.x = 480;
		
	stage.addChild(credits);
	stage.update();
	Tween.get(credits).to({x:0}, 300);
	credits.onPress = hideCredits;
}

// Hide Credits

function hideCredits(e)
{
	Tween.get(credits).to({x:480}, 300).call(rmvCredits);
}

// Remove Credits

function rmvCredits()
{
	stage.removeChild(credits);
}

// Tween Title View

function tweenTitleView()
{		
	// Start Game
		
	Tween.get(TitleView).to({y:-320}, 300).call(addGameView);
}

Langkah 6: Kode Permainan

Kita telah mencapai bagian utama dari tutorial ini yang merupakan kode permainan itu sendiri.

Pertama-tama, kita perlu menambahkan semua aset yang dibutuhkan ke atas panggung, jadi kita melakukannya di fungsi addGameView:

function addGameView()
{
	// Destroy Menu & Credits screen
	
	stage.removeChild(TitleView);
	TitleView = null;
	credits = null;
	
	// Add Game View
	
	player.x = 2;
	player.y = 160 - 37.5;
	cpu.x = 480 - 25;
	cpu.y = 160 - 37.5;
	ball.x = 240 - 15;
	ball.y = 160 - 15;
	
	// Score
	
	playerScore = new Text('0', 'bold 20px Arial', '#A3FF24');
	playerScore.x = 211;
	playerScore.y = 20;
	
	cpuScore = new Text('0', 'bold 20px Arial', '#A3FF24');
	cpuScore.x = 262;
	cpuScore.y = 20;
	
	stage.addChild(playerScore, cpuScore, player, cpu, ball);
	stage.update();
	
	// Start Listener 
	
	bg.onPress = startGame;
}

Sekali lagi, fungsi yang cukup sederhana yang menempatkan objek-objek di layar dan menambahkan mouseEvent ke gambar latar belakang, sehingga saat pengguna mengkliknya, permainan akan dimulai (kita akan memanggil fungsi startGame).

Mari kita tinjau fungsi startGame:

function startGame(e)
{
	bg.onPress = null;
	stage.onMouseMove = movePaddle;
	
	Ticker.addListener(tkr, false);
	tkr.tick = update;
}

Disini, seperti yang bisa Anda lihat, selain menambahkan event onMouseMove yang akan menggerakkan bat kita. Kita menambahkan event tick, yang akan memanggil fungsi update di setiap frame.

Mari tinjau fungsi movePaddle and reset:

function movePaddle(e)
{
	// Mouse Movement
	player.y = e.stageY;
}

/* Reset */

function reset()
{
	ball.x = 240 - 15;
	ball.y = 160 - 15;
	player.y = 160 - 37.5;
	cpu.y = 160 - 37.5;
	
	stage.onMouseMove = null;
	Ticker.removeListener(tkr);
	bg.onPress = startGame;
}

Di movePaddle, pada dasarnya kita menempatkan bat pengguna pada koordinat y mouse.

Di reset, kita melakukan sesuatu yang mirip dengan addGameView, kecuali disini kita tidak menambahkan elemen grafis karena sudah ada di layar.

Dengan menggunakan fungsi alert, kita akan menampilkan popup yang menang dan kalah.

function alert(e)
{
	Ticker.removeListener(tkr);
	stage.onMouseMove = null;
	bg.onPress = null
	
	if(e == 'win')
	{
		win.x = 140;
		win.y = -90;
	
		stage.addChild(win);
		Tween.get(win).to({y: 115}, 300);
	}
	else
	{
		lose.x = 140;
		lose.y = -90;
	
		stage.addChild(lose);
		Tween.get(lose).to({y: 115}, 300);
	}
}

Langkah 7: Perulangan Permainan

Sekarang, untuk bagian akhir tutorial kita, kita akan mengerjakan fungsi update (yang terjadi di setiap frame permainan - mirip dengan onEnterFrame dari Flash):

function update()
{
	// Ball Movement 

	ball.x = ball.x + xSpeed;
	ball.y = ball.y + ySpeed;
	
	// Cpu Movement
	
	if(cpu.y < ball.y) {
		cpu.y = cpu.y + 4;
	}
	else if(cpu.y > ball.y) {
		cpu.y = cpu.y - 4;
	}
	
	// Wall Collision 

	if((ball.y) < 0) { ySpeed = -ySpeed; SoundJS.play('wall'); };//Up
	if((ball.y + (30)) > 320) { ySpeed = -ySpeed; SoundJS.play('wall');};//down
	
	/* CPU Score */
	
	if((ball.x) < 0)
	{
		xSpeed = -xSpeed;
		cpuScore.text = parseInt(cpuScore.text + 1);
		reset();
		SoundJS.play('enemyScore');
	}
	
	/* Player Score */
	
	if((ball.x + (30)) > 480)
	{
		xSpeed = -xSpeed;
		playerScore.text = parseInt(playerScore.text + 1);
		reset();
		SoundJS.play('playerScore');
	}
	
	/* Cpu collision */
	
	if(ball.x + 30 > cpu.x && ball.x + 30 < cpu.x + 22 && ball.y >= cpu.y && ball.y < cpu.y + 75)
	{
		xSpeed *= -1;
		SoundJS.play('hit');
	}
	
	/* Player collision */
	
	if(ball.x <= player.x + 22 && ball.x > player.x && ball.y >= player.y && ball.y < player.y + 75)
	{
		xSpeed *= -1;
		SoundJS.play('hit');
	}
	
	/* Stop Paddle from going out of canvas */
	
	if(player.y >= 249)
	{
		player.y = 249;
	}
	
	/* Check for Win */
	
	if(playerScore.text == '10')
	{
		alert('win');
	}
	
	/* Check for Game Over */
	
	if(cpuScore.text == '10')
	{
		alert('lose');
	}
}

Tampak menakutkan, bukan? Jangan khawatir, kami akan mengulas setiap bagian dan mendiskusikannya.

1	// Ball Movement
2
3	ball.x = ball.x + xSpeed;
4	ball.y = ball.y + ySpeed;

Di setiap frame, bola akan bergerak sesuai dengan nilai kecepatan x dan y-nya

1	// Cpu Movement
2
3	if((cpu.y+32) < (ball.y-14)) {
4	cpu.y = cpu.y + cpuSpeed;
5	}
6	else if((cpu.y+32) > (ball.y+14)) {
7	cpu.y = cpu.y - cpuSpeed;
8	}

Di sini kita memiliki dasar AI dari komputer, di mana bat komputer hanya mengikuti bola tanpa logika khusus. Kita hanya membandingkan lokasi pusat bat (oleh karena itu kami menambahkan 32 piksel ke nilai cpu Y) ke lokasi bola, dengan offset kecil, dan memindahkan bat ke atas atau bawah seperlunya.

if((ball.y) < 0) { //top
	ySpeed = -ySpeed; 
	SoundJS.play('wall'); 
};
if((ball.y + (30)) > 320) { //bottom
	ySpeed = -ySpeed; 
	SoundJS.play('wall');
};

Jika bola menyentuh batas atas atau batas bawah layar, bola akan berubah arah dan kita memainkan suara Wall Hit.

 	/* CPU Score */
 	if((ball.x) < 0)
 	{
 		xSpeed = -xSpeed;
 		cpuScore.text = parseInt(cpuScore.text + 1);
 		reset();
 		SoundJS.play('enemyScore');
 	}
 	/* Player Score */
  	if((ball.x + (30)) > 480)
 	{
 		xSpeed = -xSpeed;
 		playerScore.text = parseInt(playerScore.text + 1);
 		reset();
 		SoundJS.play('playerScore');
 	}

Login skor sederhana: jika bola melewati batas kiri atau kanan, ia meningkatkan skor pemain atau CPU masing-masing, memainkan suara, dan me-reset lokasi objek menggunakan fungsi reset yang telah kita bahas sebelumnya.

 
/* CPU collision */
if(ball.x + 30 > cpu.x && ball.x + 30 < cpu.x + 22 && ball.y >= cpu.y && ball.y < cpu.y + 75)
{
	xSpeed *= -1;
	SoundJS.play('hit');
}
/* Player collision */
if(ball.x <= player.x + 22 && ball.x > player.x && ball.y >= player.y && ball.y < player.y + 75) 	
{ 		
 	xSpeed *= -1;
 	SoundJS.play('hit');
 }

Di sini kita berhadapan dengan tabrakan bola dengan bat; setiap kali bola menyentuh salah satu bat, bola akan berubah arah dan suara dimainkan

1	if(player.y >= 249)
2	{
3	player.y = 249;
4	}

Jika bat pemain keluar dari batas, kita menempatkannya kembali dalam batas.

 /* Check for Win */
 if(playerScore.text == '10')
 {
 	alert('win'); 	
} 	 	
/* Check for Game Over */
if(cpuScore.text == '10')
{
 	alert('lose'); 	
}

Dalam cuplikan ini, kita memeriksa apakah salah satu dari skor pemain telah mencapai 10 poin, dan jika demikian, kita menampilkan popup kemenangan atau kekalahan pada pemain (sesuai status kemenangannya).

Kesimpulan

Itu saja, Anda telah membuat keseluruhan permainan pong menggunakan CreateJS. Terima kasih telah meluangkan waktu untuk membaca tutorial ini.