Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pixel Dragon Generator</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin: 50px;
        }

        canvas {
            border: 1px solid #000;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h1>Pixel Dragon Generator</h1>
    <button onclick="generateDragon()">Generate Dragon</button>
    <canvas id="dragonCanvas" width="100" height="100"></canvas>
    <script>
        function generateDragon() {
            const canvas = document.getElementById('dragonCanvas');
            const ctx = canvas.getContext('2d');
            const pixelSize = 10;
            
            const colors = ['#ff0000', '#ff9900', '#ff66ff', '#66ff66', '#33ccff'];
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            for (let y = 0; y < canvas.height / pixelSize; y++) {
                for (let x = 0; x < canvas.width / pixelSize; x++) {
                    if (Math.random() > 0.5) {
                        ctx.fillStyle = colors[Math.floor(Math.random() * colors.length)];
                        ctx.fillRect(x * pixelSize, y * pixelSize, pixelSize, pixelSize);
                    }
                }
            }
        }
    </script>
</body>
</html>
Editor is loading...