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

No:17592

143

←

Prev Next

→

Animatronic maker where you make a animatronic and..ALL
Developer User7738｜Date and time 23/9/24 2:33:55
Build time 28.302 sec｜Game capacity 2.843KB｜

Script

Sure, here's a simple implementation of an HTML game where you can create and take pictures of your own animatronic using pictograms. It is designed to be played on a smartphone.

Animatronic Maker

In this game, you can click the "Add Head", "Add Body", and "Add Legs" buttons to add different parts of an animatronic to the canvas. The parts are represented by pictogram images that you would need to replace with your own. Once you have created your animatronic, you can click the "Take Picture" button to capture a picture of it. The taken picture is then displayed as a data URL in an alert box, but you can modify the `takePicture()` function to process the data URL as per your requirements (e.g., save it, display it on the screen, etc.). Please note that the image sources ("emozi_bear.png", "emozi_chicken.png", and "emozi_rabbit.png") in the code should be replaced with the actual image paths of your pictograms for the different animatronic parts.

←

Prev　Next

→ 　

Back　

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

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

Sure, here's a simple implementation of an HTML game where you can create and take pictures of your own animatronic using pictograms. It is designed to be played on a smartphone.

```html
<!DOCTYPE html>
<html>
<head>
  <title>Animatronic Maker</title>
  <style>
    #canvas {
      border: 1px solid black;
      width: 400px;
      height: 400px;
    }
    #controls {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100px;
    }
  </style>
</head>
<body>
  <h1>Animatronic Maker</h1>
  <canvas id="canvas"></canvas>
  <div id="controls">
    <button onclick="addPart('head')">Add Head</button>
    <button onclick="addPart('body')">Add Body</button>
    <button onclick="addPart('legs')">Add Legs</button>
    <button onclick="takePicture()">Take Picture</button>
  </div>

function drawAnimatronic() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      for (var i = 0; i < parts.length; i++) {
        var part = parts[i];
        ctx.drawImage(part.image, part.x, part.y, part.width, part.height);
      }
    }

function takePicture() {
      var dataUrl = canvas.toDataURL();
      // Process the dataUrl as needed (e.g., save it, display it, etc.)
      alert("Picture taken: " + dataUrl);
    }

drawAnimatronic();
  </script>
</body>
</html>
```

Please note that the image sources ("head.png", "body.png", and "legs.png") in the code should be replaced with the actual image paths of your pictograms for the different animatronic parts.