AI game creator

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

No:42547

←

Prev Next

→

Generative Art
Developer User18906｜Date and time 24/2/12 1:47:23
Build time 11.565 sec｜Game capacity 3.582KB｜

Script

Sure! Here's an example of a simple generative art game written in a single HTML file, utilizing JavaScript and enclosed within script tags. The game involves clicking on pictograms to reveal a randomly generated artwork. The code includes a simple scoring system to track the player's progress. Enjoy!

In this simple generative art game, a canvas element is used to display the artwork. Clicking on the canvas triggers an event listener, which checks if the click occurred on a fictitious pictogram (replace the `isClickedOnPictogram` function logic with your own pictogram detection logic). If the click is on the pictogram, the player's score is incremented, and a new artwork is generated using random shapes and colors. Note: Make sure to replace the `pictogramImages` array with actual pictogram image URLs for mobile display.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームアプリランキング

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

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

const pictogramImages = ['pictogram1.png', 'pictogram2.png', 'pictogram3.png']; // Replace with your pictogram images

let score = 0;

// Generate random artwork
        function generateArtwork() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            // Draw background
            ctx.fillStyle = '#FFF';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            
            // Draw random shapes
            for (let i = 0; i < 10; i++) {
                const x = Math.random() * canvas.width;
                const y = Math.random() * canvas.height;
                const size = Math.random() * 100;
                
                ctx.beginPath();
                ctx.arc(x, y, size, 0, Math.PI * 2);
                ctx.fillStyle = getRandomColor();
                ctx.fill();
            }
        }

// 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;
        }

// Handle click on canvas
        canvas.addEventListener('click', (e) => {
            const rect = canvas.getBoundingClientRect();
            const x = e.clientX - rect.left;
            const y = e.clientY - rect.top;

if (isClickedOnPictogram(x, y)) {
                score++;
                generateArtwork();
            }
        });

// Check if click is on pictogram
        function isClickedOnPictogram(x, y) {
            // Simulated pictogram position
            const pictogramX = Math.random() * canvas.width;
            const pictogramY = Math.random() * canvas.height;
            const pictogramSize = 50;

if (
                x > pictogramX &&
                x < pictogramX + pictogramSize &&
                y > pictogramY &&
                y < pictogramY + pictogramSize
            ) {
                return true;
            }

return false;
        }

// Initialize game
        function startGame() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            
            generateArtwork();
        }

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

Note: Make sure to replace the `pictogramImages` array with actual pictogram image URLs for mobile display.