AI game creator

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

No:15205

←

Prev Next

→

Generative Art
Developer User6577｜Date and time 23/9/7 11:06:13
Build time 24.956 sec｜Game capacity 3.183KB｜

Script

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

In this game, pictograms of random colors are generated in random positions on a canvas. The player's task is to touch (click) on the pictograms to remove them. The game continuously updates the canvas to show the current state. Please note that this is a very basic example of a generative art game, but it can give you a starting point for building more complex and visually appealing games.

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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 using JavaScript:

```html
<!DOCTYPE html>
<html>
  <head>
    <style>
      canvas {
        border: 1px solid gray;
        display: block;
        margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas" width="400" height="400"></canvas>

// Generate random positions
      function getRandomPosition(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
      }

// Create the game
      function createGame() {
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");

// Store the current positions of the pictograms
        var pictogramPositions = [];

// Generate initial pictograms
        function generateInitialPictograms() {
          for (var i = 0; i < 10; i++) {
            var x = getRandomPosition(0, canvas.width);
            var y = getRandomPosition(0, canvas.height);
            var color = getRandomColor();

pictogramPositions.push({ x: x, y: y, color: color });
          }
        }

// Update the game state
        function updateGameState() {
          ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw pictograms
          pictogramPositions.forEach(function (pictogram) {
            ctx.fillStyle = pictogram.color;
            ctx.fillRect(pictogram.x, pictogram.y, 50, 50);
          });
        }

// Handle touch events
        function handleTouch(event) {
          var touchX = event.touches[0].clientX;
          var touchY = event.touches[0].clientY;

// Check if any pictogram is touched
          pictogramPositions.forEach(function (pictogram, index) {
            if (
              touchX >= pictogram.x &&
              touchX <= pictogram.x + 50 &&
              touchY >= pictogram.y &&
              touchY <= pictogram.y + 50
            ) {
              // Remove the touched pictogram
              pictogramPositions.splice(index, 1);
            }
          });

// Update the game state
          updateGameState();
        }

// Attach touch event listener
        canvas.addEventListener("touchstart", handleTouch);

// Generate initial pictograms
        generateInitialPictograms();

// Start the game loop
        setInterval(updateGameState, 100);
      }

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

Please note that this is a very basic example of a generative art game, but it can give you a starting point for building more complex and visually appealing games.