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

No:30290

Make an animation builder where you create your ow..ALL
Developer User7632｜Date and time 23/12/21 4:56:11
Build time 12.006 sec｜Game capacity 1.937KB｜

Script

Sure! Here's a simple example of an animation builder game using JavaScript, HTML, and pictograms. Please note that this is just a basic implementation and can be further enhanced based on your specific requirements.

Animation Builder Game

Click on the pictograms to create your animation!

This implementation allows you to click on the canvas and add random pictograms to create your animation. Each click event adds a pictogram at the clicked position on the canvas. The animation is stored in an array called "animation" and is continuously redrawn on the canvas. You can further enhance this game by adding functionality for the AI to vote on the animations based on specific criteria.

←

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 {
        width: 400px;
        height: 400px;
        border: 1px solid black;
    }
</style>
</head>
<body>
<h1>Animation Builder Game</h1>
<p>Click on the pictograms to create your animation!</p>

// Animation array
    let animation = [];

// Listening for click events on canvas
    const canvas = document.getElementById('canvas');
    canvas.addEventListener('click', addPictogram);

function addPictogram(event) {
        // Getting the clicked pictogram
        const randomIndex = Math.floor(Math.random() * pictograms.length);
        const pictogram = pictograms[randomIndex];

// Adding pictogram coordinates to the animation array
        animation.push({ x: event.clientX, y: event.clientY, pictogram });

// Clearing canvas
        const ctx = canvas.getContext('2d');
        ctx.clearRect(0, 0, canvas.width, canvas.height);

// Redrawing animation
        animation.forEach(frame => {
            ctx.fillText(frame.pictogram, frame.x, frame.y);
        });
    }
</script>
</body>
</html>
```