Chủ nhật, ngày 11 tháng 12 năm 2016

Html5 – Canvas: Tạo một game 2D side-scrolling cơ bản

Ngày đăng: 22/5/2012, 8:32:30PM | Lượt xem: 1,812
Hot!

Từ bài Map Scrolling, ta có thể thấy đây là một sườn game rất phổ biến cho các loại game sử dụng bản đồ (như Pac-Man, Battle City hay Mario,…). Trong bài này tôi sẽ thay đổi một vài đặc điểm để tạo một demo dạng game phiêu lưu màn hình ngang.

Html5 -canvas - Basic 2D side-scolling game thumbTừ bài Map Scrolling, ta có thể thấy đây là một sườn game rất phổ biến cho các loại game sử dụng bản đồ (như Pac-Man, Battle City hay Mario,…). Trong bài này tôi sẽ thay đổi một vài đặc điểm để tạo một demo dạng game phiêu lưu màn hình ngang.

Demo

Sourcecode

 

 

Html5 -canvas - Basic 2D side-scolling game Demo

Tạo bản đồ

Bản đồ được dùng trong loại game này có thể được xem như một lưới với mỗi ô chứa một giá trị đại diện cho loại đối tượng (thường là vật cản như tường, đá, cây, …). Để đơn giản, tôi tạo một bản đồ chỉ gồm duy nhất một loại vật cản và được phân bố ngẫu nhiên:
map.js:

for(var i=1;i<MAP_WIDTH-1;i+=2)
{
	this.data[i] = [];
	this.data[i+1] = [];
	for(var j=1;j<MAP_HEIGHT;j++)
	{
		this.data[i][j] = Math.floor(Math.random()*6);
		this.data[i+1][j] = this.data[i][j];
		// create image buffer
		if(this.data[i][j]==BRICK)
		{								  				context.fillRect(i*CELL_SIZE,j*CELL_SIZE,CELL_SIZE*2,CELL_SIZE);
			context.fill();
		}
	}
}

Kiểm tra va chạm

Ta có thể kiểm tra nhanh va chạm của nhân vật với các vật cản bằng cách xác định tọa độ ô tương ứng của bản đồ từ vị trí của nhân vật.
map.js:

this.contain = function(x,y){
	var col = Math.floor(x/CELL_SIZE);
	var row = Math.floor(y/CELL_SIZE);
	if(!this.data[col])
		return false;
	if(this.data[col][row]==BRICK)
	{
		var b = {
			left: col*CELL_SIZE,
			top: row*CELL_SIZE
		};
		b.right = b.left+CELL_SIZE;
		b.bottom = b.top+CELL_SIZE;
		return b;
	}
	return false;
}

Đối với nhân vật, tôi sử dụng 8 điểm bao quanh nhân vật để kiểm tra (các điểm màu đỏ trong hình sau). Muốn việc kiểm tra chính xác hơn, bạn chỉ cần tăng thêm số điểm tuy nhiên thời gian kiểm tra sẽ lâu hơn. Dựa vào các điểm này tôi có thể xác định được va chạm và ngừng việc di chuyển của nhân vật theo các trường hợp các điểm va chạm là:

player

- R1 hoặc R2: Va chạm bên phải. Nếu speedX>0, ta gán speedX = 0.
- L1 hoặc L2: Va chạm bên trái. Nếu speedX – H1 hoặc H2: Nhân vật nhảy lên và đụng đầu vào vật cản. Ta dặt speedY = 0 và falling = true để nhân vật dừng lại và bắt đầu rơi.
- H1 hoặc H2: Nhân vật nhảy rớt xuống đất hoặc vật cản. Ta dặt speedY = 0 và falling = false.

Player.prototype.update = function(){
	if(this.isJumping)
		this.speedY += GRAVITY;

	var vtop = this.top+this.speedY;
	var vbottom = vtop+this.height;
	var vleft = this.left+this.speedX;
	var vright = vleft+this.width;

	if(this.isJumping)
		vbottom -= 1;

	var b;

	this.isJumping = true;

	if(vbottom >= this.map.height)
	{
		this.top = this.map.height-this.height;
		this.speedY = 0;

		this.isJumping = false;
	}
	else if(b = this.map.contain(this.left+2,vbottom) || this.map.contain(this.right-2,vbottom))
	{
		this.top = b.top-this.height;
		this.speedY = 0;
		this.isJumping = false;
	}
	else if(b = this.map.contain(this.left+2,vtop) || this.map.contain(this.right-2,vtop))
	{
		this.top = b.bottom;
		this.speedY = 0;
	}

	vtop = this.top+this.speedY;

	vbottom = vtop+this.height;

	if(this.left<=0 || (b = this.map.contain(vleft,vtop+6) || this.map.contain(vleft,vbottom-4)))
	{
		if(b)
			this.left = b.right;

		if(this.speedX<0)
			this.speedX = 0;
	}else if(this.right>=this.map.width || (b = this.map.contain(vright,vtop+6) || this.map.contain(vright,vbottom-4)))
	{
		if(b)
			this.left = b.left-this.width;

		if(this.speedX>0)
			this.speedX = 0;
	}
	this.top = vtop;
	this.bottom = vbottom;
	this.left += this.speedX;
	this.right = this.left + this.width;
}

YinYangIt’s blog

http://yinyangit.wordpress.com
 Chia sẻ qua: 
Hot!
Ý kiến bạn đọc

These items will be permanently deleted and cannot be recovered. Are you sure?

Gallery

image

Maecenas viverra rutrum pulvinar

Maecenas viverra rutrum pulvinar! Aenean vehicula nulla sit amet metus aliquam et malesuada risus aliquet. Vestibulum rhoncus, dolor sit amet venenatis porta, metus purus sagittis nisl, sodales volutpat elit lorem…

Read more

Text Links

Thiết kế logo chuyên nghiệp Insky
DAFABET
W88 w88b.com/dang-ky-tai-khoan-w88
W88
Copyright © 2011 - 2012 vietshare.vn by phamkhuong102@gmail.com doanhkisi2315@gmail.com. All rights reserved.