Ai sprite maker, "CREATE!" Button's game | AI game creator

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

No:37862

57

Ai sprite maker, "CREATE!" Button
Developer User17064｜Date and time 24/1/21 18:33:03
Build time 9.793 sec｜Game capacity 2.882KB｜

Sure! Here's an example of a simple game implemented as a single HTML file using JavaScript, enclosed in `` tags. The game is called "Ai Sprite Maker" and allows the user to create a sprite by selecting pictograms. It assumes smartphone operation. <br><br> <br> <style> .pictogram { display: inline-block; margin: 5px; cursor: pointer; } .selected { border: 2px solid blue; } </style> <h1>Ai Sprite Maker</h1> <div id="canvas"></div> <div id="toolbar"> <h2>Select Pictograms:</h2> <div id="pictograms"> <img class="pictogram" src="emozi_all/pictogram.png"> <img class="pictogram" src="emozi_all/pictogram.png"> <img class="pictogram" src="emozi_all/pictogram.png">  </div> <button id="createButton">CREATE!</button> </div>

To use this as a game, you would need to replace the placeholder pictogram image sources (`src="emozi_all/game.png"`) with actual pictogram images. The game allows the user to select a pictogram by tapping on its image and then by tapping the "CREATE!" button, a new sprite (image) gets created on the canvas.

→ 　

0　

0　

[PR]現在の人気グッズランキング

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

(C)2023 HisashiApp

Sure! Here's an example of a simple game implemented as a single HTML file using JavaScript, enclosed in `<script>` tags. The game is called "Ai Sprite Maker" and allows the user to create a sprite by selecting pictograms. It assumes smartphone operation.

```html
<!DOCTYPE html>
<html>
<head>
    <title>Ai Sprite Maker</title>
    <style>
        .pictogram {
            display: inline-block;
            margin: 5px;
            cursor: pointer;
        }
        .selected {
            border: 2px solid blue;
        }
    </style>
</head>
<body>
    <h1>Ai Sprite Maker</h1>
    <div id="canvas"></div>
    <div id="toolbar">
        <h2>Select Pictograms:</h2>
        <div id="pictograms">
            <img class="pictogram" src="pictogram1.png">
            <img class="pictogram" src="pictogram2.png">
            <img class="pictogram" src="pictogram3.png">
            
        </div>
        <button id="createButton">CREATE!</button>
    </div>

<script>
        var canvas = document.getElementById("canvas");
        var pictograms = document.getElementsByClassName("pictogram");
        var createButton = document.getElementById("createButton");
        var selectedPictogram = null;

// Add click event listener to each pictogram
        for (var i = 0; i < pictograms.length; i++) {
            pictograms[i].addEventListener("click", selectPictogram);
        }

// Add click event listener to create button
        createButton.addEventListener("click", createSprite);

function selectPictogram() {
            // Remove selected class from all pictograms
            for (var i = 0; i < pictograms.length; i++) {
                pictograms[i].classList.remove("selected");
            }

// Add selected class to the clicked pictogram
            this.classList.add("selected");
            selectedPictogram = this.src;
        }

function createSprite() {
            if (selectedPictogram) {
                // Create new sprite element
                var sprite = document.createElement("img");
                sprite.src = selectedPictogram;

// Append the new sprite to the canvas
                canvas.appendChild(sprite);

// Reset selected pictogram and remove selected class
                selectedPictogram = null;
                for (var i = 0; i < pictograms.length; i++) {
                    pictograms[i].classList.remove("selected");
                }
            }
        }
    </script>
</body>
</html>
```

To use this as a game, you would need to replace the placeholder pictogram image sources (`src="pictogramX.png"`) with actual pictogram images. The game allows the user to select a pictogram by tapping on its image and then by tapping the "CREATE!" button, a new sprite (image) gets created on the canvas.