JSFiddle - React, Tailwind, and code Playground

by frogggeee McFrogggeee

HTML

<!DOCTYPE html>
<html>
<head>
<body>
<canvas id = "canvas" width = "340" height = "450"></canvas>
<script>
document.addEventListener("mousedown", onDown, false);
function onDown(e) {
	let cX = e.pageX;
  let cY = e.pageY;
  if (dir == 0) {
  	dir = 1;
  }
  //dir = dir - (dir * 2);
	if (blockX + width > (x[1] + w[1]) + 2) {
  	width = width - ((blockX + width) - (x[1] + w[1]));
  } else if (blockX < x[1] - 2) {
  	width = width - (x[1] - blockX);
  }
  if (blockX > (x[0] + w[0]) + 1) {
  	lost = true;
  } else if (blockX + width < x[0]) {
		lost = true;
  }
  if (lost == true) {
  	alert("you lost!");
  }
  speed += 0.05;
  if (dir != 0) {
  	  x.unshift(blockX);
  blockY.push(y);
  w.unshift(width);
  y += 40;
  if (lost == false) {
  	score += Math.floor(width / 10);
  }
  }
}
let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
let dir = 0;
let speed = 1.7;
let width = 80;
let score = 0;
let blockX = 100;
let y = 0;
let x = [];
let blockY = [];
let w = [];
let lost = false;
function block(x, y, w, h, c) {
	ctx.beginPath();
  ctx.rect(x, y, w, h);
  ctx.fillStyle = c;
  ctx.fill();
  ctx.closePath();
}
function render() {
	if (lost == false) {
	ctx.clearRect(-100, -100, 600, 800);
	block(0, 0, 400, 600, "#00FFFF");
  block(0, 300 + y, 400, 400, "black");
  if (dir == 1) {
  	blockX += speed;
  } else if (dir == -1) {
  	blockX -= speed;
  }
  if (blockX > 340 - width || blockX < 0) {
  	dir = dir - (dir * 2);
  }
	block(blockX, 260, width, 40, "red");
  for (let i = 0; i < w.length; i++) {
  	block(x[i], blockY[i] + 300, w[i], 40, "red");
  }
  ctx.beginPath();
    ctx.font = "25px Roboto Mono";
    ctx.fillStyle = "#000000";
    ctx.fillText("score: " + score, 3, 20);
    ctx.closePath();
  }
}
setInterval(render, 100);
</script>
</body>
</head>
</html>