GAME!!!

dabblet.css

/**
 * GAME!!!
 */
 
body {
	background-color: black;
}

dabblet.html

<canvas id="canvas" width="640" height="640"></canvas>

dabblet.js

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

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

const playerStart = [3, 1];

let startTime = 0;

ctx.fillStyle = 'white';
ctx.fillRect(0, 0, canvas.width, canvas.height);

function drawMap() {
	ctx.clearRect(0, 0, canvas.width, canvas.height);
	for (let y = 0; y < grid.length; y++) {
		for (let x = 0; x < grid[y].length; x++) {
			switch(grid[y][x]) {
				case 0:
					ctx.fillStyle = 'black';
					ctx.fillRect(x * 32, y * 32, 32, 32);
					break;
				case 1:
					ctx.fillStyle = '#414141';
					ctx.fillRect(x * 32, y * 32, 32, 32);
					break;
			}
		}
	}
}

function iterate(timestamp) {
	if(startTime === 0) {
		startTime = timestamp;
	}
	
	window.requestAnimationFrame(iterate);
}

window.requestAnimationFrame(iterate);

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"javascript"}