Speedy Gonzales Runs Over The City's game

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

No:29959

←

Prev Next

→

Speedy Gonzales Runs Over The City
Developer User14673｜Date and time 23/12/20 3:13:01
Build time 12.071 sec｜Game capacity 2.66KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
  <head>
    <style>
      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }

body {
        background-color: #333;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
      }

#game {
        position: relative;
        width: 400px;
        height: 400px;
        border: 2px solid #fff;
      }

#car {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    </style>
  </head>
  <body>
    <div id="game"></div>

// Function to move the car
      function moveCar(direction) {
        switch (direction) {
          case "up":
            carPosition.y -= carSpeed;
            break;
          case "down":
            carPosition.y += carSpeed;
            break;
          case "left":
            carPosition.x -= carSpeed;
            break;
          case "right":
            carPosition.x += carSpeed;
            break;
        }

updateCarPosition();
      }

// Function to update the car's position on the screen
      function updateCarPosition() {
        const car = document.getElementById("car");
        car.style.top = `${carPosition.y}px`;
        car.style.left = `${carPosition.x}px`;
      }

// Event listeners for touch controls
      document.addEventListener("keydown", handleKeyDown);

// Handles keyboard arrow key events
      function handleKeyDown(event) {
        const key = event.key.toLowerCase();

if (key === "arrowup" || key === "w") {
          moveCar("up");
        } else if (key === "arrowdown" || key === "s") {
          moveCar("down");
        } else if (key === "arrowleft" || key === "a") {
          moveCar("left");
        } else if (key === "arrowright" || key === "d") {
          moveCar("right");
        }
      }

// Create the game elements and start the game
      function startGame() {
        const gameContainer = document.getElementById("game");

// Create car element
        const car = document.createElement("img");
        car.src = "pictograms/car.png";
        car.id = "car";
        car.style.width = "50px";
        car.style.height = "auto";
        car.style.position = "absolute";
        car.style.top = `${carPosition.y}px`;
        car.style.left = `${carPosition.x}px`;
        gameContainer.appendChild(car);
      }

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