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

Có phải bạn muốn một bài hướng dẫn nhanh làm game trong HTML5? Vậy thì hãy học nó bằng cách xem kĩ từng dòng code mà mình sẽ viết dưới đây nhé 🙂 .

Bắt đầu nào!

Screenshot

UI trong game

 

1. Create the canvas

// Create the canvas
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 512;
canvas.height = 480;
document.body.appendChild(canvas);

Điều đầu tiên chúng ta cần làm đó là phải tạo một canvas element.  Như bạn thấy thì mình đã tạo nó bằng JS thay cho HTML để thấy là nó dễ dàng hơn.

Khi chúng ta đã có một element, ta sẽ tham chiếu đến chính context của nó, thứ chúng ta sẽ dùng để vẽ lên nó. Sau đó set kích thước cho nó, thêm nó vào document và rồi nó sẽ hiển thị trên trang của chúng ta.

2. Include images

// Background image
var bgReady = false;
var bgImage = new Image();
bgImage.onload = function () {
	bgReady = true;
};
bgImage.src = "images/background.png";

Một game thì cần có đồ họa, ok, hãy tải một vài ảnh lên nào! Mình muốn nó đơn giản nhất có thể, vì thế mình sẽ dùng Image. bgReady cho biết là nó an toàn để được vẽ lên, cũng như là khi cố gắng để vẽ nó trước khi nó được tải lên sẽ xuất hiện một lỗi DOM.

Chúng ta sẽ làm việc này đối với 3 ảnh đó là: background, hero và monster.

3. Game objects

// Game objects
var hero = {
	speed: 256, // movement in pixels per second
	x: 0,
	y: 0
};
var monster = {
	x: 0,
	y: 0
};
var monstersCaught = 0;

Nào, bây giờ chúng ta sẽ định nghĩa vài biến mà sau đó chúng ta phải dùng tới. herosẽ gồm speed – để biết là nó sẽ di chuyển bao nhiêu pixels/s. monster không di chuyển nên nó chỉ có tọa độ là (0;0). Cuối cùng thì monstersCaught sẽ lưu lại số monster mà người chơi có thể bắt được.

4. Player input

// Handle keyboard controls
var keysDown = {};

addEventListener("keydown", function (e) {
	keysDown[e.keyCode] = true;
}, false);

addEventListener("keyup", function (e) {
	delete keysDown[e.keyCode];
}, false);

Bây giờ đến xử lý đầu vào. Để làm việc này thì chúng ta chỉ cần tạo một biến keysDown – thứ sẽ lưu tất cả sự kiện keyCode. Nếu một keyCode là một đối tượng thì nó sẽ thực hiện lênh nhập của user. Đơn giản đúng không nào 🙂 .

5. New game

// Reset the game when the player catches a monster
var reset = function () {
	hero.x = canvas.width / 2;
	hero.y = canvas.height / 2;

	// Throw the monster somewhere on the screen randomly
	monster.x = 32 + (Math.random() * (canvas.width - 64));
	monster.y = 32 + (Math.random() * (canvas.height - 64));
};

Hàm reset  được gọi để bắt đầu game, hoặc level, hoặc là bất cứ cái gì mà bạn sẽ dùng khi gọi nó. Vị trí của herosẽ ở giữa màn hình bắt đầu, còn vị trí của monstersẽ được random ngẫu nhiên.

Ok, vậy là làm đến đây là các bạn đã bắt đầu hiểu được cách làm game trên HTML5 rồi đấy. Phần 1 sẽ tạm dừng tại đây, viết dài dễ khiến các bạn nhàm chán.

Các bạn nhớ đón xem tiếp Phần 2 nhé!