canvas platforms

platforms.js

/** @type {HTMLCanvasElement} */
const canvas = document.querySelector('#screen');
const ctx = canvas.getContext('2d');

canvas.width = 400;
canvas.height = 400;

let box = {
	width: 25,
	height: 25,
	jumping: false,
	x: 20,
	y: 0,
	vx: 0,
	vy: 0,

	get bottom() {
		return this.y + this.height;
	},

	get left() {
		return this.x;
	},

	get right() {
		return this.x + this.width;
	},

	set bottom(y) {
		this.y = y - this.height;
	},

	draw() {
		ctx.fillStyle = 'tomato';
		ctx.fillRect(box.x, box.y, box.width, box.height);
	}
};

let platform = {
	width: 100,
	height: 10,
	x: 20,
	y: 320,

	get top() {
		return this.y;
	},

	get left() {
		return this.x;
	},

	get right() {
		return this.x + this.width;
	},

	draw() {
		ctx.fillStyle = '#777777';
		ctx.fillRect(platform.x, platform.y, platform.width, platform.height);
	}
};

let controller = {
	up: false,
	right: false,
	left: false,

	keyListener(e) {
		let state = e.type === 'keydown' ? true : false;

		// left
		if (e.keyCode === 37) {
			controller.left = state;
		}

		// right
		if (e.keyCode === 39) {
			controller.right = state;
		}

		// top
		if (e.keyCode === 38) {
			controller.up = state;
		}
	}
};

document.addEventListener('keydown', controller.keyListener);
document.addEventListener('keyup', controller.keyListener);

function loop() {
	requestAnimationFrame(loop);

	const floor = 400 - box.height;

	if (!box.jumping && controller.up) {
		controller.up = false;
		box.vy -= 20;
		box.jumping = true;
	}

	if (controller.left) {
		box.vx -= 0.5;
	}

	if (controller.right) {
		box.vx += 0.5;
	}

	box.vy += 1;
	box.y += box.vy;
	box.vy *= 0.9;

	box.x += box.vx;
	box.vx *= 0.9;

	if (box.y > floor) {
		box.y = floor;
		box.vy = 0;
		box.jumping = false;
	}

	if (box.right > platform.left && box.left < platform.right) {
		if (box.bottom > platform.top) {
			box.bottom = platform.top;
			box.vy = 0;
			box.jumping = false;
		}
	}

	ctx.clearRect(0, 0, canvas.width, canvas.height);
	box.draw();
	platform.draw();

	// box.vy += 1;
	// box.y += box.vy;
	// // box.vy *= 0.9;

	// if (box.bottom > floor) {
	// 	box.y = floor;
	// 	box.vy = 0;
	// 	box.jumping = false;
	// }

	// if (box.bottom < platform.top) {
	// 	// box.jumping = false;
	// 	// box.vy = 0;
	// 	// box.bottom = platform.top;
	// }

	// if (box.bottom <= platform.top) {
	// 	// box.jumping = false;
	// 	box.bottom = platform.top;
	// 	box.vy = 0;
	// }

	// if (controller.left) {
	// 	box.speedX -= 0.5;
	// }

	// if (controller.right) {
	// 	box.speedX += 0.5;
	// }

	// box.speedY += 1.5;
	// box.y += box.speedY;
	// box.x += box.speedX;
	// box.speedY *= 0.9;
	// box.speedX *= 0.9;

	// box.oy = box.y;

	// console.log(box.oy, box.y);

	// if (box.y > 400 - 25) {
	// 	box.jumping = false;
	// 	box.speedY = 0;
	// 	box.y = 400 - 25;
	// }

	// check collision
	// let bottomOfBox = Math.round(box.y + box.height - box.speedY);
	// let leftOfBox = box.x;
	// let rightOfBox = box.x + box.width;
	// let topOfPlatform = platform.y;
	// let leftOfPlatform = platform.x;
	// let rightOfPlatform = platform.x + platform.width;

	// draw
	// ctx.clearRect(0, 0, canvas.width, canvas.height);

	// box.draw();
	// platform.draw();

	// requestAnimationFrame(loop);
}

loop();