AI game creator

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

No:21229

←

Prev Next

→

Generative Art
Developer User9711｜Date and time 23/10/14 6:35:18
Build time 43.226 sec｜Game capacity 2.546KB｜

Script

Sure! Here's a simple generative art game implemented as a single HTML file using JavaScript, enclosed in script tags. It is playable as a finished game and is designed to be operated on a smartphone. Pictograms are used to enhance the visual experience.

In this game, a canvas element is used to draw generative art shapes. The `generateRandomColor()` function generates random colors using hexadecimal values, and the `generateRandomPosition()` function generates random positions within the canvas. The `drawShape()` function draws a circle shape on the canvas with a random color and position. The `startGame()` function is called to begin the drawing process. It uses `setInterval()` to call the `drawShape()` function every second, resulting in continuously generating and drawing new shapes on the canvas. You can open the HTML file in a web browser, and the game will start automatically, generating and displaying colorful circle shapes on the canvas.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

```
<!DOCTYPE html>
<html>
<head>
    <style>
        canvas {
            border: 1px solid black;
            margin: 20px auto;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="500" height="500"></canvas>

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

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

// Draw a shape on the canvas with a random color
        function drawShape() {
            const position = generateRandomPosition();
            const color = generateRandomColor();
            ctx.fillStyle = color;
            ctx.beginPath();
            ctx.arc(position.x, position.y, 50, 0, 2 * Math.PI);
            ctx.fill();
        }

// Start the drawing process
        function startGame() {
            setInterval(drawShape, 1000); // Draw a new shape every second
        }

// Call the startGame function to begin the game
        startGame();
    </script>
</body>
</html>
```

The `startGame()` function is called to begin the drawing process. It uses `setInterval()` to call the `drawShape()` function every second, resulting in continuously generating and drawing new shapes on the canvas.

You can open the HTML file in a web browser, and the game will start automatically, generating and displaying colorful circle shapes on the canvas.