Running from mom and dad's game

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

No:39428

←

Prev Next

→

Running from mom and dad
Developer User17641｜Date and time 24/1/28 11:45:46
Build time 18.17 sec｜Game capacity 4.683KB｜

Script

Sure, here's a simple game where you can control a character running away from mom and dad using smartphone operation (tilting the device). The game will be implemented as a single HTML file, enclosed in script tags, and written in JavaScript. For simplicity, we will use ASCII characters instead of pictograms.

To play the game, save the above code in an HTML file (for example, "game.html"), open the file using a web browser on your smartphone, and tilt your device to control the character. Your goal is to collect (collide with) the mom while avoiding (not colliding with) the dad. Your score will be displayed at the top of the screen. Have fun running from mom and dad!

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Running from Mom and Dad</title>
  <style>
    body {
      font-family: monospace;
      text-align: center;
    }
  </style>
</head>
<body>
  <script>
    // Game Variables
    let player = "🏃";
    let mom = "👩";
    let dad = "👨";
    let speed = 10;
    let score = 0;

// Game Elements
    let gameContainer = document.createElement("div");
    gameContainer.style.position = "absolute";
    gameContainer.style.left = "50%";
    gameContainer.style.transform = "translateX(-50%)";
    document.body.appendChild(gameContainer);

let playerElement = document.createElement("span");
    playerElement.innerHTML = player;
    gameContainer.appendChild(playerElement);

let momElement = document.createElement("span");
    momElement.innerHTML = mom;
    gameContainer.appendChild(momElement);

let dadElement = document.createElement("span");
    dadElement.innerHTML = dad;
    gameContainer.appendChild(dadElement);

let scoreElement = document.createElement("div");
    scoreElement.innerHTML = "Score: 0";
    document.body.appendChild(scoreElement);

// Game Logic
    let containerWidth = gameContainer.offsetWidth;
    let containerHeight = gameContainer.offsetHeight;
    let playerX = containerWidth / 2;
    let playerY = containerHeight / 2;
    let momX = Math.random() * containerWidth;
    let momY = Math.random() * containerHeight;
    let dadX = Math.random() * containerWidth;
    let dadY = Math.random() * containerHeight;

function gameLoop() {
      updatePlayer();
      updateMom();
      updateDad();
      checkCollisions();
      requestAnimationFrame(gameLoop);
    }

function updatePlayer() {
      playerElement.style.transform = `translate(${playerX}px, ${playerY}px)`;
    }

function updateMom() {
      let deltaX = getRandomMovement();
      let deltaY = getRandomMovement();
      momX += deltaX;
      momY += deltaY;

// Keep mom within container bounds
      momX = Math.max(0, Math.min(containerWidth - 20, momX));
      momY = Math.max(0, Math.min(containerHeight - 20, momY));

momElement.style.transform = `translate(${momX}px, ${momY}px)`;
    }

function updateDad() {
      let deltaX = getRandomMovement();
      let deltaY = getRandomMovement();
      dadX += deltaX;
      dadY += deltaY;

// Keep dad within container bounds
      dadX = Math.max(0, Math.min(containerWidth - 20, dadX));
      dadY = Math.max(0, Math.min(containerHeight - 20, dadY));

dadElement.style.transform = `translate(${dadX}px, ${dadY}px)`;
    }

function checkCollisions() {
      if (isColliding(playerX, playerY, momX, momY)) {
        score++;
        scoreElement.innerHTML = `Score: ${score}`;
        momX = Math.random() * containerWidth;
        momY = Math.random() * containerHeight;
      }

if (isColliding(playerX, playerY, dadX, dadY)) {
        score--;
        scoreElement.innerHTML = `Score: ${score}`;
        dadX = Math.random() * containerWidth;
        dadY = Math.random() * containerHeight;
      }
    }

function isColliding(x1, y1, x2, y2) {
      return Math.abs(x1 - x2) < 20 && Math.abs(y1 - y2) < 20;
    }

function getRandomMovement() {
      return Math.random() > 0.5 ? speed : -speed;
    }

window.addEventListener("deviceorientation", handleDeviceOrientation);

function handleDeviceOrientation(event) {
      let movementX = event.gamma;
      let movementY = event.beta;

if (movementX > 10) {
        playerX += speed;
      } else if (movementX < -10) {
        playerX -= speed;
      }

if (movementY > 10) {
        playerY += speed;
      } else if (movementY < -10) {
        playerY -= speed;
      }

// Keep player within container bounds
      playerX = Math.max(0, Math.min(containerWidth - 20, playerX));
      playerY = Math.max(0, Math.min(containerHeight - 20, playerY));
    }

gameLoop();
  </script>
</body>
</html>
```

To play the game, save the above code in an HTML file (for example, "game.html"), open the file using a web browser on your smartphone, and tilt your device to control the character. Your goal is to collect (collide with) the mom while avoiding (not colliding with) the dad. Your score will be displayed at the top of the screen. Have fun running from mom and dad!