AI game creator

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

No:37215

←

Prev Next

→

Generative Art
Developer User17014｜Date and time 24/1/20 18:29:35
Build time 7.614 sec｜Game capacity 2.707KB｜

Script

Sure, here is an example of a simple generative art game implemented as a single HTML file using JavaScript and enclosed in script tags:

This generative art game allows you to click anywhere on the canvas, which will draw a randomly colored circle at that position. Every click generates a unique circle with a randomly generated color. You can continuously create beautiful generative art by simply clicking on the canvas. To reset the canvas, you can refresh the page.

←

Prev　Next

→ 　

Back　

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

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

Sure, here is an example of a simple generative art game implemented as a single HTML file using JavaScript and enclosed in script tags:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Generative Art Game</title>
    <style>
        canvas {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>

// Generate random color
            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 position
            function getRandomPosition() {
                const x = Math.random() * canvas.width;
                const y = Math.random() * canvas.height;
                return { x, y };
            }

// Draw a circle
            function drawCircle(position, color) {
                context.beginPath();
                context.arc(position.x, position.y, 20, 0, 2 * Math.PI);
                context.fillStyle = color;
                context.fill();
                context.closePath();
            }

// Handle mouse click event
            function handleClick(event) {
                const position = { x: event.clientX - canvas.offsetLeft, y: event.clientY - canvas.offsetTop };
                const color = getRandomColor();
                drawCircle(position, color);
            }

// Clear the canvas
            function clearCanvas() {
                context.clearRect(0, 0, canvas.width, canvas.height);
            }

// Start the game
            function startGame() {
                canvas.addEventListener('click', handleClick);
            }

// Reset the game
            function resetGame() {
                canvas.removeEventListener('click', handleClick);
                clearCanvas();
                startGame();
            }

startGame();
        }

initGame();
    </script>
</body>
</html>
```