Hello Chris, I didn't want to bother you by email so I decided to ask here.

I have been following your canvas tutorials for about a week, really learning a lot from them.

I started a top-down game project that has a similar concept to your Mario scroll game. I have been trying to understand top down game development for a while now, but still can't quite get it. Ive also been searching youtube but only found limited info.

Ive been trying to solve this issue by creating barries around my center-player, and moving the barriers based on whichever keys im pressing. This doesn't seem like the best approach because I would have to move every other map / entites by the same amount.

Would you be able to help?

heres a picture of what i have in the game

unknown.png (761×452) (discordapp.net)


//im looping through the map and drawing it where it should be, im doing this for each boardering grid
const MAP = [
	[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
	[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
	[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
	[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
	[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
	[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
	[1, 0, 0, 0, 0, 0, 0, 0, 3, 0, 0, 0, 0, 0, 0, 1],
	[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
	[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
	[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
	[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
	[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
	[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
	[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
];

class Map {
	constructor(x, y, color, size, type) {
		this.x = x;
		this.y = y;
		this.color = color;
		this.size = size;
		this.type = type;
		this.velocity = { x: 1, y: 1 };
		this.speed = 3;
	}
	render() {
		var keysHeld = 0;
		keysHeld += Keys.W ? 1 : 0;
		keysHeld += Keys.S ? 1 : 0;
		keysHeld += Keys.A ? 1 : 0;
		keysHeld += Keys.D ? 1 : 0;
		var _speed = this.speed;
		if (keysHeld > 1) {
			_speed /= Math.sqrt(2);
		}

		// move buildings then moving mouse
		if (Keys.D) this.x += -this.velocity.x * _speed;
		if (Keys.A) this.x += this.velocity.x * _speed;
		if (Keys.W) this.y += this.velocity.y * _speed;
		if (Keys.S) this.y += -this.velocity.y * _speed;

		if (this.type === 1) {
			c.save();
			c.beginPath();
			c.lineWidth = 3;
			c.stroke();
			c.fillStyle = this.color;
			c.rect(this.x, this.y, this.size, this.size);
			c.fill();
			c.restore();
		}
	}
}

@Mini

Mini

Posts (1)

Education

Support

Transparency

Legal