AI game creator

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

No:26267

←

Prev Next

→

Generative Art
Developer User12961｜Date and time 23/11/28 10:18:57
Build time 34.448 sec｜Game capacity 3.093KB｜

Script

Sure! Here's an example of a simple generative art game implemented as a single HTML file using JavaScript. This game allows you to create unique artworks by clicking on the screen. It uses pictograms as the artwork elements. Note: The following code snippet needs to be saved with the .html extension and opened in a web browser to play the game.

To play the game, open the saved HTML file in a web browser on your smartphone. Whenever you tap on the screen, a random pictogram will appear at the corresponding location, creating an artwork. You can keep tapping to create more pictograms. The artworks will be displayed on the screen, and you can restart the game (clear the artwork) by simply refreshing the page.

←

Prev　Next

→ 　

Back　

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

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

Note: The following code snippet needs to be saved with the .html extension and opened in a web browser to play the game.

```html
<!DOCTYPE html>
<html>
<head>
    <title>Generative Art Game</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <script>
        const canvasSize = { x: window.innerWidth, y: window.innerHeight };
        const pictograms = ['🌼', '🌈', '🐠', '🌟', '🍉', '🌻', '🍄', '🍦'];
        const artworkData = [];

function getRandomPictogram() {
            const randomIndex = Math.floor(Math.random() * pictograms.length);
            return pictograms[randomIndex];
        }

function createArtwork(e) {
            const x = e.clientX;
            const y = e.clientY;
            const pictogram = getRandomPictogram();

artworkData.push({ x, y, pictogram });
            drawArtwork();
        }

function drawArtwork() {
            const canvas = document.createElement('div');
            canvas.classList.add('canvas');

for (let i = 0; i < artworkData.length; i++) {
                const { x, y, pictogram } = artworkData[i];

const element = document.createElement('div');
                element.classList.add('pictogram');
                element.textContent = pictogram;
                element.style.left = x + 'px';
                element.style.top = y + 'px';

canvas.appendChild(element);
            }

document.body.appendChild(canvas);
        }

function clearArtwork() {
            artworkData.length = 0;
            document.querySelectorAll('.canvas').forEach((canvas) => {
                canvas.remove();
            });
        }

window.addEventListener('click', createArtwork);
        window.addEventListener('resize', () => { canvasSize.x = window.innerWidth; canvasSize.y = window.innerHeight; clearArtwork(); });

// Styling
        const style = document.createElement('style');
        style.textContent = `
            .canvas {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }
            
            .pictogram {
                position: absolute;
                font-size: 24px;
            }
        `;
        document.head.appendChild(style);
    </script>
</body>
</html>
```

To play the game, open the saved HTML file in a web browser on your smartphone. Whenever you tap on the screen, a random pictogram will appear at the corresponding location, creating an artwork. You can keep tapping to create more pictograms. The artworks will be displayed on the screen, and you can restart the game (clear the artwork) by simply refreshing the page.