API tools faq
paste
XTaylorSpenceX

Aurora Archive Arena

XTaylorSpenceX
Oct 9th, 2025
54
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 20.12 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Aurora Archive Arena</title>
  7.     <style>
  8.         * {
  9.             margin: 0;
  10.             padding: 0;
  11.             box-sizing: border-box;
  12.         }
  13.  
  14.         body {
  15.             font-family: 'Georgia', serif;
  16.             background: #0a0a0a;
  17.             color: #fff;
  18.             overflow: hidden;
  19.             display: flex;
  20.             justify-content: center;
  21.             align-items: center;
  22.             height: 100vh;
  23.         }
  24.  
  25.         #gameContainer {
  26.             position: relative;
  27.             width: 100%;
  28.             max-width: 1200px;
  29.             height: 100vh;
  30.             max-height: 800px;
  31.         }
  32.  
  33.         #gameCanvas {
  34.             border: 3px solid #4a5568;
  35.             background: #1a1a2e;
  36.             display: block;
  37.             width: 100%;
  38.             height: 100%;
  39.             box-shadow: 0 0 40px rgba(138, 43, 226, 0.5);
  40.         }
  41.  
  42.         .aurora-overlay {
  43.             position: absolute;
  44.             top: 0;
  45.             left: 0;
  46.             right: 0;
  47.             height: 40%;
  48.             pointer-events: none;
  49.             background: linear-gradient(180deg,
  50.                 rgba(0, 255, 200, 0.3) 0%,
  51.                 rgba(138, 43, 226, 0.3) 33%,
  52.                 rgba(0, 150, 255, 0.3) 66%,
  53.                 transparent 100%);
  54.             opacity: 0.6;
  55.             animation: aurora-flow 8s ease-in-out infinite;
  56.             z-index: 1;
  57.         }
  58.  
  59.         @keyframes aurora-flow {
  60.             0%, 100% {
  61.                 background: linear-gradient(180deg,
  62.                     rgba(0, 255, 200, 0.3) 0%,
  63.                     rgba(138, 43, 226, 0.3) 33%,
  64.                     rgba(0, 150, 255, 0.3) 66%,
  65.                     transparent 100%);
  66.             }
  67.             33% {
  68.                 background: linear-gradient(180deg,
  69.                     rgba(138, 43, 226, 0.3) 0%,
  70.                     rgba(0, 150, 255, 0.3) 33%,
  71.                     rgba(255, 100, 200, 0.3) 66%,
  72.                     transparent 100%);
  73.             }
  74.             66% {
  75.                 background: linear-gradient(180deg,
  76.                     rgba(0, 150, 255, 0.3) 0%,
  77.                     rgba(255, 100, 200, 0.3) 33%,
  78.                     rgba(0, 255, 200, 0.3) 66%,
  79.                     transparent 100%);
  80.             }
  81.         }
  82.  
  83.         #ui {
  84.             position: absolute;
  85.             bottom: 20px;
  86.             left: 50%;
  87.             transform: translateX(-50%);
  88.             display: flex;
  89.             gap: 10px;
  90.             z-index: 10;
  91.             background: rgba(0, 0, 0, 0.8);
  92.             padding: 15px;
  93.             border-radius: 10px;
  94.             border: 2px solid #8a2be2;
  95.         }
  96.  
  97.         .spell-btn {
  98.             padding: 12px 20px;
  99.             background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  100.             border: 2px solid #fff;
  101.             color: #fff;
  102.             font-size: 14px;
  103.             font-weight: bold;
  104.             cursor: pointer;
  105.             border-radius: 8px;
  106.             transition: all 0.3s;
  107.             text-transform: uppercase;
  108.             letter-spacing: 1px;
  109.         }
  110.  
  111.         .spell-btn:hover {
  112.             transform: scale(1.05);
  113.             box-shadow: 0 0 20px rgba(138, 43, 226, 0.8);
  114.         }
  115.  
  116.         .spell-btn:active {
  117.             transform: scale(0.95);
  118.         }
  119.  
  120.         .spell-btn.ice { background: linear-gradient(135deg, #00d4ff 0%, #0066ff 100%); }
  121.         .spell-btn.fire { background: linear-gradient(135deg, #ff6b6b 0%, #ff3d00 100%); }
  122.         .spell-btn.wind { background: linear-gradient(135deg, #a8e6cf 0%, #3d9970 100%); }
  123.         .spell-btn.light { background: linear-gradient(135deg, #fffacd 0%, #ffd700 100%); color: #333; }
  124.         .spell-btn.earth { background: linear-gradient(135deg, #8b4513 0%, #654321 100%); }
  125.         .spell-btn.shadow { background: linear-gradient(135deg, #4a4a4a 0%, #1a1a1a 100%); }
  126.  
  127.         #auroraInfo {
  128.             position: absolute;
  129.             top: 20px;
  130.             left: 50%;
  131.             transform: translateX(-50%);
  132.             background: rgba(0, 0, 0, 0.9);
  133.             padding: 15px 30px;
  134.             border-radius: 10px;
  135.             border: 2px solid #8a2be2;
  136.             text-align: center;
  137.             z-index: 10;
  138.             min-width: 300px;
  139.         }
  140.  
  141.         #auroraInfo h3 {
  142.             color: #8a2be2;
  143.             margin-bottom: 10px;
  144.             font-size: 18px;
  145.             text-transform: uppercase;
  146.             letter-spacing: 2px;
  147.         }
  148.  
  149.         #battleLog {
  150.             position: absolute;
  151.             top: 100px;
  152.             right: 20px;
  153.             width: 250px;
  154.             max-height: 300px;
  155.             overflow-y: auto;
  156.             background: rgba(0, 0, 0, 0.9);
  157.             padding: 15px;
  158.             border-radius: 10px;
  159.             border: 2px solid #667eea;
  160.             z-index: 10;
  161.             font-size: 12px;
  162.             line-height: 1.6;
  163.         }
  164.  
  165.         #battleLog::-webkit-scrollbar {
  166.             width: 8px;
  167.         }
  168.  
  169.         #battleLog::-webkit-scrollbar-track {
  170.             background: #1a1a2e;
  171.         }
  172.  
  173.         #battleLog::-webkit-scrollbar-thumb {
  174.             background: #667eea;
  175.             border-radius: 4px;
  176.         }
  177.  
  178.         .log-entry {
  179.             margin-bottom: 8px;
  180.             padding: 5px;
  181.             border-left: 3px solid #8a2be2;
  182.             padding-left: 8px;
  183.         }
  184.  
  185.         .log-player { border-left-color: #00d4ff; }
  186.         .log-enemy { border-left-color: #ff3d00; }
  187.         .log-aurora { border-left-color: #ffd700; background: rgba(255, 215, 0, 0.1); }
  188.  
  189.         #startScreen, #gameOverScreen {
  190.             position: absolute;
  191.             top: 0;
  192.             left: 0;
  193.             right: 0;
  194.             bottom: 0;
  195.             background: rgba(0, 0, 0, 0.95);
  196.             display: flex;
  197.             flex-direction: column;
  198.             justify-content: center;
  199.             align-items: center;
  200.             z-index: 100;
  201.         }
  202.  
  203.         #startScreen h1, #gameOverScreen h1 {
  204.             font-size: 48px;
  205.             margin-bottom: 20px;
  206.             background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  207.             -webkit-background-clip: text;
  208.             -webkit-text-fill-color: transparent;
  209.             background-clip: text;
  210.         }
  211.  
  212.         #startScreen p, #gameOverScreen p {
  213.             font-size: 18px;
  214.             margin-bottom: 30px;
  215.             max-width: 600px;
  216.             text-align: center;
  217.             line-height: 1.6;
  218.         }
  219.  
  220.         .start-btn {
  221.             padding: 15px 40px;
  222.             background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  223.             border: 3px solid #fff;
  224.             color: #fff;
  225.             font-size: 20px;
  226.             font-weight: bold;
  227.             cursor: pointer;
  228.             border-radius: 10px;
  229.             transition: all 0.3s;
  230.             text-transform: uppercase;
  231.             letter-spacing: 2px;
  232.         }
  233.  
  234.         .start-btn:hover {
  235.             transform: scale(1.1);
  236.             box-shadow: 0 0 30px rgba(138, 43, 226, 1);
  237.         }
  238.  
  239.         .hidden {
  240.             display: none !important;
  241.         }
  242.     </style>
  243. </head>
  244. <body>
  245.     <div id="gameContainer">
  246.         <div class="aurora-overlay"></div>
  247.         <canvas id="gameCanvas" width="1200" height="800"></canvas>
  248.        
  249.         <div id="startScreen">
  250.             <h1>⚔️ Aurora Archive Arena ⚔️</h1>
  251.             <p>Battle in a mystical library where northern lights transform magic itself. Ice becomes fire, wind becomes light—adapt your strategy as the aurora shifts!</p>
  252.             <button class="start-btn" onclick="startGame()">Enter the Archive</button>
  253.         </div>
  254.  
  255.         <div id="gameOverScreen" class="hidden">
  256.             <h1 id="gameOverTitle">Victory!</h1>
  257.             <p id="gameOverText">The aurora fades as peace returns to the Archive...</p>
  258.             <button class="start-btn" onclick="resetGame()">Battle Again</button>
  259.         </div>
  260.  
  261.         <div id="auroraInfo" class="hidden">
  262.             <h3>🌌 Aurora Shift 🌌</h3>
  263.             <div id="transformations"></div>
  264.         </div>
  265.  
  266.         <div id="battleLog" class="hidden">
  267.             <strong style="color: #667eea; display: block; margin-bottom: 10px;">📜 Battle Log</strong>
  268.         </div>
  269.  
  270.         <div id="ui" class="hidden">
  271.             <button class="spell-btn ice" onclick="castSpell('ice')">❄️ Ice</button>
  272.             <button class="spell-btn fire" onclick="castSpell('fire')">🔥 Fire</button>
  273.             <button class="spell-btn wind" onclick="castSpell('wind')">💨 Wind</button>
  274.             <button class="spell-btn light" onclick="castSpell('light')">✨ Light</button>
  275.             <button class="spell-btn earth" onclick="castSpell('earth')">🪨 Earth</button>
  276.             <button class="spell-btn shadow" onclick="castSpell('shadow')">🌑 Shadow</button>
  277.         </div>
  278.     </div>
  279.  
  280.     <script>
  281.         const canvas = document.getElementById('gameCanvas');
  282.         const ctx = canvas.getContext('2d');
  283.  
  284.         // Game state
  285.         let gameActive = false;
  286.         let player = { hp: 100, maxHp: 100, x: 200, y: 500 };
  287.         let enemy = { hp: 100, maxHp: 100, x: 1000, y: 500 };
  288.         let auroraTransforms = {};
  289.         let turnCount = 0;
  290.         let particleEffects = [];
  291.         let books = [];
  292.  
  293.         // Spell data
  294.         const spells = {
  295.             ice: { damage: 20, color: '#00d4ff', name: 'Ice' },
  296.             fire: { damage: 25, color: '#ff3d00', name: 'Fire' },
  297.             wind: { damage: 15, color: '#3d9970', name: 'Wind' },
  298.             light: { damage: 22, color: '#ffd700', name: 'Light' },
  299.             earth: { damage: 18, color: '#8b4513', name: 'Earth' },
  300.             shadow: { damage: 23, color: '#4a4a4a', name: 'Shadow' }
  301.         };
  302.  
  303.         const spellTypes = Object.keys(spells);
  304.  
  305.         // Initialize books
  306.         function initBooks() {
  307.             for (let i = 0; i < 20; i++) {
  308.                books.push({
  309.                    x: Math.random() * canvas.width,
  310.                    y: Math.random() * 200 + 50,
  311.                    width: 30 + Math.random() * 20,
  312.                    height: 40 + Math.random() * 20,
  313.                    color: `hsl(${Math.random() * 360}, 50%, 40%)`
  314.                });
  315.            }
  316.        }
  317.  
  318.        // Generate aurora transformations
  319.        function generateAuroraShift() {
  320.            auroraTransforms = {};
  321.            const shuffled = [...spellTypes].sort(() => Math.random() - 0.5);
  322.            
  323.             spellTypes.forEach((spell, i) => {
  324.                 let target = shuffled[i];
  325.                 while (target === spell) {
  326.                     target = spellTypes[Math.floor(Math.random() * spellTypes.length)];
  327.                 }
  328.                 auroraTransforms[spell] = target;
  329.             });
  330.  
  331.             updateAuroraDisplay();
  332.             addLog(`✨ The aurora shifts! Magic transforms...`, 'aurora');
  333.         }
  334.  
  335.         function updateAuroraDisplay() {
  336.             const transformDiv = document.getElementById('transformations');
  337.             transformDiv.innerHTML = '';
  338.            
  339.             for (let [from, to] of Object.entries(auroraTransforms)) {
  340.                 const div = document.createElement('div');
  341.                 div.style.margin = '5px 0';
  342.                 div.innerHTML = `${spells[from].name} → ${spells[to].name}`;
  343.                 div.style.color = spells[to].color;
  344.                 transformDiv.appendChild(div);
  345.             }
  346.         }
  347.  
  348.         function drawBackground() {
  349.             // Library background
  350.             ctx.fillStyle = '#1a1a2e';
  351.             ctx.fillRect(0, 0, canvas.width, canvas.height);
  352.  
  353.             // Bookshelves
  354.             ctx.fillStyle = '#2d2d44';
  355.             ctx.fillRect(0, 0, canvas.width, 250);
  356.             ctx.fillRect(0, 0, 150, canvas.height);
  357.             ctx.fillRect(canvas.width - 150, 0, 150, canvas.height);
  358.  
  359.             // Books
  360.             books.forEach(book => {
  361.                 ctx.fillStyle = book.color;
  362.                 ctx.fillRect(book.x, book.y, book.width, book.height);
  363.                 ctx.strokeStyle = '#000';
  364.                 ctx.lineWidth = 2;
  365.                 ctx.strokeRect(book.x, book.y, book.width, book.height);
  366.             });
  367.  
  368.             // Floor
  369.             ctx.fillStyle = '#16213e';
  370.             ctx.fillRect(0, 650, canvas.width, 150);
  371.            
  372.             // Floor pattern
  373.             ctx.strokeStyle = '#0f3460';
  374.             ctx.lineWidth = 2;
  375.             for (let i = 0; i < canvas.width; i += 50) {
  376.                ctx.beginPath();
  377.                ctx.moveTo(i, 650);
  378.                ctx.lineTo(i, 800);
  379.                ctx.stroke();
  380.            }
  381.        }
  382.  
  383.        function drawCharacter(char, isPlayer) {
  384.            // Body
  385.            ctx.fillStyle = isPlayer ? '#667eea' : '#e74c3c';
  386.            ctx.beginPath();
  387.            ctx.arc(char.x, char.y, 40, 0, Math.PI * 2);
  388.            ctx.fill();
  389.  
  390.            // Robe
  391.            ctx.fillStyle = isPlayer ? '#764ba2' : '#c0392b';
  392.            ctx.beginPath();
  393.            ctx.moveTo(char.x - 40, char.y + 20);
  394.            ctx.lineTo(char.x - 30, char.y + 100);
  395.            ctx.lineTo(char.x + 30, char.y + 100);
  396.            ctx.lineTo(char.x + 40, char.y + 20);
  397.            ctx.closePath();
  398.            ctx.fill();
  399.  
  400.            // Eyes
  401.            ctx.fillStyle = '#fff';
  402.            ctx.beginPath();
  403.            ctx.arc(char.x - 15, char.y - 5, 8, 0, Math.PI * 2);
  404.            ctx.arc(char.x + 15, char.y - 5, 8, 0, Math.PI * 2);
  405.            ctx.fill();
  406.  
  407.            ctx.fillStyle = '#000';
  408.            ctx.beginPath();
  409.            ctx.arc(char.x - 15, char.y - 5, 4, 0, Math.PI * 2);
  410.            ctx.arc(char.x + 15, char.y - 5, 4, 0, Math.PI * 2);
  411.            ctx.fill();
  412.  
  413.            // Hat
  414.            ctx.fillStyle = isPlayer ? '#4c3f91' : '#8b0000';
  415.            ctx.beginPath();
  416.            ctx.moveTo(char.x - 35, char.y - 40);
  417.            ctx.lineTo(char.x, char.y - 80);
  418.            ctx.lineTo(char.x + 35, char.y - 40);
  419.            ctx.closePath();
  420.            ctx.fill();
  421.  
  422.            // Hat brim
  423.            ctx.fillRect(char.x - 45, char.y - 40, 90, 8);
  424.  
  425.            // Health bar
  426.            const barWidth = 100;
  427.            const barHeight = 10;
  428.            const barX = char.x - barWidth / 2;
  429.            const barY = char.y - 120;
  430.  
  431.            ctx.fillStyle = '#000';
  432.            ctx.fillRect(barX, barY, barWidth, barHeight);
  433.  
  434.            const hpPercent = char.hp / char.maxHp;
  435.            ctx.fillStyle = hpPercent > 0.5 ? '#00ff00' : hpPercent > 0.25 ? '#ffff00' : '#ff0000';
  436.             ctx.fillRect(barX, barY, barWidth * hpPercent, barHeight);
  437.  
  438.             ctx.strokeStyle = '#fff';
  439.             ctx.lineWidth = 2;
  440.             ctx.strokeRect(barX, barY, barWidth, barHeight);
  441.  
  442.             // HP text
  443.             ctx.fillStyle = '#fff';
  444.             ctx.font = 'bold 14px Georgia';
  445.             ctx.textAlign = 'center';
  446.             ctx.fillText(`${Math.max(0, Math.floor(char.hp))} HP`, char.x, barY - 5);
  447.         }
  448.  
  449.         function createParticle(x, y, color, size = 5) {
  450.             return {
  451.                 x, y, color, size,
  452.                 vx: (Math.random() - 0.5) * 10,
  453.                 vy: (Math.random() - 0.5) * 10,
  454.                 life: 1,
  455.                 decay: 0.02
  456.             };
  457.         }
  458.  
  459.         function updateParticles() {
  460.             particleEffects = particleEffects.filter(p => {
  461.                 p.x += p.vx;
  462.                 p.y += p.vy;
  463.                 p.life -= p.decay;
  464.                
  465.                 ctx.globalAlpha = p.life;
  466.                 ctx.fillStyle = p.color;
  467.                 ctx.beginPath();
  468.                 ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
  469.                 ctx.fill();
  470.                
  471.                 return p.life > 0;
  472.             });
  473.             ctx.globalAlpha = 1;
  474.         }
  475.  
  476.         function castSpell(spellType) {
  477.             if (!gameActive) return;
  478.  
  479.             const originalSpell = spellType;
  480.             const transformedSpell = auroraTransforms[spellType];
  481.             const spell = spells[transformedSpell];
  482.  
  483.             // Create spell particles
  484.             for (let i = 0; i < 20; i++) {
  485.                particleEffects.push(createParticle(player.x, player.y, spell.color, 8));
  486.            }
  487.  
  488.            // Damage enemy
  489.            enemy.hp -= spell.damage;
  490.            addLog(`You cast ${spells[originalSpell].name}! Aurora transforms it to ${spell.name}! ${spell.damage} damage!`, 'player');
  491.  
  492.            // Enemy turn
  493.            setTimeout(() => {
  494.                 if (enemy.hp > 0) {
  495.                     enemyTurn();
  496.                 } else {
  497.                     endGame(true);
  498.                 }
  499.             }, 1000);
  500.  
  501.             turnCount++;
  502.             if (turnCount % 3 === 0) {
  503.                 setTimeout(generateAuroraShift, 1500);
  504.             }
  505.         }
  506.  
  507.         function enemyTurn() {
  508.             const randomSpell = spellTypes[Math.floor(Math.random() * spellTypes.length)];
  509.             const originalSpell = randomSpell;
  510.             const transformedSpell = auroraTransforms[randomSpell];
  511.             const spell = spells[transformedSpell];
  512.  
  513.             // Create spell particles
  514.             for (let i = 0; i < 20; i++) {
  515.                particleEffects.push(createParticle(enemy.x, enemy.y, spell.color, 8));
  516.            }
  517.  
  518.            player.hp -= spell.damage;
  519.            addLog(`Enemy casts ${spells[originalSpell].name}! Transforms to ${spell.name}! ${spell.damage} damage!`, 'enemy');
  520.  
  521.            if (player.hp <= 0) {
  522.                endGame(false);
  523.            }
  524.        }
  525.  
  526.        function addLog(text, type = '') {
  527.            const log = document.getElementById('battleLog');
  528.            const entry = document.createElement('div');
  529.            entry.className = `log-entry log-${type}`;
  530.            entry.textContent = text;
  531.            log.insertBefore(entry, log.firstChild);
  532.  
  533.            // Keep only last 15 entries
  534.            while (log.children.length > 16) {
  535.                 log.removeChild(log.lastChild);
  536.             }
  537.         }
  538.  
  539.         function gameLoop() {
  540.             if (!gameActive) return;
  541.  
  542.             drawBackground();
  543.             drawCharacter(player, true);
  544.             drawCharacter(enemy, false);
  545.             updateParticles();
  546.  
  547.             requestAnimationFrame(gameLoop);
  548.         }
  549.  
  550.         function startGame() {
  551.             document.getElementById('startScreen').classList.add('hidden');
  552.             document.getElementById('ui').classList.remove('hidden');
  553.             document.getElementById('auroraInfo').classList.remove('hidden');
  554.             document.getElementById('battleLog').classList.remove('hidden');
  555.  
  556.             player.hp = player.maxHp;
  557.             enemy.hp = enemy.maxHp;
  558.             gameActive = true;
  559.             turnCount = 0;
  560.             particleEffects = [];
  561.  
  562.             initBooks();
  563.             generateAuroraShift();
  564.             addLog('Battle begins! The aurora illuminates the archive...', 'aurora');
  565.             gameLoop();
  566.         }
  567.  
  568.         function endGame(playerWon) {
  569.             gameActive = false;
  570.             const screen = document.getElementById('gameOverScreen');
  571.             const title = document.getElementById('gameOverTitle');
  572.             const text = document.getElementById('gameOverText');
  573.  
  574.             if (playerWon) {
  575.                 title.textContent = '🎉 Victory! 🎉';
  576.                 text.textContent = 'The enemy mage falls! The archive is safe, and the aurora dances in celebration!';
  577.             } else {
  578.                 title.textContent = '💀 Defeat 💀';
  579.                 text.textContent = 'The aurora dims as you fall... But knowledge endures. Try again, brave mage!';
  580.             }
  581.  
  582.             screen.classList.remove('hidden');
  583.         }
  584.  
  585.         function resetGame() {
  586.             document.getElementById('gameOverScreen').classList.add('hidden');
  587.             document.getElementById('battleLog').innerHTML = '<strong style="color: #667eea; display: block; margin-bottom: 10px;">📜 Battle Log</strong>';
  588.             startGame();
  589.         }
  590.     </script>
  591. </body>
  592. </html>
  593.  
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!