NXT Wave Gem Hunt – Custom dApp Creations

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>NXT 💎 MOON HUNT</title>
    <style>
        ::selection { background-color: #00ffcc; color: #000000; }
        ::-moz-selection { background-color: #00ffcc; color: #000000; }

html, body {
            margin: 0; padding: 0; width: 100vw; height: 100vh; overflow: hidden; 
            background-color: #020108; touch-action: none;
            -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
        }

#nxt-fullscreen-override {
            position: absolute; top: 0; left: 0; right: 0; bottom: 0;
            width: 100vw; height: 100vh;
            background-color: #020108;
            background-image: radial-gradient(circle at top, #110022 0%, #020108 100%);
            display: flex; flex-direction: column; justify-content: center; align-items: center;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            cursor: crosshair;
        }

#nxt-game-container {
            position: relative; width: 100vw; max-width: 1200px; height: 100vh; max-height: 800px;
            box-shadow: 0 0 80px rgba(0, 255, 204, 0.15); border: 2px solid rgba(0, 255, 204, 0.5);
            background: #000; overflow: hidden; display: flex; flex-direction: column;
            cursor: crosshair;
        }

@media (min-width: 601px) {
            #nxt-game-container { height: 85vh; width: 95vw; border-radius: 12px; }
        }

#nxtCanvas { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; cursor: crosshair; }
        #nxt-flash-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: white; z-index: 5; opacity: 0; pointer-events: none; transition: opacity 0.05s ease-out; }

/* HUD & UI */
        #nxt-ui-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 10; }
        #nxt-hud-top { position: absolute; top: 20px; left: 20px; right: 20px; display: flex; justify-content: space-between; align-items: flex-start; z-index: 10; }
        .hud-block { background: rgba(2, 1, 8, 0.8); border: 1px solid rgba(0, 255, 204, 0.4); padding: 10px 20px; border-radius: 8px; text-shadow: 0 0 10px currentColor; font-weight: 900; letter-spacing: 2px; backdrop-filter: blur(5px); }
        #nxt-lives-container { font-size: 24px; color: #ff0055; text-shadow: 0 0 15px #ff0055; display: flex; gap: 5px; }

/* Buttons & Modals */
        #nxt-help-btn { background: rgba(255, 255, 255, 0.1); border: 2px solid #aa88ff; color: #ccbbff; width: 40px; height: 40px; border-radius: 50%; font-size: 28px; font-weight: bold; display: flex; align-items: center; justify-content: center; cursor: pointer; pointer-events: auto; transition: all 0.2s; box-shadow: 0 0 15px rgba(170, 136, 255, 0.5); line-height: 1; margin-right: 10px; }
        #nxt-help-btn:hover { background: #aa88ff; color: #020108; border-color: #ffffff; box-shadow: 0 0 30px #aa88ff; }

#nxt-help-modal { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(2, 1, 8, 0.9); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; z-index: 30; pointer-events: auto; visibility: hidden; opacity: 0; transition: opacity 0.2s ease, visibility 0.2s; }
        #nxt-help-modal.show { visibility: visible; opacity: 1; }
        .nxt-help-content { background: rgba(10, 5, 20, 0.95); border: 3px solid #aa88ff; border-radius: 24px; padding: 30px 40px; max-width: 600px; width: 85%; max-height: 80vh; overflow-y: auto; color: #e0e0ff; box-shadow: 0 0 80px rgba(170, 136, 255, 0.3); position: relative; pointer-events: auto; font-family: 'Segoe UI', system-ui, sans-serif; }
        .nxt-help-content h2 { color: #aa88ff; text-align: center; font-size: 2.2rem; margin-top: 0; margin-bottom: 20px; text-shadow: 0 0 15px currentColor; letter-spacing: 2px; }
        .nxt-help-content h3 { color: #00ffcc; border-bottom: 1px solid #00ffcc; padding-bottom: 5px; margin-top: 25px; font-size: 1.5rem; }
        .nxt-help-content ul, .nxt-help-content p { font-size: 1.1rem; line-height: 1.6; margin: 10px 0; }
        .nxt-help-content li { margin-bottom: 8px; list-style-type: none; padding-left: 24px; position: relative; }
        .nxt-help-content li:before { content: "💎"; position: absolute; left: 0; color: #00ffcc; font-size: 1rem; top: 2px; }
        .nxt-help-content .bag-bullet:before { content: "💰"; color: #ffcc00; }
        .nxt-help-close { background: #aa88ff; color: #020108; border: none; padding: 12px 30px; font-size: 1.3rem; font-weight: bold; border-radius: 60px; cursor: pointer; margin-top: 30px; width: 100%; text-transform: uppercase; letter-spacing: 2px; transition: all 0.2s; border: 2px solid #aa88ff; }
        .nxt-help-close:hover { background: transparent; color: #aa88ff; box-shadow: 0 0 30px #aa88ff; }
        .nxt-highlight { color: #00ffcc; font-weight: bold; text-shadow: 0 0 8px #00ffcc; }
        .nxt-bag-highlight { color: #ffcc00; font-weight: bold; text-shadow: 0 0 8px #ffcc00; }

.nxt-overlay-screen { background: rgba(2, 1, 8, 0.95); padding: 40px 50px; border: 2px solid #00ffcc; border-radius: 12px; text-align: center; backdrop-filter: blur(12px); pointer-events: auto; box-shadow: 0 0 50px rgba(0, 255, 204, 0.2) inset; width: 85%; max-width: 500px; z-index: 20; }
        .nxt-overlay-screen h1 { margin: 0 0 15px 0; font-size: 48px; text-transform: uppercase; letter-spacing: 6px; color: #fff; line-height: 1.2; text-shadow: 0 0 20px rgba(255,255,255,0.4); }
        .nxt-overlay-screen h1 span { color: #ff00ff; text-shadow: 0 0 20px rgba(255,0,255,0.8); }
        .nxt-overlay-screen p { color: #aaccff; font-size: 16px; margin-bottom: 25px; letter-spacing: 2px; text-transform: uppercase; line-height: 1.6; }

.nxt-btn { background: rgba(0, 255, 204, 0.1); color: #00ffcc; border: 2px solid #00ffcc; padding: 15px 30px; font-size: 18px; font-weight: bold; text-transform: uppercase; cursor: pointer; transition: all 0.2s ease; letter-spacing: 4px; outline: none; border-radius: 8px; width: 100%; margin-bottom: 15px; pointer-events: auto; display: block; }
        .nxt-btn:hover, .nxt-btn:active { background: #00ffcc; color: #000; box-shadow: 0 0 30px rgba(0, 255, 204, 0.8); }

@media (max-width: 768px) {
            .nxt-overlay-screen { padding: 25px 20px; width: 90%; }
            .nxt-overlay-screen h1 { font-size: 32px; }
            #nxt-hud-top { top: 10px; left: 10px; right: 10px; }
            .hud-block { padding: 8px 12px; font-size: 14px; }
            #nxt-lives-container { font-size: 18px; }
            .nxt-help-content { padding: 20px; }
            .nxt-help-content h2 { font-size: 1.8rem; }
        }
    </style>
</head>
<body data-rsssl=1>

<div id="nxt-fullscreen-override">
        <div id="nxt-game-container">
            <canvas id="nxtCanvas"></canvas>
            <div id="nxt-flash-overlay"></div>
            
            <div id="nxt-ui-layer">
                <div id="nxt-hud-top">
                    <div style="display: flex; align-items: center;">
                        <div id="nxt-help-btn" title="How to play">?</div>
                        <div class="hud-block" style="color: #00ffcc;">
                            <div style="font-size: 0.8em; color: #aaccff;">SCORE</div>
                            <span id="nxt-score-val" style="font-size: 1.5em;">0</span>
                        </div>
                    </div>
                    <div class="hud-block" style="text-align: center;">
                        <div style="font-size: 0.8em; color: #aaccff;">WAVE</div>
                        <span id="nxt-level-val" style="color: #ffff00; font-size: 1.5em;">1</span><span style="color: #ffff00; font-size: 1em;">/100</span>
                    </div>
                    <div class="hud-block" style="text-align: right;">
                        <div style="font-size: 0.8em; color: #aaccff;">LIVES</div>
                        <div id="nxt-lives-container">❤️❤️❤️</div>
                    </div>
                </div>
                
                <div id="nxt-start-screen" class="nxt-overlay-screen">
                    <h1>NXT <span>💎</span> HUNT</h1>
                    <p>Tap/Click to blast the targets.<br>Don’t let them escape!</p>
                    <div style="display: flex; justify-content: center; gap: 20px; margin-bottom: 25px;">
                        <div style="color: #00ffcc; font-weight: bold; font-size: 20px; text-shadow: 0 0 10px #00ffcc;">💎 = 100 PTS</div>
                        <div style="color: #ffcc00; font-weight: bold; font-size: 20px; text-shadow: 0 0 10px #ffcc00;">💰 = 500 PTS</div>
                    </div>
                    <p style="color: #ff00ff; font-size: 12px;">Audio Required for Full Experience</p>
                    <button type="button" class="nxt-btn" id="nxt-init-btn">Start Hunt</button>
                </div>
                
                <div id="nxt-game-over-screen" class="nxt-overlay-screen" style="display: none;">
                    <h1>BAG <span>FUMBLED</span></h1>
                    <p>FINAL SCORE: <br><span id="nxt-final-score" style="color: #00ffcc; font-size: 32px; font-weight: bold;">0</span></p>
                    <p>SURVIVED TO WAVE: <span id="nxt-final-level" style="color: #ffff00; font-weight: bold;">1</span></p>
                    <button type="button" class="nxt-btn" id="nxt-reboot-btn">Hunt Again</button>
                </div>

<div id="nxt-help-modal">
                    <div class="nxt-help-content">
                        <h2>🔮 HOW TO HUNT</h2>
                        <p><span class="nxt-highlight">Tap / Click</span> anywhere on the screen to shoot. Your goal: blast all targets before they escape!</p>
                        
                        <h3>🎯 TARGETS</h3>
                        <ul>
                            <li><span class="nxt-highlight">💎 GEM</span> – 100 points. Moves in a predictable arc.</li>
                            <li class="bag-bullet"><span class="nxt-bag-highlight">💰 BAG</span> – 500 points. Erratic, zig‑zag motion. Harder to hit!</li>
                        </ul>

<h3>⚡ WAVES & DIFFICULTY</h3>
                        <ul>
                            <li>Each wave spawns more targets. Clear all to advance.</li>
                            <li>Wave number affects speed – but we’ve tuned it for fair play.</li>
                            <li>Targets bounce off <span class="nxt-highlight">left/right borders</span> and the ground.</li>
                        </ul>

<h3>💔 LIVES & ESCAPE</h3>
                        <ul>
                            <li>You start with <span class="nxt-highlight">3 lives</span> (❤️).</li>
                            <li>If a target flies off the top without being shot, you lose one life.</li>
                            <li>When lives reach zero, game over.</li>
                        </ul>

<h3>🎮 TIPS</h3>
                        <ul>
                            <li>Lead your shots – targets move!</li>
                            <li>Bags bounce erratically; aim when they slow down.</li>
                            <li>Every 5 waves the background pulse intensifies.</li>
                            <li>Sound adds immersion – keep volume on.</li>
                        </ul>

<p style="text-align: center; margin: 20px 0 0; color: #aa88ff;">— READY? CLOSE THIS AND HUNT —</p>
                        <button class="nxt-help-close" id="nxt-help-close">GOT IT</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

function createTarget(canvasWidth, canvasHeight, level) {
        let isBag = Math.random() > 0.85;
        let speedMult = Math.min(1.5, 1 + (level * 0.07));
        return {
            cw: canvasWidth, ch: canvasHeight, type: isBag ? 'bag' : 'gem', r: isBag ? 45 : 35,
            x: (canvasWidth / 2) + ((Math.random() - 0.5) * (canvasWidth * 0.6)), y: canvasHeight + 50,
            vx: (Math.random() > 0.5 ? 1 : -1) * (1.5 + Math.random() * 3) * speedMult, vy: -(5 + Math.random() * 5) * speedMult,
            gravity: 0.12, state: 'flying', erraticTimer: 0, bounces: 0, maxBounces: Math.floor(Math.random() * 2) + 2
        };
    }

const NXT_HUNT = {
        canvas: null, ctx: null, state: 'MENU', score: 0, level: 1, lives: 3, animId: null,
        targets: [], particles: [], texts: [], waveActive: false, waveTimer: 0, targetsToSpawn: 0, helpOpen: false,

init: function() {
            this.canvas = document.getElementById('nxtCanvas');
            if (!this.canvas) return false;
            this.ctx = this.canvas.getContext('2d');
            this.resize();
            window.addEventListener('resize', () => this.resize());

const handleShoot = (e) => {
                if (this.helpOpen || this.state !== 'PLAYING') return;
                e.preventDefault();
                const rect = this.canvas.getBoundingClientRect();
                const scaleX = this.canvas.width / rect.width; const scaleY = this.canvas.height / rect.height;
                let clientX = e.touches ? e.touches[0].clientX : e.clientX;
                let clientY = e.touches ? e.touches[0].clientY : e.clientY;
                this.shoot((clientX - rect.left) * scaleX, (clientY - rect.top) * scaleY);
            };
            this.canvas.addEventListener('mousedown', handleShoot);
            this.canvas.addEventListener('touchstart', handleShoot, {passive: false});

this.drawBackground(); return true;
        },

resize: function() { this.canvas.width = 1200; this.canvas.height = 800; },

start: function() {
            document.getElementById('nxt-start-screen').style.display = 'none';
            document.getElementById('nxt-game-over-screen').style.display = 'none';
            this.state = 'PLAYING'; this.score = 0; this.level = 1; this.lives = 3; this.targets = []; this.particles = []; this.texts = [];
            this.updateHUD(); this.startWave();
            if (this.animId) cancelAnimationFrame(this.animId);
            this.loop();
        },

startWave: function() {
            this.waveActive = true; this.waveTimer = 60; this.targetsToSpawn = Math.min(15, 2 + Math.floor(this.level / 2));
            AudioEngine.playWaveClear(); this.createFloatingText(`WAVE ${this.level}`, this.canvas.width/2, this.canvas.height/2, '#ffff00', 3.0);
        },

updateHUD: function() {
            document.getElementById('nxt-score-val').innerText = this.score;
            document.getElementById('nxt-level-val').innerText = this.level;
            document.getElementById('nxt-lives-container').innerText = '❤️'.repeat(this.lives) + '🖤'.repeat(3 - this.lives);
        },

shoot: function(x, y) {
            AudioEngine.playShoot();
            document.getElementById('nxt-flash-overlay').style.opacity = '0.8';
            setTimeout(() => { document.getElementById('nxt-flash-overlay').style.opacity = '0'; }, 50);

for (let i = this.targets.length - 1; i >= 0; i--) {
                let t = this.targets[i]; if (t.state === 'shot') continue;
                let dist = Math.hypot(x - t.x, y - t.y);
                if (dist <= t.r * 2.5) {
                    t.state = 'shot'; const pts = t.type === 'bag' ? 500 : 100; this.score += pts;
                    AudioEngine.playHit(t.type); this.createExplosion(t.x, t.y, t.type === 'bag' ? '#ffcc00' : '#00ffcc');
                    this.createFloatingText(`+${pts}`, t.x, t.y, t.type === 'bag' ? '#ffcc00' : '#00ffcc');
                    this.targets.splice(i, 1); this.updateHUD(); break;
                }
            }
        },

createExplosion: function(x, y, color) {
            for(let i=0; i<15; i++) this.particles.push({x: x, y: y, vx: (Math.random()-0.5)*20, vy: (Math.random()-0.5)*20, life: 1.0, color: color});
        },

createFloatingText: function(text, x, y, color, life = 1.0) { this.texts.push({text, x, y, life, color}); },

update: function() {
            if (this.waveActive) {
                if (this.targetsToSpawn > 0) {
                    if (--this.waveTimer <= 0) {
                        this.targets.push(createTarget(this.canvas.width, this.canvas.height, this.level));
                        this.targetsToSpawn--; this.waveTimer = Math.max(20, 80 - (this.level * 3)); 
                    }
                } else if (this.targets.length === 0) {
                    this.level = Math.min(100, this.level + 1); this.updateHUD(); this.startWave();
                }
            }

for (let i = this.targets.length - 1; i >= 0; i--) {
                let t = this.targets[i]; if (t.state === 'shot') continue;
                t.x += t.vx; t.y += t.vy;

if (t.state === 'flying') {
                    t.vy += t.gravity;
                    if (t.type === 'bag' && ++t.erraticTimer > 20) { t.vx += (Math.random()-0.5)*4; t.vy += (Math.random()-0.5)*4; t.erraticTimer = 0; }
                    if (t.y < t.r && t.vy < 0) { t.vy *= -1; t.bounces++; }
                    if (t.y > t.ch - 100 && t.vy > 0) { t.vy = -Math.abs(t.vy) * 1.2; t.bounces++; }
                    if (t.bounces >= t.maxBounces) { t.state = 'escaping'; t.vy = -15 - Math.abs(t.vy); }
                } else if (t.state === 'escaping') { t.vy -= 0.5; }

if (t.x < t.r) { t.vx = Math.abs(t.vx); t.x = t.r; }
                if (t.x > t.cw - t.r) { t.vx = -Math.abs(t.vx); t.x = t.cw - t.r; }

if (t.state === 'escaping' && t.y < -100) {
                    AudioEngine.playEscape(); this.createFloatingText("ESCAPED!", t.x, 100, '#ff0055');
                    this.targets.splice(i, 1); this.lives--; this.updateHUD();
                    if (this.lives <= 0) {
                        this.state = 'GAMEOVER';
                        document.getElementById('nxt-final-score').innerText = this.score;
                        document.getElementById('nxt-final-level').innerText = this.level;
                        document.getElementById('nxt-game-over-screen').style.display = 'block'; return;
                    }
                }
            }
            for (let i = this.particles.length - 1; i >= 0; i--) { let p = this.particles[i]; p.x+=p.vx; p.y+=p.vy; p.life-=0.03; if(p.life<=0) this.particles.splice(i,1); }
            for (let i = this.texts.length - 1; i >= 0; i--) { let txt = this.texts[i]; txt.y-=2; txt.life-=0.02; if(txt.life<=0) this.texts.splice(i,1); }
        },

drawBackground: function() {
            const grad = this.ctx.createLinearGradient(0, 0, 0, this.canvas.height);
            grad.addColorStop(0, '#0a0514'); grad.addColorStop(0.7, '#1a0a2e'); grad.addColorStop(1, '#000000');
            this.ctx.fillStyle = grad; this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
            this.ctx.shadowBlur = 20; this.ctx.shadowColor = '#00ffcc'; this.ctx.strokeStyle = '#00ffcc'; this.ctx.lineWidth = 4;
            this.ctx.beginPath(); this.ctx.moveTo(10, 0); this.ctx.lineTo(10, this.canvas.height); this.ctx.stroke();
            this.ctx.beginPath(); this.ctx.moveTo(this.canvas.width - 10, 0); this.ctx.lineTo(this.canvas.width - 10, this.canvas.height); this.ctx.stroke();
            const horizonY = this.canvas.height * 0.75; this.ctx.shadowBlur = 50; this.ctx.shadowColor = '#ff00ff'; this.ctx.strokeStyle = '#ff00ff';
            this.ctx.beginPath(); this.ctx.moveTo(0, horizonY); this.ctx.lineTo(this.canvas.width, horizonY); this.ctx.stroke(); this.ctx.shadowBlur = 0;
        },

draw: function() {
            this.drawBackground();
            for (let i = 0; i < this.targets.length; i++) {
                let t = this.targets[i]; if (t.state === 'shot') continue;
                this.ctx.save(); this.ctx.translate(t.x, t.y); this.ctx.rotate(Math.sin(Date.now() / 100) * 0.1);
                this.ctx.font = `${t.r * 1.8}px Arial`; this.ctx.textAlign = 'center'; this.ctx.textBaseline = 'middle';
                this.ctx.shadowBlur = 20; this.ctx.shadowColor = t.type === 'bag' ? '#ffcc00' : '#00ffcc';
                this.ctx.fillText(t.type === 'bag' ? '💰' : '💎', 0, 0); this.ctx.restore();
            }
            for (let i = 0; i < this.particles.length; i++) {
                let p = this.particles[i]; this.ctx.fillStyle = p.color; this.ctx.globalAlpha = Math.max(0, p.life);
                this.ctx.shadowBlur = 15; this.ctx.shadowColor = p.color; this.ctx.beginPath(); this.ctx.arc(p.x, p.y, 4 + (p.life * 4), 0, Math.PI*2); this.ctx.fill();
            }
            this.ctx.shadowBlur = 0; this.ctx.globalAlpha = 1.0;
            for (let i = 0; i < this.texts.length; i++) {
                let txt = this.texts[i]; this.ctx.globalAlpha = Math.max(0, Math.min(1, txt.life));
                this.ctx.fillStyle = txt.color; this.ctx.font = 'bold 36px Arial'; this.ctx.textAlign = 'center';
                this.ctx.shadowBlur = 10; this.ctx.shadowColor = txt.color; this.ctx.fillText(txt.text, txt.x, txt.y);
            }
            this.ctx.shadowBlur = 0; this.ctx.globalAlpha = 1.0;
        },

loop: function() {
            if (this.state === 'PLAYING') this.update();
            this.draw();
            if (this.state !== 'GAMEOVER') this.animId = requestAnimationFrame(() => this.loop());
        }
    };