document.addEventListener('DOMContentLoaded', () => {
    const canvas = document.getElementById('pixelCanvas');
    const colorPicker = document.getElementById('colorPicker');
    const eraserBtn = document.getElementById('eraserBtn');
    const clearBtn = document.getElementById('clearBtn');

    let isEraserMode = false;
    let isDrawing = false;

    // 16x16のマス目を生成
    for (let i = 0; i < 256; i++) {
        const pixel = document.createElement('div');
        pixel.classList.add('pixel');

        // マウスを押したとき
        pixel.addEventListener('mousedown', (e) => {
            isDrawing = true;
            paintPixel(e.target);
        });

        // マウスを押したまま上に乗ったとき
        pixel.addEventListener('mouseenter', (e) => {
            if (isDrawing) {
                paintPixel(e.target);
            }
        });

        canvas.appendChild(pixel);
    }

    // マウスを離したら描画を止める
    window.addEventListener('mouseup', () => {
        isDrawing = false;
    });

    // 色を塗る処理（背景色だけを変更し、枠線を維持）
    function paintPixel(pixelElement) {
        if (isEraserMode) {
            pixelElement.style.backgroundColor = '#ffffff';
        } else {
            pixelElement.style.backgroundColor = colorPicker.value;
        }
    }

    // 消しゴムモード切り替え
    eraserBtn.addEventListener('click', () => {
        isEraserMode = !isEraserMode;
        if (isEraserMode) {
            eraserBtn.classList.add('active');
            eraserBtn.textContent = 'ペンを使う';
        } else {
            eraserBtn.classList.remove('active');
            eraserBtn.textContent = '消しゴム';
        }
    });

    // 全部消す処理
    clearBtn.addEventListener('click', () => {
        if (confirm('すべて消去してよろしいですか？')) {
            const pixels = document.querySelectorAll('.pixel');
            pixels.forEach(pixel => pixel.style.backgroundColor = '#ffffff');
        }
    });
});


<script defer data-domain="html.cafe" src="https://milkymouse.com/js/script.js"></script>