Generate a game where you're a random block and your goal is to go to the random blocks without the blue box hitting your face with a weapon your goal is just to run into random boxes or objects the objects are random shapes's game

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

No:47977

115

←

Prev Next

→

Generate a game where you're a random block and yo..ALL
Developer User20677｜Date and time 24/3/1 6:11:14
Build time 14.492 sec｜Game capacity 3.332KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

<!DOCTYPE html>
<html>
  <head>
    <title>Block Game</title>
    <style>
      canvas {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    <script>
      const canvas = document.getElementById('gameCanvas');
      const ctx = canvas.getContext('2d');
      
      let player = {
        x: 200,
        y: 200,
        size: 20,
        color: '
        speed: 3
      };
      
      let target = {
        x: Math.random() * 400,
        y: Math.random() * 400,
        size: 20,
        color: 'green'
      };
      
      let obstacles = [
        {
          x: Math.random() * 400,
          y: Math.random() * 400,
          size: 30,
          color: 'blue'
        },
        {
          x: Math.random() * 400,
          y: Math.random() * 400,
          size: 30,
          color: 'blue'
        },
        {
          x: Math.random() * 400,
          y: Math.random() * 400,
          size: 30,
          color: 'blue'
        }
      ];
      
      function drawPlayer() {
        ctx.fillStyle = player.color;
        ctx.fillRect(player.x, player.y, player.size, player.size);
      }
      
      function drawTarget() {
        ctx.fillStyle = target.color;
        ctx.fillRect(target.x, target.y, target.size, target.size);
      }
      
      function drawObstacles() {
        obstacles.forEach((obstacle) => {
          ctx.fillStyle = obstacle.color;
          ctx.fillRect(obstacle.x, obstacle.y, obstacle.size, obstacle.size);
        });
      }
      
      function clearCanvas() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
      }
      
      function movePlayer(directionX, directionY) {
        player.x += directionX * player.speed;
        player.y += directionY * player.speed;
      }
      
      function detectCollision(obstacle) {
        if (player.x < obstacle.x + obstacle.size &&
            player.x + player.size > obstacle.x &&
            player.y < obstacle.y + obstacle.size &&
            player.y + player.size > obstacle.y) {
              return true;
        } else {
          return false;
        }
      }
      
      function updateGame() {
        clearCanvas();
        drawPlayer();
        drawTarget();
        drawObstacles();
        
        if (detectCollision(target)) {
          alert('Ganaste!');
          target.x = Math.random() * 400;
          target.y = Math.random() * 400;
        }
        
        obstacles.forEach((obstacle) => {
          if (detectCollision(obstacle)) {
            alert('Perdiste :(');
            player.x = 200;
            player.y = 200;
          }
        });
      }
      
      document.addEventListener('keydown', (event) => {
        switch(event.key) {
          case 'ArrowUp':
            movePlayer(0, -1);
            break;
          case 'ArrowDown':
            movePlayer(0, 1);
            break;
          case 'ArrowLeft':
            movePlayer(-1, 0);
            break;
          case 'ArrowRight':
            movePlayer(1, 0);
            break;
        }
        
        updateGame();
      });
      
      updateGame();
    </script>
  </body>
</html>