`data/artifacts/02a362bd0b06/qwen25-7b.html`

119 lines
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dragon Realm</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background-color: #000;
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>
<canvas id="dragonCanvas"></canvas>
<script>
    const canvas = document.getElementById('dragonCanvas');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    const ctx = canvas.getContext('2d');

    class Dragon {
        constructor(x, y) {
            this.x = x;
            this.y = y;
            this.scale = 1;
            this.fire = false;
        }
        draw() {
            ctx.save();
            ctx.translate(this.x + (this.scale * 30), this.y - (this.scale * 20));
            ctx.scale(this.scale, this.scale);
            ctx.fillStyle = 'red';
            ctx.beginPath();
            ctx.moveTo(0, 0);
            ctx.lineTo(-15, -20);
            ctx.lineTo(-20, -40);
            ctx.lineTo(30, -60);
            ctx.lineTo(40, -80);
            ctx.lineTo(70, -90);
            ctx.lineTo(90, -110);
            ctx.lineTo(120, -120);
            ctx.closePath();
            ctx.fill();
            ctx.restore();
        }
        update() {
            if (this.fire) {
                this.breatheFire();
            }
        }
        breatheFire() {
            const fireX = this.x + 30;
            const fireY = this.y - 15;
            ctx.save();
            ctx.translate(fireX, fireY);
            ctx.scale(1, 1);
            ctx.fillStyle = 'orange';
            ctx.beginPath();
            ctx.moveTo(-20, 0);
            ctx.lineTo(20, -40);
            ctx.lineTo(30, -50);
            ctx.lineTo(60, -70);
            ctx.closePath();
            ctx.fill();
            ctx.restore();
        }
    }

    const dragon = new Dragon(canvas.width / 2, canvas.height * 0.8);

    function draw() {
        ctx.fillStyle = 'rgba(255, 255, 255, 0.1)';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        ctx.globalAlpha = 0.3;
        ctx.beginPath();
        for (let i = 0; i < canvas.width * 4; i++) {
            const x = (Math.random() - 0.5) * 2 * Math.PI;
            const y = Math.random() * canvas.height * 1.2 + 10;
            ctx.moveTo(Math.sin(x) * y, Math.cos(x) * y);
        }
        ctx.strokeStyle = 'white';
        ctx.stroke();
        ctx.globalAlpha = 1;

        dragon.draw();
        dragon.update();

        requestAnimationFrame(draw);
    }

    function animate() {
        if (canvas.width < canvas.height / 2) {
            dragon.x -= 3;
        } else {
            dragon.y += 3;
        }
        dragon.scale *= 0.99;
        dragon.fire = false;

        if (Math.random() > 0.95) {
            dragon.fire = true;
        }

        draw();
    }

    canvas.addEventListener('click', () => {
        dragon.fire = !dragon.fire;
    });

    animate();
</script>
</body>
</html>