Generative Art's game | AI game creator

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

No:35199

44

Generative Art
Developer User16463｜Date and time 24/1/13 15:57:44
Build time 9.852 sec｜Game capacity 2.806KB｜

Sure! Here's an example of a simple generative art game implemented as a single HTML file using JavaScript. It utilizes pictograms and can be played on a smartphone.

Explanation: - The game canvas is represented by the `<canvas>` element with an ID of "gameCanvas". - In the JavaScript section, we initialize the canvas context (`ctx`) and define an array of pictograms to choose from. - The `generateRandomPictogram` function selects a random pictogram from the array. - The `renderRandomPictogram` function renders a random pictogram at a random position on the canvas using the `fillText` method. - The `clearCanvas` function clears the canvas and renders 10 new random pictograms. - The `handleTap` function handles tap/click events on the canvas. It adds a checkmark symbol "✅" at the position where the user tapped/clicked. - Finally, the game is started by calling `clearCanvas()` and attaching the `click` event listener to the canvas. This game generates beautiful generative art by displaying random pictograms on the canvas, and allows the player to interact with it by tapping/clicking to mark their favorite combinations.

→ 　

0　

0　

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

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

(C)2023 HisashiApp

Sure! Here's an example of a simple generative art game implemented as a single HTML file using JavaScript. It utilizes pictograms and can be played on a smartphone.

```html
<!DOCTYPE html>
<html>
<head>
  <title>Generative Art Game</title>
  <style>
    canvas {
      border: 1px solid black;
      display: block;
      margin: 20px auto;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="300" height="300"></canvas>

<script>
    // Initialize game canvas
    const canvas = document.getElementById("gameCanvas");
    const ctx = canvas.getContext("2d");

// Create an array of pictograms
    const pictograms = ["🌼", "🌸", "🌺", "🌻", "🌹", "🌷", "💐", "🌱"];

// Generate a random pictogram
    function generateRandomPictogram() {
      const randomIndex = Math.floor(Math.random() * pictograms.length);
      return pictograms[randomIndex];
    }

// Render a random pictogram on the canvas
    function renderRandomPictogram() {
      const x = Math.random() * canvas.width;
      const y = Math.random() * canvas.height;
      const pictogram = generateRandomPictogram();

ctx.font = "30px Arial";
      ctx.fillText(pictogram, x, y);
    }

// Clear the canvas and render new pictograms
    function clearCanvas() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

for (let i = 0; i < 10; i++) {
        renderRandomPictogram();
      }
    }

// Handle tap/click events on the canvas
    function handleTap(event) {
      const rect = canvas.getBoundingClientRect();
      const x = event.clientX - rect.left;
      const y = event.clientY - rect.top;

ctx.font = "30px Arial";
      ctx.fillText("✅", x, y);
    }

// Start the game
    clearCanvas();
    canvas.addEventListener("click", handleTap);

</script>
</body>
</html>
```

Explanation:
- The game canvas is represented by the `<canvas>` element with an ID of "gameCanvas".
- In the JavaScript section, we initialize the canvas context (`ctx`) and define an array of pictograms to choose from.
- The `generateRandomPictogram` function selects a random pictogram from the array.
- The `renderRandomPictogram` function renders a random pictogram at a random position on the canvas using the `fillText` method.
- The `clearCanvas` function clears the canvas and renders 10 new random pictograms.
- The `handleTap` function handles tap/click events on the canvas. It adds a checkmark symbol "✅" at the position where the user tapped/clicked.
- Finally, the game is started by calling `clearCanvas()` and attaching the `click` event listener to the canvas.

This game generates beautiful generative art by displaying random pictograms on the canvas, and allows the player to interact with it by tapping/clicking to mark their favorite combinations.