Pixel Art Maker For Melon Playground -

// ---------- helper: initialize / resize matrix ---------- function initMatrix(size, fillColor = DEFAULT_BG) const newMatrix = Array(size); for(let i = 0; i < size; i++) newMatrix[i] = Array(size).fill(fillColor); return newMatrix;

footer font-size: 0.7rem; text-align: center; color: #8aaec0; margin-top: 12px; pixel art maker for melon playground

// ---------- state ---------- let currentGridSize = 32; // 32x32 default let cellW = 0, cellH = 0; let pixelMatrix = []; // 2D array storing hex colors let isDrawing = false; let eraseMode = false; // erase with background color (default dark bg) // ---------- helper: initialize / resize matrix ----------

// ---- fill with current selected color (not only bg) but fill tool ---- function floodFillTool(targetRow, targetCol, newColor) // typical flood fill 4-direction if(pixelMatrix[targetRow][targetCol] === newColor) return; const targetColor = pixelMatrix[targetRow][targetCol]; const stack = [row: targetRow, col: targetCol]; const visited = Array(currentGridSize).fill().map(() => Array(currentGridSize).fill(false)); while(stack.length) col >= currentGridSize) continue; if(visited[row][col]) continue; if(pixelMatrix[row][col] !== targetColor) continue; visited[row][col] = true; setPixel(row, col, newColor); stack.push(row: row+1, col); stack.push(row: row-1, col); stack.push(row, col: col+1); stack.push(row, col: col-1); // but user might want to keep old drawing

// ---- change grid size ---- function changeGridSize() const newSize = parseInt(gridSizeSelect.value, 10); if(newSize === currentGridSize) return; // backup old colors? but we can optionally preserve? but resize resets canvas better to keep new fresh matrix. // but user might want to keep old drawing? To be friendly, we can attempt to map old drawing into new grid? // That could be messy (scale). For simplicity and clarity, we reset matrix with default bg, but we show warning? We'll just reinit. currentGridSize = newSize; pixelMatrix = initMatrix(currentGridSize, DEFAULT_BG); resizeAndRedraw();

body background: linear-gradient(145deg, #1a2a3a 0%, #0f1a24 100%); display: flex; justify-content: center; align-items: center; min-height: 100vh; font-family: 'Segoe UI', 'Courier New', 'Fira Code', monospace; margin: 0; padding: 20px;

// painting logic (color or erase) function paintAtEvent(e, forceErase = false) eraseMode; const row, col = getGridCoordFromEvent(e); if(row >= 0 && row < currentGridSize && col >=0 && col < currentGridSize) let newColor; if(useErase) newColor = DEFAULT_BG; else newColor = colorPicker.value; setPixel(row, col, newColor);