AI game creator

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

No:19835

104

←

Prev Next

→

Generative Art
Developer User8829｜Date and time 23/10/7 3:58:56
Build time 15.023 sec｜Game capacity 2.237KB｜

Script

Sure! Here's an example of generative art implemented as a game in a single HTML file using JavaScript:

This code sets up a canvas where pictograms are randomly positioned. When you click on a pictogram, its corresponding symbol is logged to the console. You can replace the pictograms array with your own set of symbols.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's an example of generative art implemented as a game in a single HTML file using JavaScript:

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

// Pictograms for the game
    var pictograms = [
      "🌼", "🌈", "🌺", "🌵", "🍄", "🍓", "🐞", "🦋"
    ];

// Generate random positions for the pictograms
    function generatePictogramPositions(count) {
      var positions = [];
      for (var i = 0; i < count; i++) {
        var x = Math.random() * canvas.width;
        var y = Math.random() * canvas.height;
        positions.push({ x, y });
      }
      return positions;
    }

// Draw the pictograms on the canvas
    function drawPictograms() {
      var positions = generatePictogramPositions(pictograms.length);
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.font = "30px Arial";

for (var i = 0; i < pictograms.length; i++) {
        ctx.fillText(pictograms[i], positions[i].x, positions[i].y);
      }
    }

// Event listener for canvas click
    canvas.addEventListener("click", function(event) {
      var rect = canvas.getBoundingClientRect();
      var clickX = event.clientX - rect.left;
      var clickY = event.clientY - rect.top;

for (var i = 0; i < pictograms.length; i++) {
        var pictogramX = positions[i].x;
        var pictogramY = positions[i].y;

if (
          clickX >= pictogramX &&
          clickX <= pictogramX + 30 &&
          clickY >= pictogramY - 30 &&
          clickY <= pictogramY
        ) {
          // Pictogram clicked!
          console.log("Clicked on: " + pictograms[i]);
          break;
        }
      }
    });

// Start the game
    drawPictograms();
  </script>
</body>
</html>
```