Rober run from police's game

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

No:12868

159

←

Prev Next

→

Rober run from police
Developer User5600｜Date and time 23/8/24 8:10:55
Build time 49.766 sec｜Game capacity 5.019KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

<!DOCTYPE html>
<html>
  <head>
    <title>Rober Run</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
      }

#gameCanvas {
        width: 100%;
        height: 100vh;
        background-color: #f0f0f0;
      }

#player {
        width: 50px;
        height: 50px;
        background-color: red;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
      }

.police {
        width: 50px;
        height: 50px;
        background-color: blue;
        position: absolute;
      }

.coin {
        width: 30px;
        height: 30px;
        background-color: yellow;
        position: absolute;
      }
    </style>
  </head>
  <body>
    <canvas id="gameCanvas"></canvas>

// Key states
      let leftPressed = false;
      let rightPressed = false;

// Player movement speed
      const playerSpeed = 5;

// Police movement speed
      const policeSpeed = 2;

// Coin spawn interval (in milliseconds)
      const coinSpawnInterval = 3000;

// Initialize the game
      function init() {
        canvas = document.getElementById("gameCanvas");
        ctx = canvas.getContext("2d");

canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

playerX = canvas.width / 2;
        playerY = canvas.height - 100;

score = 0;

spawnPolice();
        spawnCoin();

document.addEventListener("keydown", keyDownHandler, false);
        document.addEventListener("keyup", keyUpHandler, false);

setInterval(update, 10);
        setInterval(spawnCoin, coinSpawnInterval);
      }

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

drawPlayer();
        movePlayer();

drawPolice();
        movePolice();

drawCoin();
        moveCoin();

detectCollision();

drawScore();
      }

// Draw the player
      function drawPlayer() {
        ctx.beginPath();
        ctx.rect(playerX - 25, playerY, 50, 50);
        ctx.fillStyle = "red";
        ctx.fill();
        ctx.closePath();
      }

// Move the player based on key states
      function movePlayer() {
        if (leftPressed && playerX > 25) {
          playerX -= playerSpeed;
        } else if (rightPressed && playerX < canvas.width - 25) {
          playerX += playerSpeed;
        }
      }

// Key down handler
      function keyDownHandler(event) {
        if (event.key === "ArrowLeft") {
          leftPressed = true;
        } else if (event.key === "ArrowRight") {
          rightPressed = true;
        }
      }

// Key up handler
      function keyUpHandler(event) {
        if (event.key === "ArrowLeft") {
          leftPressed = false;
        } else if (event.key === "ArrowRight") {
          rightPressed = false;
        }
      }

// Spawn a police
      function spawnPolice() {
        policeX = Math.random() * (canvas.width - 50);
        policeY = -50;
      }

// Draw the police
      function drawPolice() {
        ctx.beginPath();
        ctx.rect(policeX, policeY, 50, 50);
        ctx.fillStyle = "blue";
        ctx.fill();
        ctx.closePath();
      }

// Move the police downwards
      function movePolice() {
        policeY += policeSpeed;

if (policeY > canvas.height) {
          spawnPolice();
        }
      }

// Spawn a coin
      function spawnCoin() {
        coinX = Math.random() * (canvas.width - 30);
        coinY = -30;
      }

// Draw the coin
      function drawCoin() {
        ctx.beginPath();
        ctx.rect(coinX, coinY, 30, 30);
        ctx.fillStyle = "yellow";
        ctx.fill();
        ctx.closePath();
      }

// Move the coin downwards
      function moveCoin() {
        coinY += policeSpeed;

if (coinY > canvas.height) {
          spawnCoin();
        }
      }

// Detect collision between player, police, and coin
      function detectCollision() {
        if (
          playerX < policeX + 50 &&
          playerX + 50 > policeX &&
          playerY < policeY + 50 &&
          playerY + 50 > policeY
        ) {
          // Game over condition
          alert("Game Over! Score: " + score);
          window.location.reload();
        }

if (
          playerX < coinX + 30 &&
          playerX + 50 > coinX &&
          playerY < coinY + 30 &&
          playerY + 50 > coinY
        ) {
          // Coin collected
          score++;
          spawnCoin();
        }
      }

// Draw the score
      function drawScore() {
        ctx.font = "24px Arial";
        ctx.fillStyle = "black";
        ctx.fillText("Score: " + score, 10, 30);
      }

// Start the game
      init();
    </script>
  </body>
</html>