Generative Art's game | AI game creator

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

No:24148

75

Generative Art
Developer User11326｜Date and time 23/11/6 5:10:56
Build time 81.949 sec｜Game capacity 4.726KB｜

Sure! Here's a simple generative art game implemented as a single HTML file using JavaScript and enclosed in script tags. The game is designed for smartphone operation and uses pictograms.

In this game, you'll see various pictograms randomly generated on the canvas. You can touch the pictograms on your smartphone screen to remove them. New pictograms will be generated at random positions with new symbols and colors. The `generateRandomColor()` function generates a random hexadecimal color code, `generateRandomPosition()` function generates random positions for the pictograms, and `generatePictogram()` function selects a random pictogram. The canvas is set to match the screen size and the `drawPictograms()` function is responsible for drawing the pictograms on the canvas. The `onTouch()` function handles touch events on the canvas, checking if a pictogram is touched and removing it from the array. The canvas element is listening for touch events using the `addEventListener()` method, and the initial pictograms are drawn using the `drawPictograms()` function. I hope you enjoy playing this generative art game!

→ 　

0　

0　

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

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

(C)2023 HisashiApp

Sure! Here's a simple generative art game implemented as a single HTML file using JavaScript and enclosed in script tags. The game is designed for smartphone operation and uses pictograms.

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Generative Art Game</title>
    <style>
        canvas {
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas"></canvas>

<script>
        // Set up the canvas and get its 2D context
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');

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

// Generate random colors for the game
        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 for the pictograms
        function generateRandomPosition() {
            const x = Math.random() * canvas.width;
            const y = Math.random() * canvas.height;
            return { x, y };
        }

// Generate random pictograms
        function generatePictogram() {
            const pictograms = ['🌼', '🌈', '🌸', '🍀', '🌙'];
            const index = Math.floor(Math.random() * pictograms.length);
            return pictograms[index];
        }

// Generate the initial set of pictograms on the canvas
        let pictograms = [];
        for (let i = 0; i < 10; i++) {
            const x = Math.random() * canvas.width;
            const y = Math.random() * canvas.height;
            const symbol = generatePictogram();
            const color = generateRandomColor();
            pictograms.push({ x, y, symbol, color });
        }

// Draw the pictograms on the canvas
        function drawPictograms() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            pictograms.forEach(pictogram => {
                ctx.fillStyle = pictogram.color;
                ctx.font = '48px Arial';
                ctx.fillText(pictogram.symbol, pictogram.x, pictogram.y);
            });
        }

// Function to handle touch events on the canvas
        function onTouch(event) {
            const touchX = event.touches[0].clientX;
            const touchY = event.touches[0].clientY;

pictograms.forEach((pictogram, index) => {
                const centerX = pictogram.x + ctx.measureText(pictogram.symbol).width / 2;
                const centerY = pictogram.y;
                const distance = Math.sqrt((centerX - touchX) ** 2 + (centerY - touchY) ** 2);
                if (distance < 30) {
                    // Pictogram is touched, remove it from the array
                    pictograms.splice(index, 1);
                }
            });

// Generate new pictogram and add it to the array
            const newPosition = generateRandomPosition();
            const newSymbol = generatePictogram();
            const newColor = generateRandomColor();
            pictograms.push({ x: newPosition.x, y: newPosition.y, symbol: newSymbol, color: newColor });

// Redraw the canvas
            drawPictograms();
        }

// Event listener for touch events on the canvas
        canvas.addEventListener('touchstart', onTouch, false);

// Initial draw of the pictograms
        drawPictograms();
    </script>
</body>
</html>
```

In this game, you'll see various pictograms randomly generated on the canvas. You can touch the pictograms on your smartphone screen to remove them. New pictograms will be generated at random positions with new symbols and colors.

The `generateRandomColor()` function generates a random hexadecimal color code, `generateRandomPosition()` function generates random positions for the pictograms, and `generatePictogram()` function selects a random pictogram.

The canvas is set to match the screen size and the `drawPictograms()` function is responsible for drawing the pictograms on the canvas. The `onTouch()` function handles touch events on the canvas, checking if a pictogram is touched and removing it from the array.

The canvas element is listening for touch events using the `addEventListener()` method, and the initial pictograms are drawn using the `drawPictograms()` function.

I hope you enjoy playing this generative art game!