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

No:13811

116

←

Prev Next

→

Hide and seek game
Developer User5988｜Date and time 23/8/30 3:43:27
Build time 27.431 sec｜Game capacity 5.145KB｜

Script

Sure! Here's a simple implementation of a hide and seek game using JavaScript within a single HTML file. The game will be playable assuming smartphone operation, and will utilize pictograms to represent different elements of the game. The game will start automatically.

Hide and Seek Game

🌳🌳🌳🌳🌳
🌳🌳🏃‍♀️🌳🌳
🌳🌳🌳🌳🌳
🌳🌳🌳🌳🌳
🌳🌳🌳🌳🌳

You can save the above code in a single HTML file and open it in a web browser to play the hide and seek game using the arrow keys on your smartphone. The player is represented by 🏃‍♀️ and the enemy by 👹. Try to avoid the enemy as you move around the playground represented by 🌳. If the enemy finds you, a game over message will appear, and you can reset the game by closing then reopening the HTML file.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Hide and Seek Game</title>
    <style>
        #container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            font-size: 3rem;
        }
        
        #playground {
            margin-top: 2rem;
            font-size: 8rem;
        }
        
        #player {
            color: red;
        }
        
        #enemy {
            color: blue;
        }
    </style>
</head>
<body>
    <div id="container">
        <h1>Hide and Seek Game</h1>
        <div id="playground">
            🌳🌳🌳🌳🌳<br>
            🌳🌳🏃‍♀️🌳🌳<br>
            🌳🌳🌳🌳🌳<br>
            🌳🌳🌳🌳🌳<br>
            🌳🌳🌳🌳🌳<br>
        </div>
    </div>

// Set the initial position of the player and enemy randomly
        let playerPosition = getRandomPosition();
        let enemyPosition = getRandomPosition();
        updateGame();

// Function to generate a random position on the playground
        function getRandomPosition() {
            const gridSize = 5; // Assuming a 5x5 grid
            return Math.floor(Math.random() * gridSize) + 1;
        }

// Function to update the game state
        function updateGame() {
            playground.innerHTML = getPlaygroundHtml(playerPosition, enemyPosition);
            checkGameStatus();
        }

// Function to generate the HTML representation of the playground
        function getPlaygroundHtml(playerPosition, enemyPosition) {
            let playgroundHtml = "";

for (let i = 0; i < 5; i++) {
                for (let j = 0; j < 5; j++) {
                    if (i === playerPosition[0] && j === playerPosition[1]) {
                        playgroundHtml += "🏃‍♀️";
                    } else if (i === enemyPosition[0] && j === enemyPosition[1]) {
                        playgroundHtml += "👹";
                    } else {
                        playgroundHtml += "🌳";
                    }
                }
                playgroundHtml += "<br>";
            }

return playgroundHtml;
        }

// Function to handle player movement
        function movePlayer(direction) {
            const [x, y] = playerPosition;

switch (direction) {
                case "up":
                    if (x > 0) {
                        playerPosition = [x - 1, y];
                    }
                    break;
                case "down":
                    if (x < 4) {
                        playerPosition = [x + 1, y];
                    }
                    break;
                case "left":
                    if (y > 0) {
                        playerPosition = [x, y - 1];
                    }
                    break;
                case "right":
                    if (y < 4) {
                        playerPosition = [x, y + 1];
                    }
                    break;
                default:
                    break;
            }

updateGame();
        }

// Function to check the game status
        function checkGameStatus() {
            const [playerX, playerY] = playerPosition;
            const [enemyX, enemyY] = enemyPosition;

if (playerX === enemyX && playerY === enemyY) {
                alert("Game Over! The enemy found you.");
                resetGame();
            }
        }

// Function to reset the game
        function resetGame() {
            playerPosition = getRandomPosition();
            enemyPosition = getRandomPosition();
            updateGame();
        }

// Event listeners for player movement
        window.addEventListener("keydown", function(event) {
            if (event.key === "ArrowUp") {
                movePlayer("up");
            } else if (event.key === "ArrowDown") {
                movePlayer("down");
            } else if (event.key === "ArrowLeft") {
                movePlayer("left");
            } else if (event.key === "ArrowRight") {
                movePlayer("right");
            }
        });
    </script>
</body>
</html>
```