JSFiddle - React, Tailwind, and code Playground

by Ben Gillbanks

HTML

<canvas id="gameCanvas" width="600" height="400"></canvas>

JavaScript

const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

const tileSize = 40;
const rows = 10;
const cols = 15;
const gravity = 1;
const jumpPower = -15;
const fps = 30;
const interval = 1000 / fps;

const world = [
	[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
	[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0],
	[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0],
	[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0],
	[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0],
	[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0],
	[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0],
	[0, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
	[0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0],
	[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
];

const player = {
	x: 50,
	y: 300,
	width: 30,
	height: 30,
	velocityX: 0,
	velocityY: 0,
	onGround: false
};

const keys = {
	right: false,
	left: false,
	up: false
};

window.addEventListener('keydown', function(e) {
	switch (e.code) {
		case 'ArrowRight':
			keys.right = true;
			break;
		case 'ArrowLeft':
			keys.left = true;
			break;
		case 'ArrowUp':
			if (player.onGround) {
				player.velocityY = jumpPower;
				player.onGround = false;
			}
			break;
	}
});

window.addEventListener('keyup', function(e) {
	switch (e.code) {
		case 'ArrowRight':
			keys.right = false;
			break;
		case 'ArrowLeft':
			keys.left = false;
			break;
	}
});

let lastTime = 0;

function update(timestamp) {
	if (timestamp - lastTime < interval) {
		requestAnimationFrame(update);
		return;
	}
	lastTime = timestamp;

	if (keys.right) {
		player.velocityX = 5;
	} else if (keys.left) {
		player.velocityX = -5;
	} else {
		player.velocityX = 0;
	}

	player.velocityY += gravity;
	player.x += player.velocityX;
	player.y += player.velocityY;

	if (player.y + player.height > canvas.height) {
		player.y = canvas.height - player.height;
		player.velocityY = 0;
		player.onGround = true;
	}

	checkCollisions();
	draw();
	requestAnimationFrame(update);
}

function...