AI game creator

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

No:24667

←

Prev Next

→

Generative Art
Developer User11766｜Date and time 23/11/11 3:26:34
Build time 74.23 sec｜Game capacity 3.02KB｜

Script

Sure! Here's an example of a simple generative art game implemented as a single HTML file using JavaScript:

In this game, a random circle is generated on the canvas with a random position, radius, and color. The player's goal is to touch/click on the circle to generate a new one. Every time the circle is touched, a new one with different properties is generated. Please note that this is just a simple example of a generative art game and can be further expanded and enhanced based on your specific requirements and game logic.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's an example of a simple generative art game implemented as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Generative Art Game</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>

// Initialize game variables
        let x = canvas.width / 2;
        let y = canvas.height / 2;
        let radius = 50;

// Function to 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;
        }

// Function to update the game state
        function update() {
            // Generate random position and radius
            const newX = Math.random() * canvas.width;
            const newY = Math.random() * canvas.height;
            const newRadius = Math.random() * 100 + 10;

// Generate random color
            const color = getRandomColor();

// Update game variables
            x = newX;
            y = newY;
            radius = newRadius;

// Draw the circle with the updated variables
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.beginPath();
            ctx.arc(x, y, radius, 0, 2 * Math.PI);
            ctx.fillStyle = color;
            ctx.fill();
        }

// Function to handle user touch/click events
        function onTouch(event) {
            const rect = canvas.getBoundingClientRect();
            const touchX = event.touches[0].clientX - rect.left;
            const touchY = event.touches[0].clientY - rect.top;

// Check if the touch event is inside the circle
            if (
                touchX >= x - radius &&
                touchX <= x + radius &&
                touchY >= y - radius &&
                touchY <= y + radius
            ) {
                update(); // If yes, update the game
            }
        }

// Add event listener for touch/click events
        canvas.addEventListener("touchstart", onTouch, false);

// Start the game by generating the initial circle
        update();
    </script>
</body>
</html>
```

Please note that this is just a simple example of a generative art game and can be further expanded and enhanced based on your specific requirements and game logic.