The Run. You Are a Penguin, Watch Out for the Walrus and the Polar Bear, Find your Mom and Dad's game

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

No:35381

←

Prev Next

→

The Run. You Are a Penguin, Watch Out for the Walr..ALL
Developer User16498｜Date and time 24/1/14 9:27:26
Build time 14.054 sec｜Game capacity 4.607KB｜

Script

Sure! Here's a simple game implemented as a single HTML file using JavaScript. The game is set in the Arctic, where you control a penguin trying to find its mom and dad while avoiding walruses and polar bears.

🐧

To play the game, copy the above code into a new HTML file (.html), save it, and open it in a web browser. The game will automatically start, and you can control the penguin's movement using the arrow keys. Try to avoid the walruses (🦭) and polar bears (🐻) while collecting points. The longer you survive, the higher your score! Please note that this is a basic example and can be further improved and customized according to your preferences.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    .game-container {
      position: relative;
      width: 100%;
      height: 100vh;
      overflow: hidden;
      background-color: #d7f3ff;
    }
    
    .player {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 4em;
    }
    
    .obstacle {
      position: absolute;
      font-size: 3em;
    }
    
    .walrus {
      color: #aa2020;
    }
    
    .polar-bear {
      color: #ffffff;
    }
  </style>
</head>
<body>
  <div class="game-container">
    <div class="player">🐧</div>
  </div>

let score = 0;
      let gameEnded = false;

// Function to generate random positions for the obstacles
      function getRandomPosition(max) {
        return Math.floor(Math.random() * max);
      }

// Function to check collision between player and obstacles
      function checkCollision() {
        const obstacles = document.querySelectorAll(".obstacle");

obstacles.forEach((obstacle) => {
          const playerRect = player.getBoundingClientRect();
          const obstacleRect = obstacle.getBoundingClientRect();

if (
            playerRect.left < obstacleRect.right &&
            playerRect.right > obstacleRect.left &&
            playerRect.top < obstacleRect.bottom &&
            playerRect.bottom > obstacleRect.top
          ) {
            endGame();
          }
        });
      }

// Function to create obstacles at random positions
      function createObstacle() {
        if (gameEnded) {
          return;
        }

const obstacleTypes = ["🦭", "🐻"];
        const obstacleType = obstacleTypes[getRandomPosition(obstacleTypes.length)];
        const obstacle = document.createElement("div");

obstacle.classList.add("obstacle");
        if (obstacleType === "🦭") {
          obstacle.classList.add("walrus");
        } else if (obstacleType === "🐻") {
          obstacle.classList.add("polar-bear");
        }

obstacle.innerText = obstacleType;
        obstacle.style.left = `${getRandomPosition(gameContainer.clientWidth)}px`;
        obstacle.style.top = `${getRandomPosition(gameContainer.clientHeight)}px`;

gameContainer.appendChild(obstacle);
        checkCollision();

setTimeout(createObstacle, 1500 - score * 10);
      }

// Function to move the player based on arrow key input
      function movePlayer(event) {
        if (gameEnded) {
          return;
        }

const key = event.key;

const playerRect = player.getBoundingClientRect();
        const gameRect = gameContainer.getBoundingClientRect();

if (key === "ArrowUp" && playerRect.top > gameRect.top) {
          player.style.top = `${playerRect.top - 10}px`;
        } else if (key === "ArrowDown" && playerRect.bottom < gameRect.bottom) {
          player.style.top = `${playerRect.top + 10}px`;
        } else if (key === "ArrowLeft" && playerRect.left > gameRect.left) {
          player.style.left = `${playerRect.left - 10}px`;
        } else if (key === "ArrowRight" && playerRect.right < gameRect.right) {
          player.style.left = `${playerRect.left + 10}px`;
        }

checkCollision();
      }

// Function to end the game
      function endGame() {
        gameEnded = true;
        alert(`Game Over! Score: ${score}`);
        location.reload();
      }

// Event listener for arrow key input and start the game
      document.addEventListener("keydown", movePlayer);
      createObstacle();

// Increase score every second
      setInterval(() => {
        if (!gameEnded) {
          score++;
        }
      }, 1000);
    });
  </script>
</body>
</html>
```

Please note that this is a basic example and can be further improved and customized according to your preferences.