AI game creator

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

No:37504

←

Prev Next

→

Pixel art maker
Developer User17064｜Date and time 24/1/21 4:40:15
Build time 7.113 sec｜Game capacity 2.241KB｜

Script

Sure! Here's an example of an HTML file that implements a simple pixel art maker game using JavaScript. The game allows the player to paint pixels on a canvas using different colors.

This HTML file includes a canvas element where the player can tap/click to paint pixels with random colors. The canvas listens for touch events and uses JavaScript to calculate the grid position of the touched pixel and randomly assigns a color to it. Note: Since the game is designed for smartphone operation, it utilizes touch events. However, you can adapt it for mouse events if you're using a computer instead of a smartphone.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's an example of an HTML file that implements a simple pixel art maker game using JavaScript. The game allows the player to paint pixels on a canvas using different colors.

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Pixel Art Maker</title>
    <style>
      canvas {
        border: 1px solid #000;
      }
    </style>
  </head>
  <body>
    <canvas id="pixel-canvas" width="400" height="400"></canvas>

// Define the size of each pixel
      var pixelSize = 20;

// Handle touch events on the canvas
      canvas.addEventListener("touchstart", handleTouch, false);
      canvas.addEventListener("touchmove", handleTouch, false);

// Function to handle touch events
      function handleTouch(event) {
        event.preventDefault();

var touch = event.touches[0];
        var x = touch.clientX - canvas.offsetLeft;
        var y = touch.clientY - canvas.offsetTop;

// Calculate the grid position of the touched pixel
        var pixelX = Math.floor(x / pixelSize);
        var pixelY = Math.floor(y / pixelSize);

// Paint the pixel with a random color
        var color = getRandomColor();
        context.fillStyle = color;
        context.fillRect(
          pixelX * pixelSize,
          pixelY * pixelSize,
          pixelSize,
          pixelSize
        );
      }

// Function to generate a random color
      function getRandomColor() {
        var letters = "0123456789ABCDEF";
        var color = "#";
        for (var i = 0; i < 6; i++) {
          color += letters[Math.floor(Math.random() * 16)];
        }
        return color;
      }
    </script>
  </body>
</html>
```

Note: Since the game is designed for smartphone operation, it utilizes touch events. However, you can adapt it for mouse events if you're using a computer instead of a smartphone.