JSFiddle - React, Tailwind, and code Playground

by frogggeee McFrogggeee

HTML

<!DOCTYPE html>
<html>
<head>
<body>
breakout test
<canvas id = "canvas" width = "480" height = "360"></canvas>
<script>
let ctx = document.getElementById("canvas").getContext("2d");
let mouseX = 200;
let ballX = 200;
let ballY = 200;
let MX = 2;
let MY = 2;
let blocks = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1];
document.addEventListener("mousemove", function(e) {
	mouseX = e.clientX;
});
function block(x, y, w, h, c) {
	ctx.beginPath();
  ctx.rect(x, y, w, h);
  ctx.fillStyle = c;
  ctx.fill();
  ctx.closePath();
}
function render() {
	ctx.clearRect(0, 0, 500, 500);
	block(0, 0, 500, 500, "#000000");
  block(mouseX - 60, 320, 100, 10, "#ffffff");
  if (ballX > 450) {
   MX = -2;
  } else if (ballX < 0) {
   MX = 2;
  }
  if (ballY > 290 && ballX > mouseX - 80 && ballX < mouseX + 40) {
  	MY = -2;
  } else if (ballY > 330) {
   MY = -2;
  } else if (ballY < 0) {
   MY = 2;
  }
  ballX += MX;
  ballY += MY;
  block(ballX, ballY, 30, 30, "#ffffff");
  let x = 20;
  let y = 10;
  for (let i = 0; i < blocks.length; i++) {
  	if (blocks[i] == 1) {
    	block(x, y, 80, 40, "white");
      if (ballX > x - 30 && ballX < x + 80 && ballY > y - 30 && ballY < y + 40) {
      blocks.splice(i, 1, 0);
      if (ballX > x - 30 && ballX < x + 80) {
      	MX = MX / -1;
      } else {
      	MY = MY / -1;
      }
        
      }
    }
    x += 90;
    if (x > 400) {
    	x = 20;
      y += 50;
    }
    
  }
}
setInterval(render, 10);
</script>
</body>
</head>
</html>