AI game creator

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

No:40776

←

Prev Next

→

Generative Art
Developer User18254｜Date and time 24/2/4 4:01:24
Build time 7.93 sec｜Game capacity 2.342KB｜

Script

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

This code creates a canvas element on the page and uses JavaScript to draw generative art. The `drawGenerativeArt` function generates random shapes with random colors and sizes, and the `updateGenerativeArt` function continuously updates the canvas every 2 seconds to create an animated generative art effect. You can resize the canvas on your smartphone and see the generative art react to the new size.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

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

```html
<!DOCTYPE html>
<html>
<head>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
<canvas id="gameCanvas"></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;
    }

// Draw generative art on the canvas
    function drawGenerativeArt() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        const numShapes = Math.floor(Math.random() * 10) + 1;

for (let i = 0; i < numShapes; i++) {
            const shapeType = Math.floor(Math.random() * 2);
            const shapeSize = Math.floor(Math.random() * 100) + 50;
            const posX = Math.random() * (canvas.width - shapeSize);
            const posY = Math.random() * (canvas.height - shapeSize);

if (shapeType === 0) {
                ctx.fillStyle = getRandomColor();
                ctx.fillRect(posX, posY, shapeSize, shapeSize);
            } else {
                ctx.strokeStyle = getRandomColor();
                ctx.lineWidth = 5;
                ctx.strokeRect(posX, posY, shapeSize, shapeSize);
            }
        }
    }

// Redraw the generative art on canvas
    function updateGenerativeArt() {
        drawGenerativeArt();
        // Set timeout for continuous generative art updates
        setTimeout(updateGenerativeArt, 2000);
    }

// Start the generative art game
    updateGenerativeArt();
</script>
</body>
</html>
```