AI game creator

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

No:36231

←

Prev Next

→

🦢🎮🕹
Developer User16766｜Date and time 24/1/17 4:17:58
Build time 13.422 sec｜Game capacity 3.635KB｜

Script

Sure! Here's an example of a simple game implemented as a single HTML file using JavaScript and utilizing pictograms. The game involves controlling a swan (🦢) with a joystick to collect stars (✨).

🦢

🕹️

To play the game, simply save the above code as an HTML file (e.g., `game.html`) and open it on your smartphone using a web browser. You can control the swan's movements by tapping on the joystick pictogram, and your goal is to collect as many stars as possible by navigating the swan towards them (tap on the stars to collect them). Your score will be displayed in the browser's title bar. Have fun 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>Swan Game</title>
    <style>
        #game-container {
            position: relative;
            width: 400px;
            height: 400px;
            border: 1px solid black;
        }

#swan {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 30px;
        }

#stars {
            position: absolute;
        }

.star {
            font-size: 30px;
        }

#joystick {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 40px;
        }
    </style>
</head>
<body>
    <div id="game-container">
        <div id="swan">🦢</div>
        <div id="stars"></div>
        <div id="joystick">🕹️</div>
    </div>

function getRandomPosition() {
            let x = Math.floor(Math.random() * 360) + 20;
            let y = Math.floor(Math.random() * 360) + 20;
            return { x, y };
        }

function createStar() {
            let star = document.createElement('div');
            star.textContent = '✨';
            star.className = 'star';
            stars.appendChild(star);

let position = getRandomPosition();
            star.style.top = position.y + 'px';
            star.style.left = position.x + 'px';

star.addEventListener('click', () => {
                score++;
                star.remove();
            });
        }

function updateScore() {
            document.title = 'Score: ' + score;
        }

function startGame() {
            setInterval(createStar, 2000);
            joystick.addEventListener('click', moveSwan);
        }

function moveSwan(event) {
            let target = event.target;

if (target.classList.contains('joystick-direction')) {
                let direction = target.dataset.direction;
                let currentPosition = swan.getBoundingClientRect();

switch (direction) {
                    case 'up':
                        swan.style.top = (currentPosition.top - 10) + 'px';
                        break;
                    case 'down':
                        swan.style.top = (currentPosition.top + 10) + 'px';
                        break;
                    case 'left':
                        swan.style.left = (currentPosition.left - 10) + 'px';
                        break;
                    case 'right':
                        swan.style.left = (currentPosition.left + 10) + 'px';
                        break;
                }
            }
        }

startGame();
    </script>
</body>
</html>
```