Pixel art game where you make pixel art's game | AI game creator

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

No:43333

64

Pixel art game where you make pixel art
Developer User19162｜Date and time 24/2/15 6:48:28
Build time 8.354 sec｜Game capacity 3.291KB｜

Sure! Here's an example of a simple pixel art game implemented in a single HTML file using JavaScript and enclosed in script tags:

This code sets up a canvas element where the user can create pixel art. Each pixel is represented by a value in the `grid` array. Clicking on a pixel changes its color cyclically through four predefined colors. The canvas size adjusts based on the screen width, allowing for smartphone operation. To play the game, simply open the HTML file on a web browser that supports JavaScript (such as Chrome) and start creating pixel art by clicking on the pixels.

→ 　

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 pixel art game implemented in a single HTML file using JavaScript and enclosed in script tags:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Pixel Art Game</title>
    <style>
        canvas {
          border: 1px solid #000;
        }
    </style>
</head>
<body>
    <canvas id="pixelCanvas"></canvas>

<script>
        // Array representing the pixel art grid
        const grid = [];
        
        // Function to create the pixel art grid
        function createGrid() {
            const canvas = document.getElementById("pixelCanvas");
            const ctx = canvas.getContext("2d");
            
            // Set the canvas size according to the screen width
            const screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
            const gridSize = Math.floor(screenWidth / 20); // Assuming each pixel is 20x20
            
            canvas.width = screenWidth;
            canvas.height = gridSize * 20; // Assuming each pixel is 20x20
            
            for (let i = 0; i < gridSize; i++) {
                const row = [];
                for (let j = 0; j < gridSize; j++) {
                    row.push(0); // 0 represents an empty pixel
                    ctx.fillStyle = "#ffffff"; // Set the initial color to white
                    ctx.fillRect(j * 20, i * 20, 20, 20); // Drawing a white rectangle for each pixel
                }
                grid.push(row);
            }
        }
        
        // Function to handle pixel clicks
        function handlePixelClick(event) {
            const canvas = event.target;
            const rect = canvas.getBoundingClientRect();
            const x = event.clientX - rect.left;
            const y = event.clientY - rect.top;
            const i = Math.floor(y / 20);
            const j = Math.floor(x / 20);
            
            const colors = ["#ffffff", "#ff0000", "#00ff00", "#0000ff"]; // Colors for pixel art
            
            const currentIndex = grid[i][j];
            
            if (currentIndex === colors.length - 1) {
                grid[i][j] = 0; // Reset to white if last color is reached
            } else {
                grid[i][j] = currentIndex + 1; // Change to the next color
            }
            
            const ctx = canvas.getContext("2d");
            ctx.fillStyle = colors[grid[i][j]];
            ctx.fillRect(j * 20, i * 20, 20, 20); // Update the pixel color
        }
        
        // Start the game
        function startGame() {
            createGrid();
            const canvas = document.getElementById("pixelCanvas");
            canvas.addEventListener("click", handlePixelClick);
        }
        
        // Run the game
        startGame();
    </script>
</body>
</html>
```

This code sets up a canvas element where the user can create pixel art. Each pixel is represented by a value in the `grid` array. Clicking on a pixel changes its color cyclically through four predefined colors. The canvas size adjusts based on the screen width, allowing for smartphone operation.

To play the game, simply open the HTML file on a web browser that supports JavaScript (such as Chrome) and start creating pixel art by clicking on the pixels.