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

No:34135

A ai that makes pixel art for you
Developer User16061｜Date and time 24/1/8 12:02:08
Build time 46.621 sec｜Game capacity 3.513KB｜

Script

Sure! Here's an example of a simple game implemented as a single HTML file with JavaScript. The game is a pixel art creation tool where an AI suggests different pixel art designs for the user to select and customize. The user can then save the final artwork.

Pixel Art AI Game

To play this game, open an HTML file in a web browser on your smartphone, and it will display a canvas with a randomly generated pictogram. By clicking the "Generate Art" button, a new pictogram will be suggested. You can then save the final artwork by clicking the "Save Art" button, which will download the generated pixel art as a PNG image file.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Pixel Art AI</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
        }
        
        canvas {
            border: 1px solid #000;
            margin: 20px auto;
        }
      
        button {
            padding: 10px 20px;
            font-size: 16px;
            background-color: #4CAF50;
            color: #fff;
            border: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>Pixel Art AI Game</h1>
    <canvas id="pixelArtCanvas" width="400" height="400"></canvas>
    <button id="generateButton">Generate Art</button>
    <button id="saveButton">Save Art</button>

// Global variables
        const canvas = document.getElementById("pixelArtCanvas");
        const ctx = canvas.getContext("2d");
        const generateButton = document.getElementById("generateButton");
        const saveButton = document.getElementById("saveButton");
        let currentPictogram = "";

// Generate random pictogram and display it
        function generatePictogram() {
            const randomIndex = Math.floor(Math.random() * pictograms.length);
            currentPictogram = pictograms[randomIndex];
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.font = "120px Arial";
            ctx.textBaseline = "middle";
            ctx.textAlign = "center";
            ctx.fillText(currentPictogram, canvas.width / 2, canvas.height / 2);
        }

// Save the current pictogram as an image
        function savePictogram() {
            const dataURL = canvas.toDataURL("image/png");
            const link = document.createElement('a');
            link.href = dataURL;
            link.download = 'pixel_art.png';
            link.click();
        }

// Event listeners
        generateButton.addEventListener("click", generatePictogram);
        saveButton.addEventListener("click", savePictogram);

// Generate initial pictogram
        generatePictogram();
    </script>
</body>
</html>
```