I run sideways for a long time on my bike. Sometimes jumping holes.'s game

Click here for free DL of the app version that can save data.

No:7270

957

←

Prev Next

→

I run sideways for a long time on my bike. Sometim..ALL
Developer User3997｜Date and time 23/7/6 18:33:32
Build time 15.25 sec｜Game capacity 2.305KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
  <title>チャリで走るゲーム</title>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="200"></canvas>
  <script>
    const canvas = document.getElementById("gameCanvas");
    const ctx = canvas.getContext("2d");

const bike = {
      x: 20,
      y: canvas.height - 20,
      width: 40,
      height: 20,
      speed: 5
    };

const hole = {
      x: canvas.width,
      y: canvas.height - 30,
      radius: 10,
      speed: 2
    };

let score = 0;
    let gameIsOver = false;

function drawBike() {
      ctx.fillStyle = "yellow";
      ctx.fillRect(bike.x, bike.y, bike.width, bike.height);
    }

function drawHole() {
      ctx.beginPath();
      ctx.arc(hole.x, hole.y, hole.radius, 0, Math.PI * 2);
      ctx.fillStyle = "black";
      ctx.fill();
      ctx.closePath();
    }

function drawScore() {
      ctx.font = "16px Arial";
      ctx.fillStyle = "black";
      ctx.fillText("Score: " + score, 8, 20);
    }

function checkCollision() {
      const bikeLeft = bike.x;
      const bikeRight = bike.x + bike.width;
      const bikeTop = bike.y;
      const bikeBottom = bike.y + bike.height;
      const holeLeft = hole.x - hole.radius;
      const holeRight = hole.x + hole.radius;
      const holeTop = hole.y - hole.radius;
      const holeBottom = hole.y + hole.radius;

if (
        bikeRight > holeLeft &&
        bikeLeft < holeRight &&
        bikeBottom > holeTop &&
        bikeTop < holeBottom
      ) {
        gameIsOver = true;
      }
    }

function update() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

if (gameIsOver) {
        ctx.font = "30px Arial";
        ctx.fillStyle = "red";
        ctx.fillText("Game Over", 100, 100);
        return;
      }

drawBike();
      drawHole();
      drawScore();
      checkCollision();

bike.x += bike.speed;
      hole.x -= hole.speed;
      if (hole.x + hole.radius < 0) {
        hole.x = canvas.width;
        score++;
        if (score % 5 === 0) {
          bike.speed++;
        }
      }

requestAnimationFrame(update);
    }

document.addEventListener("keydown", function(event) {
      if (event.keyCode === 32) {
        bike.y -= 50;
      }
    });

update();
  </script>
</body>
</html>