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

No:8403

2191

A game where you lost your child and meet the masc..ALL
Developer User4186｜Date and time 23/7/15 18:43:39
Build time 34.509 sec｜Game capacity 4.937KB｜

Sure, here's a sample game that meets your requirements. Please note that this is a very simplified and basic example for demonstration purposes only.

Lost Child Game - Banban's Kindergarten

In this simple game, you control the red square which represents the player using the arrow keys on your smartphone. The blue squares represent the mascots. The objective is to avoid colliding with the mascots as you move around the kindergarten. If the player collides with any mascot, the game ends and a "Game Over" message is displayed. This example focuses on the basic mechanics of player movement, mascot movement, collision detection, and game over handling. You can customize and expand the game based on your needs and design preferences.

→ 　

1　

1　

　
　
　
　

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

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

(C)2023 HisashiApp

Sure, here's a sample game that meets your requirements. Please note that this is a very simplified and basic example for demonstration purposes only.

```html
<!DOCTYPE html>
<html>
<head>
    <title>Lost Child Game - Banban's Kindergarten</title>
    <style>
        #game-container {
            width: 400px;
            height: 400px;
            border: 2px solid black;
            position: relative;
        }
        #player {
            width: 40px;
            height: 40px;
            background-color: red;
            position: absolute;
            top: 180px;
            left: 180px;
        }
        .mascot {
            width: 40px;
            height: 40px;
            background-color: blue;
            position: absolute;
        }
    </style>
</head>
<body>
    <h1>Lost Child Game - Banban's Kindergarten</h1>
    <div id="game-container">
        <div id="player"></div>
        <div class="mascot" id="mascot1"></div>
        <div class="mascot" id="mascot2"></div>
        <div class="mascot" id="mascot3"></div>
        <div class="mascot" id="mascot4"></div>
    </div>

<script>
        // Game Variables
        var player = document.getElementById('player');
        var mascots = document.getElementsByClassName('mascot');
        
        // Game Initialization
        function initializeGame() {
            document.addEventListener('keydown', movePlayer);
        
            setInterval(function() {
                moveMascots();
                checkCollision();
            }, 1000);
        }
        
        // Player Movement
        function movePlayer(event) {
            var key = event.key;
            var playerTop = parseInt(window.getComputedStyle(player).getPropertyValue('top'));
            var playerLeft = parseInt(window.getComputedStyle(player).getPropertyValue('left'));
            var step = 10;
        
            switch (key) {
                case 'ArrowUp':
                    player.style.top = playerTop - step + 'px';
                    break;
                case 'ArrowDown':
                    player.style.top = playerTop + step + 'px';
                    break;
                case 'ArrowLeft':
                    player.style.left = playerLeft - step + 'px';
                    break;
                case 'ArrowRight':
                    player.style.left = playerLeft + step + 'px';
                    break;
            }
        }
        
        // Mascots Movement
        function moveMascots() {
            var step = 30;
        
            for (var i = 0; i < mascots.length; i++) {
                var randomDirection = Math.floor(Math.random() * 4);
                var mascotTop = parseInt(window.getComputedStyle(mascots[i]).getPropertyValue('top'));
                var mascotLeft = parseInt(window.getComputedStyle(mascots[i]).getPropertyValue('left'));
        
                switch (randomDirection) {
                    case 0:
                        mascots[i].style.top = mascotTop - step + 'px';
                        break;
                    case 1:
                        mascots[i].style.top = mascotTop + step + 'px';
                        break;
                    case 2:
                        mascots[i].style.left = mascotLeft - step + 'px';
                        break;
                    case 3:
                        mascots[i].style.left = mascotLeft + step + 'px';
                        break;
                }
            }
        }
        
        // Collision Detection
        function checkCollision() {
            var playerRect = player.getBoundingClientRect();
        
            for (var i = 0; i < mascots.length; i++) {
                var mascotRect = mascots[i].getBoundingClientRect();
        
                if (playerRect.top < mascotRect.bottom &&
                    playerRect.bottom > mascotRect.top &&
                    playerRect.left < mascotRect.right &&
                    playerRect.right > mascotRect.left) {
                    endGame();
                }
            }
        }
        
        // Game Over
        function endGame() {
            alert('Game Over! The mascots got you!');
            // You can add more logic here to restart the game or perform other actions
        }
        
        // Start the Game
        initializeGame();
    </script>
</body>
</html>
```

In this simple game, you control the red square which represents the player using the arrow keys on your smartphone. The blue squares represent the mascots. The objective is to avoid colliding with the mascots as you move around the kindergarten. If the player collides with any mascot, the game ends and a "Game Over" message is displayed.

This example focuses on the basic mechanics of player movement, mascot movement, collision detection, and game over handling. You can customize and expand the game based on your needs and design preferences.