A random emoji moving in a box forever but everytime it hits a wall or corner, the box shrinks's game

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

No:37361

←

Prev Next

→

A random emoji moving in a box forever but everyti..ALL
Developer User17064｜Date and time 24/1/21 2:33:15
Build time 9.97 sec｜Game capacity 2.703KB｜

Script

Sure! Here's an example of a single HTML file that creates a simple game with a random emoji moving in a box. Every time the emoji hits a wall or corner, the box shrinks. The game is designed for smartphone operation and uses emoji pictograms.

🎮

To try this game, simply copy and paste the code into a new HTML file and open it in a web browser. The game box will initially be a 300x300 square, and the emoji will start moving randomly within it. Each time the emoji hits a wall or corner, the box will shrink by 10 pixels. The game will continue indefinitely, with the emoji bouncing off the walls and the box getting smaller. Enjoy playing!

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <style>
        #game-box {
            width: 300px;
            height: 300px;
            border: 1px solid black;
            position: relative;
            overflow: hidden;
        }

#emoji {
            font-size: 30px;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <div id="game-box">
        <div id="emoji">🎮</div>
    </div>

// Initialize the game state
        var boxWidth = gameBox.offsetWidth;
        var boxHeight = gameBox.offsetHeight;
        var emojiWidth = emoji.offsetWidth;
        var emojiHeight = emoji.offsetHeight;
        var x = Math.floor(Math.random() * (boxWidth - emojiWidth));
        var y = Math.floor(Math.random() * (boxHeight - emojiHeight));
        var dx = 1;
        var dy = 1;

// Function to update the emoji's position
        function moveEmoji() {
            x += dx;
            y += dy;

// Check for collision with walls or corners
            if (x <= 0 || x >= boxWidth - emojiWidth) {
                dx = -dx; // Reverse direction on collision
                boxWidth -= 10; // Shrink the box
                gameBox.style.width = boxWidth + 'px';
            }
            if (y <= 0 || y >= boxHeight - emojiHeight) {
                dy = -dy; // Reverse direction on collision
                boxHeight -= 10; // Shrink the box
                gameBox.style.height = boxHeight + 'px';
            }

// Update the emoji's position
            emoji.style.left = x + 'px';
            emoji.style.top = y + 'px';

// Call moveEmoji recursively for smooth animation
            requestAnimationFrame(moveEmoji);
        }

// Start the game by calling moveEmoji for the first time
        moveEmoji();
    </script>
</body>
</html>
```