Giant robot destroying a city game's game

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

No:36832

←

Prev Next

→

Giant robot destroying a city game
Developer User16878｜Date and time 24/1/18 17:06:54
Build time 11.938 sec｜Game capacity 2.773KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>Giant Robot Destroying City Game</title>
</head>
<body>
  <canvas id="gameCanvas" width="480" height="320"></canvas>
  <script>
    // Game variables
    var canvas, ctx;
    var robot, city;
    var gameIsOver;

// Initialize the game
    function init() {
      canvas = document.getElementById("gameCanvas");
      ctx = canvas.getContext("2d");
      robot = { x: 50, y: 250, width: 80, height: 80 }; // Starting position and size of the robot
      city = { x: 200, y: 200, width: 200, height: 120 }; // Position and size of the city
      gameIsOver = false;

// Listen to touch events for smartphone operation
      canvas.addEventListener("touchstart", handleTouchStart, false);
      canvas.addEventListener("touchmove", handleTouchMove, false);

// Start the game loop
      gameLoop();
    }

// Update game logic
    function update() {
      if (gameIsOver) return; // Stop updating if the game is over

// Move the robot towards the right
      robot.x += 1;

// Check if the robot reaches the city to destroy it
      if (robot.x + robot.width >= city.x && robot.x <= city.x + city.width) {
        if (robot.y + robot.height >= city.y && robot.y <= city.y + city.height) {
          gameIsOver = true;
          alert("Game Over! The city has been destroyed.");
        }
      }
    }

// Render game objects on the canvas
    function render() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw the robot
      ctx.fillStyle = "blue";
      ctx.fillRect(robot.x, robot.y, robot.width, robot.height);

// Draw the city
      ctx.fillStyle = "gray";
      ctx.fillRect(city.x, city.y, city.width, city.height);
    }

// Game loop - update and render the game continuously
    function gameLoop() {
      update();
      render();
      requestAnimationFrame(gameLoop);
    }

// Handle touch start event
    function handleTouchStart(event) {
      event.preventDefault();
      var touchX = event.touches[0].clientX;

if (touchX < canvas.width / 2) {
        // Move the robot up if touched on the left half of the screen
        robot.y -= 10;
      } else {
        // Move the robot down if touched on the right half of the screen
        robot.y += 10;
      }
    }

// Handle touch move event
    function handleTouchMove(event) {
      event.preventDefault();
      var touchX = event.touches[0].clientX;

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