Game that lets you make animations's game

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

No:34255

←

Prev Next

→

Game that lets you make animations
Developer User16061｜Date and time 24/1/9 12:16:16
Build time 43.041 sec｜Game capacity 3.896KB｜

Script

Sure, I can help you create a game that allows you to make animations using pictograms. Here's a sample implementation as a single HTML file with JavaScript:

To use the above code, save it as an HTML file (e.g., `animation_creator.html`) and open it in a web browser. This game lets you create animations on a canvas by clicking on the screen to add pictograms. You can change the `pictograms` array to include your own pictograms by providing their names and image URLs. Adjust the canvas size, pictogram size, and other parameters to fit your requirements. Remember to replace `"emozi_bear.png"`, `"emozi_chicken.png"`, and `"emozi_rabbit.png"` with the actual URLs of your pictogram images. You can also add more pictograms to the `pictograms` array as needed. Note: This is a basic example to get you started, and you can expand on it to add more features and customization based on your specific requirements.

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

Sure, I can help you create a game that allows you to make animations using pictograms. Here's a sample implementation as a single HTML file with JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Animation Creator</title>
  <style>
    #canvas {
      width: 100%;
      height: 400px;
      border: 1px solid #000;
    }
  </style>
</head>
<body>
  <div id="canvas"></div>

// Pictograms data
    const pictograms = [
      {
        name: "Pictogram 1",
        image: "pictogram1.png"
      },
      {
        name: "Pictogram 2",
        image: "pictogram2.png"
      },
      {
        name: "Pictogram 3",
        image: "pictogram3.png"
      }
      // Add more pictograms as needed
    ];

// Animation frames
    let frames = [];

// Current selected pictogram
    let selectedPictogram = null;

// Canvas element
    const canvas = document.getElementById("canvas");

// Render the canvas
    function render() {
      while (canvas.firstChild) {
        canvas.removeChild(canvas.firstChild);
      }

frames.forEach(frame => {
        const pictogramImg = document.createElement("img");
        pictogramImg.src = frame.image;
        pictogramImg.style.position = "absolute";
        pictogramImg.style.top = frame.y + "px";
        pictogramImg.style.left = frame.x + "px";
        pintogramImg.style.width = frame.width + "px";
        pictogramImg.style.height = frame.height + "px";

canvas.appendChild(pictogramImg);
      });
    }

// Handle click event on the canvas
    canvas.addEventListener("click", event => {
      if (selectedPictogram !== null) {
        const rect = canvas.getBoundingClientRect();
        const x = event.clientX - rect.left;
        const y = event.clientY - rect.top;

const newFrame = {
          image: selectedPictogram.image,
          x: x,
          y: y,
          width: 100, // Adjust width as needed
          height: 100 // Adjust height as needed
        };

frames.push(newFrame);
        render();
      }
    });

// Display pictograms menu
    function displayPictogramsMenu() {
      const menu = document.createElement("div");
      menu.style.display = "flex";
      menu.style.flexWrap = "wrap";
      menu.style.marginTop = "10px";

pictograms.forEach(pictogram => {
        const pictogramImg = document.createElement("img");
        pictogramImg.src = pictogram.image;
        pictogramImg.style.width = "50px"; // Adjust size as needed
        pictogramImg.style.height = "50px"; // Adjust size as needed
        pictogramImg.style.margin = "5px";
        pictogramImg.style.cursor = "pointer";

pictogramImg.addEventListener("click", () => {
          selectedPictogram = pictogram;
          menu.style.display = "none";
        });

menu.appendChild(pictogramImg);
      });

document.body.appendChild(menu);
    }

// Start the game
    function startGame() {
      displayPictogramsMenu();
      render();
    }

// Entry point
    document.addEventListener("DOMContentLoaded", startGame);

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

Remember to replace `"pictogram1.png"`, `"pictogram2.png"`, and `"pictogram3.png"` with the actual URLs of your pictogram images. You can also add more pictograms to the `pictograms` array as needed.

Note: This is a basic example to get you started, and you can expand on it to add more features and customization based on your specific requirements.