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

No:12901

←

Prev Next

→

Make a create an ai
Developer User5619｜Date and time 23/8/24 23:32:41
Build time 23.173 sec｜Game capacity 2.282KB｜

Script

Sure! Here's an example of a simple game implementation in a single HTML file using JavaScript and pictograms. The game is a simple AI creation simulation where you can mix and match different components to create an AI character. The game is designed for smartphone operation.

AI Creation Game

Drag and drop components to create your AI!

In this game, you will see pictograms representing AI components (head, body, and legs) displayed as draggable items. You can drag and drop these components into the empty square labeled "result" to create your AI. The selected component will be displayed within the result square. Please make sure to replace the `src` attribute of the `img` tags in the code with the actual paths to your pictogram images.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>AI Creation Game</title>
    <style>
      body {
        font-family: Arial, sans-serif;
      }
      .component {
        display: inline-block;
        margin: 10px;
        width: 80px;
        height: 80px;
        cursor: pointer;
      }
      #result {
        width: 80px;
        height: 80px;
        border: 1px solid #000;
        margin-top: 10px;
      }
    </style>
  </head>
  <body>
    <h1>AI Creation Game</h1>
    <h2>Drag and drop components to create your AI!</h2>
    
    <div class="component" draggable="true" ondragstart="drag(event)">
      <img src="pictogram_head.png" alt="Head">
    </div>
    
    <div class="component" draggable="true" ondragstart="drag(event)">
      <img src="pictogram_body.png" alt="Body">
    </div>
    
    <div class="component" draggable="true" ondragstart="drag(event)">
      <img src="pictogram_legs.png" alt="Legs">
    </div>
    
    <div id="result" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    
    <script>
      function drag(event) {
        event.dataTransfer.setData("text", event.target.alt);
      }
      
      function allowDrop(event) {
        event.preventDefault();
      }
      
      function drop(event) {
        event.preventDefault();
        var data = event.dataTransfer.getData("text");
        var resultElement = document.getElementById("result");
        resultElement.innerHTML = "<img src='pictogram_" + data.toLowerCase() + ".png' alt='" + data + "'>";
      }
    </script>
  </body>
</html>
```

Please make sure to replace the `src` attribute of the `img` tags in the code with the actual paths to your pictogram images.