AI game creator

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

No:17231

119

←

Prev Next

→

Generative Art
Developer User7607｜Date and time 23/9/22 16:51:54
Build time 19.585 sec｜Game capacity 1.895KB｜

Script

Sure! Here's an example of a simple generative art game implemented as a single HTML file. The game is designed for smartphone operation and uses pictograms.

This game utilizes HTML canvas and JavaScript to create generative art. The script generates a random pictogram from the given pictograms array at the position of user clicks or touches on the canvas. The canvas is set to match the screen dimensions and it is styled to be centered with a light gray background. Feel free to modify the pictograms array or add more to suit your preferences.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's an example of a simple generative art game implemented as a single HTML file. The game is designed for smartphone operation and uses pictograms.

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background-color: #f9f9f9;
    }
    
    canvas {
      border: 1px solid #ccc;
    }
  </style>
</head>
<body>
  <canvas id="canvas"></canvas>

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

// Pictograms or colors to use for generative art
    const pictograms = ["🌼", "🌈", "⭐️", "🌺", "🌙"]; // Feel free to add or modify the pictograms

// Generate random art on click/touch
    function generateArt(event) {
      const x = event.clientX || event.touches[0].clientX;
      const y = event.clientY || event.touches[0].clientY;
      const randomPictogram = pictograms[Math.floor(Math.random() * pictograms.length)];

ctx.font = "48px Arial";
      ctx.fillStyle = "#000";
      ctx.fillText(randomPictogram, x, y);
    }

// Event listener for click/touch
    canvas.addEventListener("click", generateArt);
    canvas.addEventListener("touchstart", generateArt);
  </script>
</body>
</html>
```