`data/artifacts/02a362bd0b06/gemma3-12b.html`

172 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: #222; }
        canvas { display: block; }

        #container {
            position: relative;
            width: 100vw;
            height: 100vh;
        }
    </style>
</head>
<body>
    <div id="container">
        <canvas id="dragonRealm"></canvas>
    </div>

    <script>
        const canvas = document.getElementById('dragonRealm');
        const ctx = canvas.getContext('2d');

        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        let dragonX = canvas.width * 0.3;
        let dragonY = canvas.height * 0.4;
        let dragonSpeed = 1;
        let dragonAltitude = 50; // How far above the mountains it flies

        const mountainHeightScale = 0.5;


        function generateMountains(width) {
            let mountains = [];
            for (let i = 0; i < width; i += 60) {
                let height = Math.random() * canvas.height * mountainHeightScale + 50;
                mountains.push({ x: i, y: height });
            }
            return mountains;
        }


        const mountains = generateMountains(canvas.width);

        let fireActive = false;
        let fireTimer = 0;



        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            // Background Gradient
            const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
            gradient.addColorStop(0, '#111');
            gradient.addColorStop(1, '#333');
            ctx.fillStyle = gradient;
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            // Draw Mountains (with snowfall)
            ctx.fillStyle = 'rgb(50, 50, 50)'; // Darker mountain color
            for (const mountain of mountains) {
                ctx.beginPath();
                ctx.moveTo(mountain.x, canvas.height - mountain.y);
                ctx.lineTo(mountain.x + 20, canvas.height - mountain.y + 30);
                ctx.lineTo(mountain.x + 40, canvas.height - mountain.y);
                ctx.lineTo(mountain.x + 60, canvas.height - mountain.y + 30);
                ctx.lineTo(mountain.x + 80, canvas.height - mountain.y);
                ctx.closePath();
                ctx.fill();

                //Snowfall on mountains (random dots)
                 if (Math.random() < 0.1) { //Less snowfall on the main part of the mountain
                    ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
                     ctx.beginPath();
                     ctx.arc(mountain.x + Math.random() * 80 , canvas.height - (mountain.y + Math.random()*10) , 2, 0, 2*Math.PI);
                      ctx.fill();
                 }

            }


            // Draw Dragon
            ctx.save(); // Save current state
            ctx.translate(dragonX, dragonY);

            ctx.fillStyle = 'green';
            ctx.beginPath();
            ctx.arc(0, -dragonAltitude , 30, 0, 2 * Math.PI);
            ctx.fill();


            ctx.fillStyle = 'darkgreen';
            ctx.beginPath();
            ctx.arc(-15,-dragonAltitude + 15, 15, 0, 2 * Math.PI);
            ctx.fill();

             ctx.beginPath();
              ctx.arc(15,-dragonAltitude+15, 15, 0, 2 * Math.PI);
                ctx.fill();


            ctx.restore(); // Restore previous state



            // Draw Fire (if active)
            if (fireActive) {
                ctx.fillStyle = 'orange';
                ctx.beginPath();
                ctx.arc(dragonX + 40, dragonY - dragonAltitude , 20, 0, 2 * Math.PI);
                ctx.fill();
                fireTimer--;

                if (fireTimer <= 0) {
                    fireActive = false;
                }
            }


             //Snowfall overall
             ctx.fillStyle = 'rgba(255, 255, 255, 0.1)';
              for (let i = 0; i < canvas.width; i++) {
               ctx.beginPath();
                ctx.arc(i , canvas.height - Math.random() * 10 - 3, 1, 0, 2*Math.PI);
                 ctx.fill();
              }


            // Update Dragon Position
            dragonX += dragonSpeed;
            if (dragonX > canvas.width) {
                dragonX = 0; // Loop around
            }

        }



        function handleClick(event) {
            if (event.clientX >= dragonX - 20 && event.clientX <= dragonX + 60 &&
                event.clientY >= dragonY - dragonAltitude -40 && event.clientY <= dragonY - dragonAltitude+20 ) {

                fireActive = true;
                fireTimer = 30; // Duration of fire effect
            }
        }


        canvas.addEventListener('click', handleClick);

        draw(); // Initial draw
        setInterval(draw, 30); // Draw every 30ms (approx. 33fps)

        window.addEventListener('resize', () => {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
             mountains.length = 0;
              const newMountains = generateMountains(canvas.width);
                mountains.push(...newMountains);


        });

    </script>
</body>
</html>