Emoji bouncing round the screen, but cannot touch the wall, but one time it goes in the corner and then after that jump, scares you with a :-)'s game | AI game creator

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

No:14550

146

Emoji bouncing round the screen, but cannot touch ..ALL
Developer User6282｜Date and time 23/9/3 3:13:17
Build time 25.627 sec｜Game capacity 3.348KB｜

Sure! Here's an example of a simple game implemented in a single HTML file using JavaScript. The game involves a bouncing emoji that moves around the screen. The goal is to avoid touching the walls. When the emoji reaches one of the corners, it will jump and display a smiley face, scaring the player with a sudden change.

😃

In the code above, we create a game container `div` with a fixed size, and a emoji `span` inside it. The emoji is positioned at the center of the container using CSS, and it's animated to bounce up and down using a CSS animation. The `jumpEmoji` function is called when the player clicks on the emoji. It will change the emoji text to a smiley face ":-)" for a second, simulating a scare, and then revert it back to the original emoji. The `mousemove` event listener is added to the game container to track the mouse movement. When the mouse goes outside the container (touching the walls), the container's background color is changed to red, indicating a collision. You can copy the code into a single HTML file, save it with a `.html` extension, and open it in a web browser to play the game. You can control the game using a mouse on a smartphone or on desktop. The emoji will bounce around, and if it touches the walls, the game container will turn red. When you click on the emoji, it will scare you by showing a smiley face for a moment.

→ 　

0　

0　

[PR]現在の人気ゲームランキング

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

(C)2023 HisashiApp

Sure! Here's an example of a simple game implemented in a single HTML file using JavaScript. The game involves a bouncing emoji that moves around the screen. The goal is to avoid touching the walls. When the emoji reaches one of the corners, it will jump and display a smiley face, scaring the player with a sudden change.

```html
<!DOCTYPE html>
<html>
<head>
    <title>Bouncing Emoji Game</title>
    <style>
        #game-container {
            position: relative;
            width: 400px;
            height: 400px;
            border: 1px solid black;
            overflow: hidden;
        }
        #emoji {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 40px;
            animation: bounce 1s infinite ease-in-out;
        }
        @keyframes bounce {
            0% {
                transform: translate(-50%, -50%) translateY(-50px);
            }
            50% {
                transform: translate(-50%, -50%) translateY(0);
            }
            100% {
                transform: translate(-50%, -50%) translateY(-50px);
            }
        }
    </style>
</head>
<body>
    <div id="game-container">
        <span id="emoji" onclick="jumpEmoji()">😃</span>
    </div>

<script>
        const gameContainer = document.getElementById('game-container');
        const emoji = document.getElementById('emoji');
        let emojiJumped = false;

function jumpEmoji() {
            if (!emojiJumped) {
                emojiJumped = true;
                emoji.innerText = ':-)';
                setTimeout(function() {
                    emojiJumped = false;
                    emoji.innerText = '😃';
                }, 1000);
            }
        }

gameContainer.addEventListener('mousemove', function(event) {
            const rect = gameContainer.getBoundingClientRect();
            const x = event.clientX - rect.left;
            const y = event.clientY - rect.top;

if (x < 0 || x > rect.width || y < 0 || y > rect.height) {
                gameContainer.style.backgroundColor = 'red';
            } else {
                gameContainer.style.backgroundColor = 'white';
            }
        });
    </script>
</body>
</html>
```

In the code above, we create a game container `div` with a fixed size, and a emoji `span` inside it. The emoji is positioned at the center of the container using CSS, and it's animated to bounce up and down using a CSS animation.

The `jumpEmoji` function is called when the player clicks on the emoji. It will change the emoji text to a smiley face ":-)" for a second, simulating a scare, and then revert it back to the original emoji.

The `mousemove` event listener is added to the game container to track the mouse movement. When the mouse goes outside the container (touching the walls), the container's background color is changed to red, indicating a collision.

You can copy the code into a single HTML file, save it with a `.html` extension, and open it in a web browser to play the game. You can control the game using a mouse on a smartphone or on desktop. The emoji will bounce around, and if it touches the walls, the game container will turn red. When you click on the emoji, it will scare you by showing a smiley face for a moment.