Generative Art's game | AI game creator

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

No:10974

98

Generative Art
Developer User4492｜Date and time 23/8/6 9:50:42
Build time 22.087 sec｜Game capacity 3.04KB｜

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

In this game, different pictograms (emoji-like images) will move around the screen, bouncing off the edges of the canvas. The canvas size is set to fit the screen width and height dynamically. Each pictogram has its own properties such as image, initial position (x, y), size, and velocity (dx, dy). The `updatePictograms()` function is responsible for updating the position of each pictogram, making them bounce, and drawing them on the canvas. The `clearRect()` method is used to clear the canvas on each frame before redrawing the pictograms. The `requestAnimationFrame()` method is used to continuously call the `updatePictograms()` function on every frame, resulting in smooth animation. The game starts automatically by calling `updatePictograms()` for the first time. You can add more pictogram objects or customize the existing ones according to your preference. Feel free to enhance the game further with additional features or interactions as needed. Enjoy playing with generative art!

→ 　

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 and enclosed in script tags:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Generative Art Game</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: black;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas"></canvas>

<script>
    const canvas = document.getElementById('gameCanvas');
    const context = canvas.getContext('2d');

// Set canvas size to fit the screen width and height
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

// Create pictogram objects with their properties
    const pictograms = [
      { image: '🌼', x: 100, y: 100, size: 50, dx: 1, dy: 1 },
      { image: '🌸', x: 300, y: 200, size: 80, dx: 1, dy: -1 },
      { image: '🌙', x: 500, y: 300, size: 100, dx: -1, dy: 1 },
      { image: '🌞', x: 700, y: 400, size: 70, dx: -1, dy: -1 }
    ];

// Function to update the position of pictograms and draw them on canvas
    function updatePictograms() {
      context.clearRect(0, 0, canvas.width, canvas.height);

pictograms.forEach((pictogram) => {
        // Update pictogram position
        pictogram.x += pictogram.dx;
        pictogram.y += pictogram.dy;

// Make the pictograms bounce off the canvas edges
        if (pictogram.x <= 0 || pictogram.x + pictogram.size >= canvas.width) {
          pictogram.dx *= -1;
        }
        if (pictogram.y <= 0 || pictogram.y + pictogram.size >= canvas.height) {
          pictogram.dy *= -1;
        }

// Draw pictogram on canvas
        context.font = `${pictogram.size}px Arial`;
        context.fillText(pictogram.image, pictogram.x, pictogram.y);
      });

// Call the updatePictograms function on every frame
      requestAnimationFrame(updatePictograms);
    }

// Start the game by calling the updatePictograms function for the first time
    updatePictograms();
  </script>
</body>
</html>
```

In this game, different pictograms (emoji-like images) will move around the screen, bouncing off the edges of the canvas. The canvas size is set to fit the screen width and height dynamically. Each pictogram has its own properties such as image, initial position (x, y), size, and velocity (dx, dy).

The `updatePictograms()` function is responsible for updating the position of each pictogram, making them bounce, and drawing them on the canvas. The `clearRect()` method is used to clear the canvas on each frame before redrawing the pictograms.

The `requestAnimationFrame()` method is used to continuously call the `updatePictograms()` function on every frame, resulting in smooth animation. The game starts automatically by calling `updatePictograms()` for the first time.

You can add more pictogram objects or customize the existing ones according to your preference. Feel free to enhance the game further with additional features or interactions as needed. Enjoy playing with generative art!