Html5 – Canvas: Viết game đua xe – part2 (end)

Html5 - Canvas - Racing Game - thumbnailTiếp theo phần 1, trong phần này tôi sẽ thêm các vật cản, thêm các checkpoint và trang trí để hoàn thành game.

Thêm vật cản

Vật cản trong game nhằm hạn chế người chơi chạy sai đường và tăng thêm độ khó (ví dụ ta có thể thêm một lifebar). Tôi tạo một lớp Rock để làm các vật cản và kiểm tra va chạm dựa theo pixel. Phương pháp là:
– Duyệt qua các điểm hay va chạm của xe (như phần trước là 4 đỉnh của hình chữ nhật).
– Kiểm tra xem điểm này có nằm tại vị trí có pixel với độ alpha > 0 của tảng đá hay không.

function Rock(context,x,y){
	var img = new Image();
	img.src = "rock.png";
	this.size = Math.floor(Math.random()*40+20);
	this.left = x;
	this.top = y;
	this.right = this.left+this.size;
	this.bottom = this.top+this.size;

	// get image data
	context.drawImage(img,this.left,this.top,this.size,this.size);
	this.imageData = context.getImageData(this.left,this.top,this.size,this.size);

	this.draw = function(context){
		context.drawImage(img,this.left,this.top,this.size,this.size);
	}

	// check if a point is inside this rock
	this.contains = function(x,y){
		x -= this.left;
		y -= this.top;
		if(x < 0 || x > this.size || y < 0 || y > this.size)
			return false;
		var index = Math.floor((x+y*this.size))*4+3;
		return this.imageData.data[index]!=0;
	}
}

Hạn chế xe di chuyển và xoay khi bị va chạm

Sau khi biết được một điểm va chạm với đá, ta sẽ xác định xem xe có thể di chuyển hoặc xoay được hay không. Xem hình vẽ sau, ta xét từng trường hợp điểm va chạm của xe là:
– 0 hoặc 3: không cho phép xe lùi.
– 1 hoặc 2: không cho phép xe tiến.
– 0 hoặc 1: không cho phép xoay trái.
– 2 hoặc 3: không cho phép xoay phải.

Car - Collision Points

// ...
for(var i=0;i<_car.vertices.length;i++)
{
	var p = _car.vertices[i];
	// ...
	// check collisions with rocks
	for(var j=0;j<_map.rocks.length;j++)
	{
		if(_map.rocks[j].contains(p.x,p.y)){
			if(i==0 || i==3)
				_car.canGoBack = false;
			else
				_car.canGoForward = false;

			if(i==0 || i==1)
				_car.canTurnLeft = false;
			else
				_car.canTurnRight = false;
		}
	}
}

Tạo các checkpoint

Để biết xe có đi đúng đường và đúng hướng, ta cần tạo ra các điểm kiểm tra trên đường gọi là checkpoint. Nếu người chơi muốn “đi tắt” đến checkpoint, hãy đảm bảo rằng họ sẽ đến chậm hơn so với đi trên đường chính bằng cách tạo các vật cản hoặc tăng ma sát.

Với bản đồ trong game này, tôi chỉ tạo ra 4 checkpoint. Phương thức reachNextCheckPoint() sẽ kiểm tra xem xe có chạm checkpoint tiếp theo hay không. Khi đến checkpoint cuối cùng, ta sẽ đưa biến currentCheckPoint về 0 và tăng lap lên 1.

this.reachNextCheckPoint = function(x,y){
	var index = this.currentCheckPoint==checkPoints.length-1?0:this.currentCheckPoint+1;
	var p = checkPoints[index];
	var dx = x-p.x;
	var dy = y-p.y;
	var d = Math.sqrt(dx*dx+dy*dy);
	if(d<=CHECKPOINT_SIZE)
	{
		this.currentCheckPoint = index;
		return true;
	}
	return false;
}

Demo và Sourcecode

Download

Html5 - Canvas - Racing Game - Start Screen

Html5 - Canvas - Racing Game

YinYangIt’s Blog

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s