JSFiddle - React, Tailwind, and code Playground

by techtiger255

HTML

<!DOCTYPE html>
<html lang="en">
	<head>
		<link rel="stylesheet" href="styles.css" />
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>Brick Bounce</title>
	</head>
	<body>
		<canvas width="480" height="340"></canvas><br />
		<button id="pause">pause</button>
		<button class="difficulty" id="0">easy</button>
		<button class="difficulty" id="1">medium</button>
		<button class="difficulty" id="2">hard</button>
		<button id="reset">reset</button>
		<script src="canvas.js"></script>
	</body>
</html>

CSS

canvas {
	background: lightseagreen;
}
body {
	user-select: none;
}

JavaScript

var paused = false,
	canvas = document.getElementsByTagName("canvas")[0],
	ctx = canvas.getContext("2d"),
	killVar = false;

function start(e) {
	killVar = true;
	go(e);
	setTimeout(() => {
		killVar = false;
	}, 900);
}

function go(e) {
	pause = false;
	var difficulty = parseFloat(e.target.id) + 1,
		bricks = [],
		brickRowCount = 5,
		brickColumnCount = 2 + difficulty,
		brickWidth = 75,
		brickHeight = 20,
		brickPadding = 10,
		brickOffsetTop = 30,
		brickOffsetLeft = 30,
		score = 0,
		killed = false;

	for (let c = 0; c < brickColumnCount; c++) {
		bricks[c] = [];
		for (let r = 0; r < brickRowCount; r++) {
			bricks[c][r] = { x: 0, y: 0, status: 1 };
		}
	}

	var ballRadius = 10,
		x = canvas.width / 2,
		y = canvas.height - 30,
		dx = 3 + difficulty * 0.75,
		dy = -(2 + difficulty * 0.75),
		paddleHeight = 10,
		paddleWidth = 75,
		paddleY = canvas.height - 2,
		paddleX = (canvas.width - paddleWidth) / 2,
		rightPressed = false,
		leftPressed = false,
		lives = 3;

	setTimeout(killYN, 1000);

	function killYN() {
		setInterval(() => {
			if (killVar === true) {
				killed = true;
			}
		}, 10);
	}

	document.addEventListener("keydown", keyHandler, false);
	document.addEventListener("keyup", keyHandler, false);
	document.addEventListener("mousemove", mouseMoveHandler, false);

	function keyHandler(e) {
		if (e.key == "Right" || e.key == "ArrowRight" || e.key == "d") {
			rightPressed = e.type.match(/down/) ? true : false;
		} else if (e.key == "Left" || e.key == "ArrowLeft" || e.key == "a") {
			leftPressed = e.type.match(/down/) ? true : false;
		}
	}

	function mouseMoveHandler(e) {
		var relativeX = e.clientX - canvas.offsetLeft;
		if (
			relativeX > paddleWidth / 2 &&
			relativeX < canvas.width - paddleWidth / 2
		) {
			paddleX = relativeX - paddleWidth / 2;
		} else {
			paddleX =
				relativeX > paddleWidth / 2 ? canvas.width - paddleWidth - 2 : 2;
		}
	}
	function collisionDetection() {
		for (var c = 0; c < brickColumnCount; c++) {
			for (var...