Generative Art's game | AI game creator

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

No:33549

70

Generative Art
Developer User15812｜Date and time 24/1/4 23:58:48
Build time 25.018 sec｜Game capacity 3.005KB｜

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

In this game, the canvas element represents the game area. Random shapes (circles) of different sizes and colors are drawn at random positions on the canvas every second. When the user touches any of the shapes, it disappears. The user has to keep touching the shapes as they appear to clear them from the canvas.

→ 　

0　

0　

[PR]現在のゲームギフトランキング

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

(C)2023 HisashiApp

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

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

<script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        
        // Initialize random colors
        const colors = ['#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#FF00FF', '#00FFFF'];
        
        // Function to generate random integer
        function getRandomInt(min, max) {
            return Math.floor(Math.random() * (max - min + 1) + min);
        }
        
        // Function to draw a random shape at a random position
        function drawRandomShape() {
            const x = getRandomInt(0, canvas.width);
            const y = getRandomInt(0, canvas.height);
            const size = getRandomInt(10, 50);
            const color = colors[getRandomInt(0, colors.length - 1)];
            
            ctx.fillStyle = color;
            ctx.beginPath();
            ctx.arc(x, y, size, 0, Math.PI * 2, false);
            ctx.closePath();
            ctx.fill();
        }
        
        // Function to handle touch events on the canvas
        function handleTouch(e) {
            e.preventDefault();
            
            // Get the touch position
            const touch = e.touches[0];
            const rect = canvas.getBoundingClientRect();
            const x = touch.clientX - rect.left;
            const y = touch.clientY - rect.top;
            
            // Check if the touch position is inside any of the existing shapes
            for (let i = 0; i < canvas.width; i++) {
                for (let j = 0; j < canvas.height; j++) {
                    const pixelData = ctx.getImageData(i, j, 1, 1).data;
                    if (pixelData[3] === 255 && Math.abs(x - i) <= 5 && Math.abs(y - j) <= 5) {
                        ctx.clearRect(0, 0, canvas.width, canvas.height);
                        return;
                    }
                }
            }
        }
        
        // Start the game by drawing initial shapes
        function startGame() {
            setInterval(drawRandomShape, 1000);
        }
        
        // Event listeners for touchstart and touchend events
        canvas.addEventListener('touchstart', handleTouch);
        canvas.addEventListener('touchend', handleTouch);
        
        // Start the game
        startGame();
    </script>
</body>
</html>
```

In this game, the canvas element represents the game area. Random shapes (circles) of different sizes and colors are drawn at random positions on the canvas every second. When the user touches any of the shapes, it disappears. The user has to keep touching the shapes as they appear to clear them from the canvas.