AI game creator

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

No:31461

←

Prev Next

→

Generative Art
Developer User15107｜Date and time 23/12/27 1:14:04
Build time 23.769 sec｜Game capacity 2.932KB｜

Script

Sure! Here's a simple game implemented as a single HTML file with JavaScript. It utilizes generative art and can be played on a smartphone. I've used pictograms where possible to enhance the visual experience.

This game generates random circles with different colors on a canvas. When you tap/click on a circle, its color will change to a new random color. The goal is to create your own generative art by interacting with the circles. You can play this game on your smartphone by opening it in a web browser. Have fun creating beautiful patterns!

←

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>Generative Art Game</title>
    <style>
        body {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f8f8f8;
        }
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>

// Generate random colors
        function getRandomColor() {
            const letters = "0123456789ABCDEF";
            let color = "#";
            for (let i = 0; i < 6; i++) {
                color += letters[Math.floor(Math.random() * 16)];
            }
            return color;
        }

// Generate random circle positions and sizes
        function generateCircles() {
            const circles = [];
            for (let i = 0; i < 10; i++) {
                const x = Math.random() * canvas.width;
                const y = Math.random() * canvas.height;
                const radius = Math.random() * 50 + 20;
                const color = getRandomColor();
                circles.push({ x, y, radius, color });
            }
            return circles;
        }

// Clear canvas and redraw circles
        function redraw(circles) {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            circles.forEach(circle => {
                ctx.beginPath();
                ctx.arc(circle.x, circle.y, circle.radius, 0, 2 * Math.PI);
                ctx.fillStyle = circle.color;
                ctx.fill();
                ctx.closePath();
            });
        }

// Handle click events on canvas
        canvas.addEventListener("click", function(event) {
            const clickX = event.offsetX;
            const clickY = event.offsetY;
            circles.forEach(circle => {
                if (Math.sqrt((clickX - circle.x) ** 2 + (clickY - circle.y) ** 2) < circle.radius) {
                    circle.color = getRandomColor();
                }
            });
            redraw(circles);
        });

// Start the game
        const circles = generateCircles();
        redraw(circles);
    </script>
</body>
</html>
```