AI game creator

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

No:36229

144

←

Prev Next

→

🦢 player me
Developer User16766｜Date and time 24/1/17 4:14:42
Build time 21.458 sec｜Game capacity 5.46KB｜

Script

Certainly! Here's a simple game implemented as a single HTML file using JavaScript and enclosed in script tags. The game is called "Emoji Catcher" where you control a swan (🦢) to catch falling pictograms. You can play the game on a smartphone by swiping left or right to move the swan and catch the falling emojis. Enjoy!

To play the game, copy the above code into a new HTML file and save it with a `.html` extension. Then open the file in a web browser using a smartphone, and you should be able to swipe left or right to control the swan and catch the falling emojis. Enjoy playing!

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Emoji Catcher</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            font-size: 50px;
            background-color: #f0f0f0;
            user-select: none;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            cursor: default;
        }
        #game {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div id="game"></div>
    <script>
        const gameContainer = document.getElementById("game");
        const swan = document.createElement("span");
        swan.innerHTML = "🦢";
        swan.style.position = "absolute";
        swan.style.left = "50%";
        swan.style.transform = "translateX(-50%)";
        swan.style.bottom = "20px";
        gameContainer.appendChild(swan);

let score = 0;
        const scoreElement = document.createElement("div");
        scoreElement.style.position = "absolute";
        scoreElement.style.top = "10px";
        scoreElement.style.left = "10px";
        scoreElement.style.fontSize = "24px";
        gameContainer.appendChild(scoreElement);

const emojis = ["😃", "🍕", "🌈", "🐱", "🌸", "🐶", "🍦", "🎉", "🎮", "🚀", "🎲"];

function getRandomEmoji() {
            const randomIndex = Math.floor(Math.random() * emojis.length);
            return emojis[randomIndex];
        }

function createFallingEmoji() {
            const fallingEmoji = document.createElement("span");
            fallingEmoji.innerHTML = getRandomEmoji();
            fallingEmoji.style.position = "absolute";
            fallingEmoji.style.left = Math.random() * (100 - fallingEmoji.offsetWidth) + "%";
            fallingEmoji.style.top = "0";
            gameContainer.appendChild(fallingEmoji);

const moveInterval = setInterval(() => {
                const currentPosition = parseInt(fallingEmoji.style.top);
                fallingEmoji.style.top = (currentPosition + 1) + "px";

if (currentPosition > window.innerHeight) {
                    clearInterval(moveInterval);
                    gameContainer.removeChild(fallingEmoji);
                }

const swanPosition = parseInt(swan.style.left) + swan.offsetWidth / 2;
                const swanBottom = parseInt(swan.style.bottom);
                if (currentPosition >= window.innerHeight - swanBottom && swanPosition >= fallingEmoji.offsetLeft && swanPosition <= (fallingEmoji.offsetLeft + fallingEmoji.offsetWidth)) {
                    clearInterval(moveInterval);
                    gameContainer.removeChild(fallingEmoji);
                    score++;
                    scoreElement.textContent = "Score: " + score;
                }
            }, 10);
        }

let gameInterval;
        function startGame() {
            score = 0;
            scoreElement.textContent = "Score: " + score;
            gameInterval = setInterval(createFallingEmoji, 1000);
        }

function endGame() {
            clearInterval(gameInterval);
            const gameOverMessage = document.createElement("div");
            gameOverMessage.style.position = "absolute";
            gameOverMessage.style.top = "50%";
            gameOverMessage.style.left = "50%";
            gameOverMessage.style.transform = "translate(-50%, -50%)";
            gameOverMessage.style.fontSize = "32px";
            gameOverMessage.textContent = "Game Over";
            gameContainer.appendChild(gameOverMessage);
        }

startGame();

let initialX;
        gameContainer.addEventListener("touchstart", (event) => {
            initialX = event.touches[0].clientX;
        });

gameContainer.addEventListener("touchmove", (event) => {
            event.preventDefault();
            const currentX = event.touches[0].clientX;
            const deltaX = currentX - initialX;

let newSwanPosition = parseInt(swan.style.left) + deltaX;
            const swanWidth = swan.offsetWidth;
            const gameWidth = gameContainer.offsetWidth;

if (newSwanPosition < 0) {
                newSwanPosition = 0;
            } else if (newSwanPosition + swanWidth > gameWidth) {
                newSwanPosition = gameWidth - swanWidth;
            }

swan.style.left = newSwanPosition + "px";
            initialX = currentX;
        });

gameContainer.addEventListener("touchend", (event) => {
            if (score < 0) {
                endGame();
            }
        });
    </script>
</body>
</html>
```