AI game creator

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

No:42676

104

←

Prev Next

→

Generative Art
Developer User18878｜Date and time 24/2/12 16:59:45
Build time 10.345 sec｜Game capacity 3.451KB｜

Script

Sure! Here's a simple generative art game implemented as a single HTML file:

This generative art game will continuously generate and display random shapes on the canvas. Each shape is randomly sized, positioned, colored, and with a random shape (circle, rectangle, or triangle). The canvas will refresh every 2 seconds to generate new art. You can enjoy the game by opening this HTML file on a smartphone browser and watch the generative art evolve over time!

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

Sure! Here's a simple generative art game implemented as a single HTML file:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Generative Art Game</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #f5f5f5;
        }

canvas {
            display: block;
        }
    </style>
</head>
<body>
<canvas id="canvas"></canvas>

// Set canvas size to fit the screen
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

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

// Generate random position
    function generateRandomPosition() {
        const x = Math.random() * canvas.width;
        const y = Math.random() * canvas.height;
        return { x, y };
    }

// Generate random size
    function generateRandomSize() {
        return Math.random() * 50 + 10; // Range: 10-60
    }

// Generate random shape
    function generateRandomShape() {
        const shapes = ["circle", "rectangle", "triangle"];
        return shapes[Math.floor(Math.random() * shapes.length)];
    }

// Draw a shape
    function drawShape(shape, position, size, color) {
        ctx.fillStyle = color;

switch (shape) {
            case "circle":
                ctx.beginPath();
                ctx.arc(position.x, position.y, size, 0, 2 * Math.PI);
                ctx.closePath();
                ctx.fill();
                break;
            case "rectangle":
                ctx.fillRect(position.x, position.y, size, size);
                break;
            case "triangle":
                ctx.beginPath();
                ctx.moveTo(position.x, position.y);
                ctx.lineTo(position.x + size, position.y);
                ctx.lineTo(position.x + size / 2, position.y + size);
                ctx.closePath();
                ctx.fill();
                break;
        }
    }

// Generate and draw random shapes on the canvas
    function generateArt() {
        ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear canvas

const numShapes = Math.floor(Math.random() * 20) + 10; // Range: 10-30

for (let i = 0; i < numShapes; i++) {
            const shape = generateRandomShape();
            const position = generateRandomPosition();
            const size = generateRandomSize();
            const color = generateRandomColor();

drawShape(shape, position, size, color);
        }
    }

// Start the game
    setInterval(generateArt, 2000); // Generate new art every 2 seconds
</script>
</body>
</html>
```

You can enjoy the game by opening this HTML file on a smartphone browser and watch the generative art evolve over time!