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

No:34127

Make a pixel art maker of emojis and a delete func..ALL
Developer User16048｜Date and time 24/1/8 10:14:55
Build time 28.207 sec｜Game capacity 3.255KB｜

Script

Sure! Here's a simple implementation of a pixel art maker using emojis with a delete function. You can copy the code into a single HTML file and open it in any web browser to play the game.

Emoji Pixel Art Maker

Select a color:

In this game, you can use the color palette to select a color, and then click on the canvas to draw pixels using the selected color. You can also click the "Delete" button to clear all the pixels on the canvas. The canvas is represented as a grid, where each cell can be filled with a color (represented by emojis in this case). Note: This code assumes the canvas width and height to be fixed dimensions (20x10 pixels), and the colors are represented by CSS background colors for simplicity. Feel free to modify and enhance the code as per your requirements.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

Sure! Here's a simple implementation of a pixel art maker using emojis with a delete function. You can copy the code into a single HTML file and open it in any web browser to play the game.

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    .color {
      width: 20px;
      height: 20px;
      display: inline-block;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <h1>Emoji Pixel Art Maker</h1>

<h2>Select a color:</h2>
  <div id="color-palette">
    <div class="color" style="background-color: red;"></div>
    <div class="color" style="background-color: blue;"></div>
    <div class="color" style="background-color: green;"></div>
    <div class="color" style="background-color: yellow;"></div>
    <div class="color" style="background-color: orange;"></div>
    <div class="color" style="background-color: purple;"></div>
  </div>
  <br>

<button onclick="deletePixels()">Delete</button>

// Define the width and height of the canvas
    const canvasWidth = 20;
    const canvasHeight = 10;

// Create an empty grid to represent the canvas
    let grid = Array.from({ length: canvasHeight }, () =>
      Array(canvasWidth).fill(''));

// Render the canvas on the screen
    renderCanvas();

// Add click event listeners to color palette
    document.querySelectorAll('.color').forEach(color => {
      color.addEventListener('click', () => {
        const selectedColor = color.style.backgroundColor;
        drawPixel(selectedColor);
      });
    });

// Function to draw a pixel on the canvas
    function drawPixel(color) {
      const row = Math.floor(event.clientY / 20);
      const col = Math.floor(event.clientX / 20);

grid[row][col] = color;
      renderCanvas();
    }

// Function to delete all pixels
    function deletePixels() {
      grid = Array.from({ length: canvasHeight }, () =>
        Array(canvasWidth).fill(''));
      renderCanvas();
    }

// Function to render the canvas on the screen
    function renderCanvas() {
      canvas.innerHTML = '';

grid.forEach(row => {
        row.forEach(cell => {
          const pixel = document.createElement('span');
          pixel.style.width = '20px';
          pixel.style.height = '20px';
          pixel.style.display = 'inline-block';
          pixel.style.border = '1px solid #444';
          pixel.style.backgroundColor = cell ? cell : 'transparent';
          canvas.appendChild(pixel);
        });
        const br = document.createElement('br');
        canvas.appendChild(br);
      });
    }
  </script>
</body>
</html>
```

Note: This code assumes the canvas width and height to be fixed dimensions (20x10 pixels), and the colors are represented by CSS background colors for simplicity. Feel free to modify and enhance the code as per your requirements.