AI game creator

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

No:24844

←

Prev Next

→

Generative Art
Developer User11928｜Date and time 23/11/13 1:46:43
Build time 66.634 sec｜Game capacity 3.182KB｜

Script

Sure! Here's an example of a generative art game implemented as a single HTML file, enclosed in script tags. The game can be played on a smartphone and incorporates pictograms for a visual experience:

In this example, we create a canvas element and draw pictograms at random positions on the canvas. The positions are generated using the `generateRandomPositions` function. The pictograms are represented by emoji symbols from an array called `pictograms`. We also handle touch or click events on the canvas using the `handleEvent` function. When a pictogram is touched or clicked, the function logs a message to the console. You can modify this function to perform any desired action when a pictogram is interacted with. The initial positions are generated and the pictograms are drawn on the canvas. Event listeners are attached to the canvas to respond to touch or click events. Remember to save this code as an HTML file with a .html extension and open it in a web browser to play the game.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    canvas {
      display: block;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas"></canvas>

// Set canvas size
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

// Store pictograms
    const pictograms = [
      "🌻",
      "🌈",
      "🌊",
      "🌳",
      "🌸"
      // Add more pictograms as desired
    ];

// Generate random positions for pictograms
    const generateRandomPositions = () => {
      const positions = [];
      for (let i = 0; i < pictograms.length; i++) {
        const x = Math.random() * canvas.width;
        const y = Math.random() * canvas.height;
        positions.push({ x, y });
      }
      return positions;
    };

// Draw pictograms on the canvas
    const drawPictograms = () => {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      for (let i = 0; i < positions.length; i++) {
        ctx.fillText(pictograms[i], positions[i].x, positions[i].y);
      }
    };

// Handle touch or click events
    const handleEvent = (event) => {
      const touchX = event.targetTouches ? event.targetTouches[0].clientX : event.clientX;
      const touchY = event.targetTouches ? event.targetTouches[0].clientY : event.clientY;

for (let i = 0; i < pictograms.length; i++) {
        const pictoX = positions[i].x;
        const pictoY = positions[i].y;

// Check if touch or click is within a pictogram
        if (Math.abs(touchX - pictoX) < 20 && Math.abs(touchY - pictoY) < 20) {
          // Do something when a pictogram is touched or clicked
          console.log("Pictogram number " + i + " clicked!");
        }
      }
    };

// Generate initial positions
    let positions = generateRandomPositions();

// Draw the initial pictograms
    drawPictograms();

// Attach touch and click event listeners to the canvas
    canvas.addEventListener("touchstart", handleEvent);
    canvas.addEventListener("mousedown", handleEvent);
  </script>
</body>
</html>
```

We also handle touch or click events on the canvas using the `handleEvent` function. When a pictogram is touched or clicked, the function logs a message to the console. You can modify this function to perform any desired action when a pictogram is interacted with.

The initial positions are generated and the pictograms are drawn on the canvas. Event listeners are attached to the canvas to respond to touch or click events.

Remember to save this code as an HTML file with a .html extension and open it in a web browser to play the game.