AI game creator

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

No:40184

←

Prev Next

→

Generative Art
Developer User18010｜Date and time 24/2/1 15:30:15
Build time 10.143 sec｜Game capacity 2.401KB｜

Script

// HTML file - game.html

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

// HTML file - game.html

<html>
<head>
    <title>Generative Art Game</title>
    <style>
        body {
            background-color: #F9F9F9;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            font-family: Arial, sans-serif;
        }

#canvas {
            width: 80%;
            height: 80%;
            border: 1px solid #CCC;
            background-color: #FFF;
        }

#startButton {
            margin-top: 20px;
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <button id="startButton">Start Game</button>

const startGame = () => {
                intervalId = setInterval(generateArt, 1000); // Generating art every 1 second
                document.getElementById("startButton").disabled = true;
            };

const stopGame = () => {
                clearInterval(intervalId);
                document.getElementById("startButton").disabled = false;
            };

const generateArt = () => {
                context.clearRect(0, 0, canvas.width, canvas.height);

// Generate random pictograms
                const pictograms = [
                    "🌼", "🌈", "🦄", "🌺", "🎨", "🌙", "🌟", "🌸", "🐦", "🎈", "🌞", "⭐️"
                ];

for (let i = 0; i < 10; i++) {
                    const x = Math.random() * canvas.width;
                    const y = Math.random() * canvas.height;
                    const pictogram = pictograms[Math.floor(Math.random() * pictograms.length)];
                    const size = Math.random() * 50 + 10;

context.font = `${size}px Arial`;
                    context.fillText(pictogram, x, y);
                }
            };

document.getElementById("startButton").addEventListener("click", startGame);
            canvas.addEventListener("click", stopGame);
        };
    </script>
</body>
</html>