JSFiddle - React, Tailwind, and code Playground

by techtiger255

HTML

<canvas id="myCanvas" width="480" height="340"></canvas><br/>
<button id="start">press to play</button>
<button id="difficulty">easy</button>
<button id="difficulty">medium</button>
<button id="difficulty">hard</button>

CSS

canvas { background: #000000; }

JavaScript

function go() {

var bricks = [],
brickRowCount = 5,
brickColumnCount = 3,
brickWidth = 75,
brickHeight = 20,
brickPadding = 10,
brickOffsetTop = 30,
brickOffsetLeft = 30;

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 };
  }
}

var canvas = document.getElementById("myCanvas"),
ctx = canvas.getContext("2d"),
ballRadius = 10,
x = canvas.width/2,
y = canvas.height-30,
dx = (bricks.length - bricks.length/20)+3,
dy = (bricks.length - bricks.length/10)-2,
paddleHeight = 10,
paddleWidth = 75,
paddleY = canvas.height-2,
paddleX = (canvas.width-paddleWidth)/2,
rightPressed = false,
leftPressed = false,
score = 0,
lives = 3
totalBricks = 0;

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

function keyDownHandler(e) {
    if(e.key == "Right" || e.key == "ArrowRight") {
        rightPressed = true;
    }
    else if(e.key == "Left" || e.key == "ArrowLeft") {
        leftPressed = true;
    }
}

function keyUpHandler(e) {
    if(e.key == "Right" || e.key == "ArrowRight") {
        rightPressed = false;
    }
    else if(e.key == "Left" || e.key == "ArrowLeft") {
        leftPressed = false;
    }
}

function mouseMoveHandler(e) {
  var relativeX = e.clientX - canvas.offsetLeft;
  if(relativeX > 0 && relativeX < canvas.width) {
    paddleX = relativeX - paddleWidth/2;
  }
}
function collisionDetection() {
  for(var c=0; c<brickColumnCount; c++) {
    for(var r=0; r<brickRowCount; r++) {
      var b = bricks[c][r];
      if(b.status == 1) {
        if(x > b.x &&
        x - ballRadius < b.x+brickWidth &&
        x + ballRadius > b.x &&
        y + ballRadius > b.y &&
        y - ballRadius < b.y+brickHeight) {
          dy = -dy;
          b.status = 0;
          score++;
          totalBricks--;
          if(score == brickRowCount*brickColumnCount)...