flappy

<style>
  canvas {
    border: 1px solid black;
  }
</style>

<canvas id="my-canvas" width="800" height="600"></canvas>
<br />
<div id="score">score: </div>
<script>
  /*

    - bird: jumps, it falls, it 
    - tube thing that you die when you touch it, there are multiple,
    - tube things move forward

    */

  let score = 0;
  let isPaused = false;

  const bird = {
    x: 50,
    y: 50,
    vx: 0,
    vy: 1,
    width: 25,
    height: 25,
    color: "black",
  };

  let tubeParts = [];

  const myCanvas = document.getElementById("my-canvas");
  const scoreElement = document.getElementById("score");
  const ctx = myCanvas.getContext("2d");

  /**
   * r1 is a rectangle
   * r2 is a rectangle
   * check if r1 intersects r2
   */
  function intersects(r1, r2) {
      let xIntersects = false;
      let yIntersects = false;

    if (r1.x >= r2.x && r1.x <= r2.x + r2.width) {
        xIntersects = true;
    }

    if (r2.x >= r1.x && r2.x <= r1.x + r1.width) {
        xIntersects = true;
    }

    if (r1.y >= r2.y && r1.y <= r2.y + r2.height) {
        yIntersects = true;
    }

    if (r2.y >= r1.y && r2.y <= r1.y + r1.height) {
        yIntersects = true;
    }

    return xIntersects && yIntersects;
  }

  function makeTube(x) {
    const holeSize = 200;
    const holeTop = Math.random() * (600 - holeSize);
    const holeBottom = holeTop + holeSize;

    tubeParts.push({
      x: x,
      y: 0,
      width: 50,
      height: holeTop,
      color: "purple",
    });

    tubeParts.push({
      x: x,
      y: holeBottom,
      width: 50,
      height: 600 - holeBottom,
      color: "purple",
    });
  }

  function update() {
    bird.color = "green";
    // move the bird according to the laws of physics

    bird.x += bird.vx;
    bird.y += bird.vy;
    bird.vy += 1.5;

    const newTubeParts = [];

    if (!intersects(bird, {
        x: bird.width,
        y: bird.height,
        width: 800 - bird.width * 2,
        height: 600 - bird.height * 2
    })) {
        isPaused = true;
      }
      
    // move the tubes from right to left
    for (const part of tubeParts) {

      part.x -= 5;

      if (intersects(bird, part)) {
        isPaused = true;
      }

      if (part.x >= -part.width) {
        newTubeParts.push(part);
      }

      // score update

      if (part.x + part.width <= bird.x && !part.counted) {
          part.counted = true;
          score++;
          scoreElement.innerText = "score " + (score / 2)
      }
    }


    tubeParts = newTubeParts;
  }

  function draw() {
    // draw bird
    ctx.clearRect(0, 0, 800, 600);

    // draw tubes
    for (const part of tubeParts) {
      ctx.fillStyle = part.color;
      ctx.fillRect(part.x, part.y, part.width, part.height);
    }

    ctx.fillStyle = bird.color;
    ctx.fillRect(bird.x, bird.y, bird.width, bird.height);
  }

  function frame() {
    if (isPaused) return;

    update();
    draw();
  }

  function onKeyPress(e) {
    bird.vy = -20;
  }

  setInterval(frame, 1000 / 30);

  makeTube(800);
  setInterval(() => {
    makeTube(800);
  }, 1500);

  window.addEventListener("keydown", onKeyPress);
</script>