JSFiddle - React, Tailwind, and code Playground

by frogggeee McFrogggeee

HTML

<!DOCTYPE html>
<html>
<head>
<body>
<canvas id = "canvas" width = "480" height = "360"></canvas>
<script>
let ctx = document.getElementById("canvas").getContext("2d");
let cX = 0;
let cY = 0;
let click = false;
let blockX = [];
let blockY = [];
function makeWorld() {
	let i = 0;
  let e = 0;
  let x = 0;
  let y = 730;
  for (e = 0; e < 45; e++) {
    for (i = 0; i < 49; i++) {
			blockX.push(x);
      blockY.push(y);
      x += 10;
    }
    x = 0;
    y -= 10;
  }
  
}
document.addEventListener("mousedown", function(e) {
	cX = e.pageX - 7;
    cY = e.pageY - 7;    
    click = true;
});
function block(x, y, w, h, c) {
	ctx.beginPath();
  ctx.rect(x, y, w, h);
  ctx.fillStyle = c;
  ctx.fill();
  ctx.closePath();
}
makeWorld();
function render() {
	ctx.clearRect(0, -1000, 500, 3000);
	block(0, 0, 480, 360, "cyan");
  block(cX, cY, 5, 5, "black");
  let XD = 0;
  let cos = 0;
  for (let i = 0; i < blockX.length; i++) {
  	block(blockX[i], blockY[i], 10, 10, "green");
    if (click == true) {
      XD = Math.sqrt((cX - blockX[i]) * (cX - blockX[i]));
      cos = Math.cos(XD / 15) * 15
      if (XD < 40) {
        blockY.splice(i, 1, blockY[i] - (Math.floor((((cY / (XD + cos)) * 15) / 10)) * 10));
      }
    }
  }
  click = false;
}

setInterval(render, 10);
</script>
</body>
</head>
</html>