Make a animation builder's game

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

No:22249

118

←

Prev Next

→

Make a animation builder
Developer User7632｜Date and time 23/10/21 21:15:34
Build time 53.143 sec｜Game capacity 3.015KB｜

Script

Sure! Here's an example of a simple animation builder game implemented in a single HTML file, including JavaScript code enclosed in script tags. The game allows you to create animations using pictograms and can be played directly in a web browser, including on smartphones.

To use this game, you would need to provide your own pictogram images (represented here as `emozi_all/game.png`, `emozi_hamuster.png`, `emozi_dog.png`). The images should be placed in the same directory as the HTML file. You can drag and drop the pictograms onto the canvas to create an animation. The animations will be displayed on the canvas in the order they were added.

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Animation Builder Game</title>
  <style>
    #canvas {
      border: 1px solid black;
      width: 400px;
      height: 400px;
    }
    #toolbar {
      display: flex;
      justify-content: center;
      margin-top: 10px;
    }
    .pictogram {
      width: 40px;
      height: 40px;
      margin: 0 5px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="canvas"></div>
  <div id="toolbar">
    <img class="pictogram" src="pictogram1.png" alt="Pictogram 1" draggable="true">
    <img class="pictogram" src="pictogram2.png" alt="Pictogram 2" draggable="true">
    <img class="pictogram" src="pictogram3.png" alt="Pictogram 3" draggable="true">
  </div>

// Initialize animation
    let animation = [];

// Handle drag start event for pictograms
    const handleDragStart = function (event) {
      event.dataTransfer.setData('text/plain', event.target.alt);
    }

// Handle drag over event on canvas
    const handleDragOver = function (event) {
      event.preventDefault();
    }

// Handle drop event on canvas
    const handleDrop = function (event) {
      event.preventDefault();
      let pictogramAlt = event.dataTransfer.getData('text/plain');
      let x = event.clientX - canvas.getBoundingClientRect().left;
      let y = event.clientY - canvas.getBoundingClientRect().top;
      animation.push({ x: x, y: y, pictogram: pictogramAlt });
      renderAnimation();
    }

// Render animation on the canvas
    const renderAnimation = function () {
      canvas.innerHTML = ''; // Clear canvas

animation.forEach(frame => {
        let pictogram = document.createElement('img');
        pictogram.src = `${frame.pictogram}.png`;
        pictogram.style.position = 'absolute';
        pictogram.style.left = `${frame.x}px`;
        pictogram.style.top = `${frame.y}px`;
        canvas.appendChild(pictogram);
      });
    }

// Attach event listeners
    Array.from(pictograms).forEach(pictogram => {
      pictogram.addEventListener('dragstart', handleDragStart);
    });

canvas.addEventListener('dragover', handleDragOver);
    canvas.addEventListener('drop', handleDrop);
  </script>
</body>
</html>
```

To use this game, you would need to provide your own pictogram images (represented here as `pictogram1.png`, `pictogram2.png`, `pictogram3.png`). The images should be placed in the same directory as the HTML file.

You can drag and drop the pictograms onto the canvas to create an animation. The animations will be displayed on the canvas in the order they were added.