A game where the monster is constantly chasing you, and if you press a button, then you move away from the monster, and you try to run away from the monster, but if the monster touches you you die and please make the game using pictograms's game

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

No:31826

←

Prev Next

→

A game where the monster is constantly chasing you..ALL
Developer User15232｜Date and time 23/12/28 12:33:23
Build time 28.397 sec｜Game capacity 3.495KB｜

Script

Sure! Here's an example of how you can create a simple game using JavaScript and pictograms within a single HTML file. This game is designed to be played on a smartphone, and the monster continuously chases you. Pressing a button allows you to move away from the monster, and if the monster touches you, you die.

Score: 0

Please note that you'll need to replace the `emozi_all/player.png` and `emozi_all/monster.png` URLs with your own pictograms.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Monster Chase Game</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

#game-area {
            position: relative;
            width: 100vw;
            height: 100vh;
            background-color: lightblue;
        }

#player {
            position: absolute;
            width: 64px;
            height: 64px;
            background-image: url('player.png'); /* Replace with your own pictogram */
            background-size: cover;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

#monster {
            position: absolute;
            width: 64px;
            height: 64px;
            background-image: url('monster.png'); /* Replace with your own pictogram */
            background-size: cover;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

#score {
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 24px;
            color: white;
        }
    </style>
</head>
<body>
    <div id="game-area">
        <div id="player"></div>
        <div id="monster"></div>
    </div>
    <div id="score">Score: 0</div>

// Move the monster randomly within the game area
        function moveMonster() {
            var newX = Math.random() * (window.innerWidth - monster.clientWidth);
            var newY = Math.random() * (window.innerHeight - monster.clientHeight);
            monster.style.left = newX + "px";
            monster.style.top = newY + "px";
        }

// Increment score and move the monster when the player clicks
        player.addEventListener("click", function() {
            score++;
            scoreDisplay.innerText = "Score: " + score;
            moveMonster();
        });

// Check collision between player and monster
        setInterval(function() {
            var playerRect = player.getBoundingClientRect();
            var monsterRect = monster.getBoundingClientRect();

if (isColliding(playerRect, monsterRect)) {
                // Game Over
                alert("Game Over! Your score: " + score);
                score = 0;
                scoreDisplay.innerText = "Score: " + score;
                moveMonster();
            }
        }, 100);

// Utility function to check collision between two rectangles
        function isColliding(rect1, rect2) {
            return rect1.left < rect2.right &&
                   rect1.right > rect2.left &&
                   rect1.top < rect2.bottom &&
                   rect1.bottom > rect2.top;
        }
        
        // Start the game by moving the monster initially
        moveMonster();
    </script>
</body>
</html>
```

Please note that you'll need to replace the `player.png` and `monster.png` URLs with your own pictograms.