<main>
	<div class="wrap">
		<h1>Uh-Oh! Not Found</h1>
		<canvas width="560" height="312"></canvas>
		<p>You’re in the middle of nowhere. The page you requested either was moved or doesn’t exist.</p>
		<p>What you can do:</p>
		<ul>
			<li>Go back <a href="#">home</a></li>
			<li><a href="#">Contact</a> to me if you believe this happened in error</li>
		</ul>
	</div>
</main>

* {
	border: 0;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
:root {
	font-size: calc(16px + (20 - 16)*(100vw - 320px)/(1024 - 320));
}
body {
	background: #f1f1f1;
	color: #242424;
	font: 1em "Hind", Arial, sans-serif;
	line-height: 1.5;
}
a {
	color: #2762f3;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
a:active {
	color: #0c48db;
}
a:visited {
	color: #5785f6;
}
h1 {
	font: 2em "Ubuntu", Arial, sans-serif;
	line-height: 1.5;
	margin-bottom: .75em;
}
p, ul {
	margin-bottom: 1.5em;
}
ul {
	margin-left: 1.5em;
}
main, canvas {
	display: block;
}
canvas {
	display: block;
	margin: 0 auto 1.5em auto;
	width: 100%;
	height: auto;
	-webkit-tap-highlight-color: transparent;
}
.wrap {
	margin: auto;
	padding: 1.5em;
	max-width: 37.5em;
}
@media (prefers-color-scheme: dark) {
	body {
		background: #242424;
		color: #f1f1f1;
	}
	a {
		color: #5785f6;
	}
	a:active {
		color: #2762f3;
	}
	a:visited {
		color: #87a9f9;
	}
}

window.addEventListener("DOMContentLoaded",game);

function game() {
	var canvas = document.querySelector("canvas"),
		c = canvas.getContext("2d"),
		W = canvas.width,
		H = canvas.height,
		S = 2,
		assets = [
			"https://assets.codepen.io/416221/nowhere.png",
			"https://assets.codepen.io/416221/tumbleweed.png"
		],
		sprites = [],
		score = 0,
		world = {
			friction: 0.1,
			gravity: 0.1
		},
		tumbleweed = {
			inPlay: false,
			x: -160,
			y: 200,
			r: 32,
			rotation: 0,
			xVel: 10,
			yVel: 0,
			mass: 2.5,
			restitution: 0.3
		},
		loadSprite = url => {
			return new Promise((resolve,reject) => {
				let sprite = new Image();
				sprite.src = url;
				sprite.onload = () => {
					resolve(sprite);
				};
				sprite.onerror = () => {
					reject(url);
				};
			});
		},
		spritePromises = assets.map(loadSprite),
		applyForce = e => {
			let ex = e.clientX - canvas.offsetLeft,
				ey = e.clientY - (canvas.offsetTop - window.pageYOffset);

			ex = ex / canvas.offsetWidth * W;
			ey = ey / canvas.offsetHeight * H;

			let insideX = Math.abs(ex - tumbleweed.x) <= tumbleweed.r,
				insideY = Math.abs(ey - tumbleweed.y) <= tumbleweed.r;

			if (insideX && insideY) {
				let xForce = tumbleweed.x - ex, 
					yForce = tumbleweed.y - ey,
					xAccel = xForce / tumbleweed.mass,
					yAccel = yForce / tumbleweed.mass;

				tumbleweed.xVel += xAccel;
				tumbleweed.yVel += yAccel;

				++score;
				
				// when enabled, the tumbleweed will be allowed to touch the left side after rolling in
				if (!tumbleweed.inPlay)
					tumbleweed.inPlay = true;
			}
		},
		update = () => {
			// A. Background
			c.clearRect(0,0,W,H);
			c.drawImage(sprites[0],0,0,W,H);

			// B. Tumbleweed
			tumbleweed.x += tumbleweed.xVel;
			
			// 1. Friction to the right
			if (tumbleweed.xVel > 0) {
				tumbleweed.xVel -= world.friction;
				if (tumbleweed.xVel < 0)
					tumbleweed.xVel = 0;
			
			// 2. Friction to the left
			} else if (tumbleweed.xVel < 0) {
				tumbleweed.xVel += world.friction;
				if (tumbleweed.xVel > 0)
					tumbleweed.xVel = 0;
			}
			
			// 3. Horizontal collision
			let hitLeftBound = tumbleweed.x <= tumbleweed.r && tumbleweed.inPlay,
				hitRightBound = tumbleweed.x >= W - tumbleweed.r;

			if (hitLeftBound)
				tumbleweed.x = tumbleweed.r;
			else if (hitRightBound)
				tumbleweed.x = W - tumbleweed.r;

			if (hitLeftBound || hitRightBound)
				tumbleweed.xVel *= -tumbleweed.restitution;
			
			// 4. Vertical collision
			tumbleweed.y += tumbleweed.yVel;
			tumbleweed.yVel += world.gravity;

			let hitTopBound = tumbleweed.y <= tumbleweed.r,
				hitBottomBound = tumbleweed.y >= H - tumbleweed.r;

			if (hitTopBound) {
				tumbleweed.y = tumbleweed.r;

			} else if (hitBottomBound) {
				tumbleweed.y = H - tumbleweed.r;
				score = 0;
			}
			if (hitTopBound || hitBottomBound)
				tumbleweed.yVel *= -tumbleweed.restitution;
			
			// 5. Rotation
			tumbleweed.rotation += tumbleweed.xVel;

			if (tumbleweed.rotation >= 360)
				tumbleweed.rotation -= 360;
			else if (tumbleweed.rotation < 0)
				tumbleweed.rotation += 360;
			
			// 6. Drawing
			c.save();
			c.translate(tumbleweed.x,tumbleweed.y);
			c.rotate(tumbleweed.rotation * Math.PI/180);
			c.drawImage(
				sprites[1],
				-tumbleweed.r,
				-tumbleweed.r,
				tumbleweed.r * 2,
				tumbleweed.r * 2
			);
			c.translate(-tumbleweed.x,-tumbleweed.y);
			c.restore();

			// C. Score
			if (score > 0) {
				c.fillStyle = "#7f7f7f";
				c.font = "48px Hind, sans-serif";
				c.textAlign = "center";
				c.fillText(score,W/2,48);
			}
		},
		render = () => {
			update();
			requestAnimationFrame(render);
		};
	
	// ensure proper resolution
	canvas.width = W * S;
	canvas.height = H * S;
	c.scale(S,S);
	
	// load sprites
	Promise.all(spritePromises).then(loaded => {
		for (let sprite of loaded)
			sprites.push(sprite);

		render();
		canvas.addEventListener("click",applyForce);

	}).catch(urls => {
		console.log(urls+" couldn’t be loaded");
	});
}