Làm game cơ bản trên HTML Canvas – Phần 2

Hi các bạn, vậy là qua Phần 1, các bạn đã hiểu sơ qua về cách làm game trên HTML5 rồi đúng không nào.

Ok, hôm nay chúng ta lại tiếp tục hoàn thành game để chơi nhé 🙂 .

6. Update Objects

// Update game objects
var update = function (modifier) {
	if (38 in keysDown) { // Player holding up
		hero.y -= hero.speed * modifier;
	}
	if (40 in keysDown) { // Player holding down
		hero.y += hero.speed * modifier;
	}
	if (37 in keysDown) { // Player holding left
		hero.x -= hero.speed * modifier;
	}
	if (39 in keysDown) { // Player holding right
		hero.x += hero.speed * modifier;
	}

	// Are they touching?
	if (
		hero.x <= (monster.x + 32)
		&& monster.x <= (hero.x + 32)
		&& hero.y <= (monster.y + 32)
		&& monster.y <= (hero.y + 32)
	) {
		++monstersCaught;
		reset();
	}
};

Đây là hàm update , nó sẽ được gọi mỗi khi một hành động được thực thi. Đầu tiên, nó sẽ kiểm tra up,down,left,right và thực thi chúng khi người dùng bấm phím. Và sau đó thì hero sẽ di chuyển theo phím người dùng đã bấm.

Rồi, ok, bây giờ chúng ta có thể di chuyển hero và xét sự va chạm. Khi hero chạm vào monster thì nó sẽ tính là được một lần chạm. Ta sẽ tăng điểm lên, +1 cho monstersCaught và reset the game.

7. Render objects

// Draw everything
var render = function () {
	if (bgReady) {
		ctx.drawImage(bgImage, 0, 0);
	}

	if (heroReady) {
		ctx.drawImage(heroImage, hero.x, hero.y);
	}

	if (monsterReady) {
		ctx.drawImage(monsterImage, monster.x, monster.y);
	}

	// Score
	ctx.fillStyle = "rgb(250, 250, 250)";
	ctx.font = "24px Helvetica";
	ctx.textAlign = "left";
	ctx.textBaseline = "top";
	ctx.fillText("Monsterrs caught: " + monstersCaught, 32, 32);
};

Game sẽ rất vui khi bạn nhìn thấy nó di chuyển, chúng ta sẽ vẽ mọi thứ lên màn hình. Đầu tiên chúng ta sẽ lấy background image và vẽ nó lên canvas. Sau đó, gọi hàm fillText  để hiển thị điểm của người chơi. Chúng ta mới chỉ vẽ mọi thứ lên thôi, chứ chưa hề tạo ra animation gì hết.

8. The main game loop

// The main game loop
var main = function () {
	var now = Date.now();
	var delta = now - then;

	update(delta / 1000);
	render();

	then = now;

	// Request to do this again ASAP
	requestAnimationFrame(main);
};

Vòng lặp của game nó sẽ điều khiển toàn bộ game.

9. Start the game

// Let's play this game!
var then = Date.now();
reset();
main();

Cái này thì dễ quá rồi, chỉ cần cho vài dòng này nữa là hoàn thành game rồi 🙂 .

Congraylations! Hi vọng qua bài này các bạn đã hiểu được cách phát triển game bằng Javascript rồi đúng không nào. Bây giờ, thì tải game về và chơi thử thành quả của chúng ta đi nào 🙂 . Click here

Bye Bye 🙂 .

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s