Labyrinth:Part 2 Of Theo Top(When BLUE Square Got On Theo Top,The Red Square Tries Stop Him Again,(Game With The Character Talking And Chat ai),But The Red Square Is More Giant,Move Clicking UP And Down Right And Left's game

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

No:23523

←

Prev Next

→

Labyrinth:Part 2 Of Theo Top(When BLUE Square Got ..ALL
Developer User10967｜Date and time 23/11/1 6:17:51
Build time 82.095 sec｜Game capacity 2.65KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>Labyrinth: Part 2 Of Theo Top</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
    canvas {
      background-color: #000;
    }
  </style>
</head>
<body>
  <canvas id="game-canvas"></canvas>
  <script>
    // Define sizes and positions for the game
    const canvasWidth = window.innerWidth;
    const canvasHeight = window.innerHeight;
    const playerSize = 50;
    const obstacleSize = 100;
    const obstacleSpeed = 5;

// Create the canvas element
    const canvas = document.getElementById('game-canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = canvasWidth;
    canvas.height = canvasHeight;

// Set initial positions for the player and the obstacle
    let playerX = (canvasWidth - playerSize) / 2;
    let playerY = (canvasHeight - playerSize) / 2;
    let obstacleX = canvasWidth;
    let obstacleY = Math.random() * (canvasHeight - obstacleSize);

// Handle player movement based on user input
    const movePlayer = (event) => {
      switch (event.keyCode) {
        case 37: // Left arrow
          playerX -= 10;
          break;
        case 38: // Up arrow
          playerY -= 10;
          break;
        case 39: // Right arrow
          playerX += 10;
          break;
        case 40: // Down arrow
          playerY += 10;
          break;
      }
    };

// Check for collision between the player and the obstacle
    const checkCollision = () => {
      if (
        playerX < obstacleX + obstacleSize &&
        playerX + playerSize > obstacleX &&
        playerY < obstacleY + obstacleSize &&
        playerY + playerSize > obstacleY
      ) {
        return true; // Collision occurred
      }
      return false; // No collision
    };

// Update game state in each frame
    const update = () => {
      ctx.clearRect(0, 0, canvasWidth, canvasHeight);

// Move the obstacle towards the left
      obstacleX -= obstacleSpeed;

// Draw the player
      ctx.fillStyle = 'blue';
      ctx.fillRect(playerX, playerY, playerSize, playerSize);

// Draw the obstacle
      ctx.fillStyle = 'red';
      ctx.fillRect(obstacleX, obstacleY, obstacleSize, obstacleSize);

// Check collision
      if (checkCollision()) {
        alert('Game Over! The red square stopped you again!');
        location.reload(); // Restart the game
      }

requestAnimationFrame(update);
    };

// Start the game and listen for user input
    const startGame = () => {
      window.addEventListener('keydown', movePlayer);
      update();
    };

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