JSFiddle - React, Tailwind, and code Playground

by Ebony McCoy

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <title>Gamedev Canvas Workshop</title> 
    <style> 
    * { padding: 0; margin: 0; } 
    canvas { background: #eee; display: block; margin: 0 auto; } 
	body {
		background-color: #F6CEF5;
	}
    </style> 
</head> 
<body> 
 <h1> <center>Breakout Game</center></h1>
<canvas id="myCanvas" width="480" height="320"></canvas> 
 
<script> 
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var ballRadius = 10;
var x = canvas.width/6;
var y = canvas.height-30;
var dx = 5;
var dy = -5;
var paddleHeight = 10;
var paddleWidth = 32;
var paddleX = (canvas.width-paddleWidth)/100;
var rightPressed = false;
var leftPressed = false;
var brickRowCount = 11;
var brickColumnCount = 4;
var brickWidth = 25;
var brickHeight = 20;
var brickPadding = 17;
var brickOffsetTop = 30;
var brickOffsetLeft = 20;
var score = 0;
var lives = 3;
var color = "#0095DD"
var scorePoint = new sound("assets/Fpan.mp3");
var playSound = true;
var bricks = [];
for(var c=0; c<brickColumnCount; c++) {
  bricks[c] = [];
  for(var r=0; r<brickRowCount; r++) {
    bricks[c][r] = { x: 0, y: 0, status: 1 };
  }
}

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

function sound(src) {
    this.sound = document.createElement("audio");
    this.sound.src = src;
    this.sound.setAttribute("preload", "auto");
    this.sound.setAttribute("controls", "none");
    this.sound.style.display = "none";
    document.body.appendChild(this.sound);
    this.play = function(){
        this.sound.play();
		
	return
    }
    
} 
function keyDownHandler(e) {
  if(e.keyCode == 39) {
    rightPressed = true;
  }
  else if(e.keyCode == 37) {
    leftPressed = true;
  }
}
function keyUpHandler(e) {
  if(e.keyCode == 39) {
    rightPressed = false;
  }
  else if(e.keyCode == 37) {
    leftPressed =...