AI game creator

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

No:21539

←

Prev Next

→

Generative Art
Developer User9866｜Date and time 23/10/16 4:05:07
Build time 57.58 sec｜Game capacity 2.578KB｜

Script

Sure, here's an example of a simple generative art game implemented as a single HTML file using JavaScript. The game will display randomly generated pictograms, and the player can interact with them by tapping on the screen. Each tap will generate a new pictogram at a random position.

When you open this HTML file in a smartphone browser, you'll see the canvas, and each tap on the screen will generate a random pictogram at a random position on the canvas. The game continuously generates new pictograms as you interact with it. Feel free to modify and enhance the code to fit your desired game mechanics and visual style.

←

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 black;
      background: #FFF;
    }
  </style>
</head>
<body>
  <canvas id="canvas"></canvas>

canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

// Array of available pictograms
    const pictograms = [
      "🌼", "🌈", "🐳", "🌺", "🌸", "🦄", "🍄", "🍦", "🍀", "🐾"
    ];

// Function to generate a random pictogram
    function generateRandomPictogram() {
      return pictograms[Math.floor(Math.random() * pictograms.length)];
    }

// Function to generate a random position
    function generateRandomPosition() {
      const x = Math.random() * (canvas.width - 100);
      const y = Math.random() * (canvas.height - 100);
      return { x, y };
    }

// Function to draw a pictogram at a given position
    function drawPictogram(text, x, y) {
      ctx.font = "48px Arial";
      ctx.fillText(text, x, y);
    }

// Event listener for taps on the canvas
    canvas.addEventListener("click", function(event) {
      const { clientX, clientY } = event;
      const rect = canvas.getBoundingClientRect();
      const x = clientX - rect.left;
      const y = clientY - rect.top;

// Generate a random pictogram and position
      const pictogram = generateRandomPictogram();
      const position = generateRandomPosition();

// Draw the pictogram at the tapped position
      drawPictogram(pictogram, position.x, position.y);
    });

// Start the game by drawing an initial pictogram
    const initialPictogram = generateRandomPictogram();
    const initialPosition = generateRandomPosition();
    drawPictogram(initialPictogram, initialPosition.x, initialPosition.y);
  </script>
</body>
</html>
```