AI game creator

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

No:25677

←

Prev Next

→

Generative Art
Developer User12612｜Date and time 23/11/23 20:59:58
Build time 66.209 sec｜Game capacity 2.549KB｜

Script

Sure! Here's an example of a simple generative art game implemented as a single HTML file using JavaScript. The game is played by tapping the screen on a smartphone. Please note that this is just a basic example and can be further expanded and customized based on your requirements.

In this game, pictograms are randomly generated on the canvas whenever the screen is tapped. Each pictogram is drawn with a random position and color. You can customize the list of available pictograms by modifying the `pictograms` array. Please keep in mind that generative art can involve complex visual algorithms, so you can further enhance this example by exploring different patterns, animations, or interactive elements based on your creativity and programming skills.

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

```html
<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        margin: 0;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <canvas id="gameCanvas"></canvas>

// Create an array of pictograms
      const pictograms = [
        '🌼', '🌈', '🌸', '🎈', '🌟', '🍦', '🐠', '🌻', '🍄', '🍕'
      ];

// Generate a random color
      function randomColor() {
        return '#' + Math.floor(Math.random() * 16777215).toString(16);
      }

// Generate random x and y coordinates
      function randomPosition() {
        const x = Math.random() * canvas.width;
        const y = Math.random() * canvas.height;
        return { x, y };
      }

// Draw a random pictogram at a random position with a random color
      function drawPictogram() {
        const pictogram = pictograms[Math.floor(Math.random() * pictograms.length)];
        const { x, y } = randomPosition();
        const color = randomColor();

context.font = '48px Arial';
        context.fillStyle = color;
        context.fillText(pictogram, x, y);
      }

// Redraw the canvas and generate a new pictogram on tap
      function onTap(event) {
        event.preventDefault();
        drawPictogram();
      }

// Start the game
      function startGame() {
        canvas.addEventListener('touchstart', onTap);
        canvas.addEventListener('mousedown', onTap);
        drawPictogram();
      }

// Call the startGame function
      startGame();
    </script>
  </body>
</html>
```

Please keep in mind that generative art can involve complex visual algorithms, so you can further enhance this example by exploring different patterns, animations, or interactive elements based on your creativity and programming skills.