API tools faq
paste
XTaylorSpenceX

Lattice Labyrinth Legends

XTaylorSpenceX
Oct 1st, 2025
82
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 26.63 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>Lattice Labyrinth Legends - 2D</title>
  7.     <style>
  8.         * {
  9.             margin: 0;
  10.             padding: 0;
  11.             box-sizing: border-box;
  12.         }
  13.  
  14.         body {
  15.             background: linear-gradient(135deg, #0a0014, #1a0033, #0a0014);
  16.             background-size: 400% 400%;
  17.             animation: galaxyShift 20s ease infinite;
  18.             color: #fff;
  19.             font-family: 'Courier New', monospace;
  20.             overflow: hidden;
  21.             display: flex;
  22.             justify-content: center;
  23.             align-items: center;
  24.             min-height: 100vh;
  25.         }
  26.  
  27.         @keyframes galaxyShift {
  28.             0%, 100% { background-position: 0% 50%; }
  29.             50% { background-position: 100% 50%; }
  30.         }
  31.  
  32.         #gameContainer {
  33.             position: relative;
  34.             display: flex;
  35.             flex-direction: column;
  36.             align-items: center;
  37.             gap: 20px;
  38.         }
  39.  
  40.         #labyrinthWrapper {
  41.             position: relative;
  42.             padding: 20px;
  43.             background: rgba(0, 0, 0, 0.3);
  44.             border: 2px solid rgba(0, 255, 255, 0.2);
  45.             border-radius: 10px;
  46.             box-shadow: 0 0 30px rgba(0, 255, 255, 0.2);
  47.         }
  48.  
  49.         #labyrinth {
  50.             position: relative;
  51.             width: 550px;
  52.             height: 550px;
  53.             display: grid;
  54.             grid-template-columns: repeat(11, 1fr);
  55.             grid-template-rows: repeat(11, 1fr);
  56.             gap: 0;
  57.         }
  58.  
  59.         .latticeNode {
  60.             width: 50px;
  61.             height: 50px;
  62.             border: 1px solid rgba(0, 255, 255, 0.2);
  63.             background: rgba(0, 20, 40, 0.5);
  64.             position: relative;
  65.             transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  66.         }
  67.  
  68.         .latticeNode.active {
  69.             background: radial-gradient(circle at center, rgba(0, 255, 255, 0.2), rgba(0, 255, 255, 0.05));
  70.             border-color: #00ffff;
  71.             box-shadow:
  72.                 0 0 15px rgba(0, 255, 255, 0.4),
  73.                 inset 0 0 10px rgba(0, 255, 255, 0.2);
  74.             animation: nodePulse 2s ease-in-out infinite;
  75.         }
  76.  
  77.         @keyframes nodePulse {
  78.             0%, 100% {
  79.                 border-color: #00ffff;
  80.                 box-shadow:
  81.                     0 0 15px rgba(0, 255, 255, 0.4),
  82.                     inset 0 0 10px rgba(0, 255, 255, 0.2);
  83.             }
  84.             50% {
  85.                 border-color: #00ff88;
  86.                 box-shadow:
  87.                     0 0 25px rgba(0, 255, 255, 0.6),
  88.                     inset 0 0 15px rgba(0, 255, 255, 0.3);
  89.             }
  90.         }
  91.  
  92.         .latticeNode.blocked {
  93.             background: radial-gradient(circle at center, rgba(255, 0, 102, 0.2), rgba(255, 0, 102, 0.05));
  94.             border-color: #ff0066;
  95.             box-shadow:
  96.                 0 0 10px rgba(255, 0, 102, 0.3),
  97.                 inset 0 0 5px rgba(255, 0, 102, 0.2);
  98.         }
  99.  
  100.         .latticeNode.start {
  101.             background: radial-gradient(circle at center, rgba(0, 255, 136, 0.3), rgba(0, 255, 136, 0.1)) !important;
  102.             border: 2px solid #00ff88 !important;
  103.             box-shadow:
  104.                 0 0 20px rgba(0, 255, 136, 0.5),
  105.                 inset 0 0 15px rgba(0, 255, 136, 0.3) !important;
  106.         }
  107.  
  108.         .latticeNode.end {
  109.             background: radial-gradient(circle at center, rgba(255, 215, 0, 0.3), rgba(255, 215, 0, 0.1)) !important;
  110.             border: 2px solid #ffd700 !important;
  111.             box-shadow:
  112.                 0 0 20px rgba(255, 215, 0, 0.5),
  113.                 inset 0 0 15px rgba(255, 215, 0, 0.3) !important;
  114.             animation: endPulse 1s ease-in-out infinite;
  115.         }
  116.  
  117.         @keyframes endPulse {
  118.             0%, 100% { transform: scale(1); }
  119.             50% { transform: scale(1.05); }
  120.         }
  121.  
  122.         #player {
  123.             position: absolute;
  124.             width: 30px;
  125.             height: 30px;
  126.             background: radial-gradient(circle at center, #ffffff, #00ff88, #00ff88);
  127.             border-radius: 50%;
  128.             box-shadow:
  129.                 0 0 20px #00ff88,
  130.                 0 0 40px #00ff88,
  131.                 0 0 60px rgba(0, 255, 136, 0.5),
  132.                 inset 0 0 15px rgba(255, 255, 255, 0.8);
  133.             z-index: 10;
  134.             transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  135.             animation: playerGlow 1.5s ease-in-out infinite;
  136.             pointer-events: none;
  137.         }
  138.  
  139.         @keyframes playerGlow {
  140.             0%, 100% {
  141.                 box-shadow:
  142.                     0 0 20px #00ff88,
  143.                     0 0 40px #00ff88,
  144.                     0 0 60px rgba(0, 255, 136, 0.5),
  145.                     inset 0 0 15px rgba(255, 255, 255, 0.8);
  146.             }
  147.             50% {
  148.                 box-shadow:
  149.                     0 0 30px #00ff88,
  150.                     0 0 50px #00ff88,
  151.                     0 0 80px rgba(0, 255, 136, 0.7),
  152.                     inset 0 0 20px rgba(255, 255, 255, 1);
  153.             }
  154.         }
  155.  
  156.         .guardian {
  157.             position: absolute;
  158.             width: 35px;
  159.             height: 35px;
  160.             pointer-events: none;
  161.             z-index: 5;
  162.             opacity: 0;
  163.             transition: opacity 0.5s;
  164.         }
  165.  
  166.         .guardian.visible {
  167.             opacity: 1;
  168.             animation: guardianFloat 3s ease-in-out infinite;
  169.         }
  170.  
  171.         .guardian::before {
  172.             content: '◈';
  173.             font-size: 35px;
  174.             color: #ff00ff;
  175.             text-shadow:
  176.                 0 0 15px #ff00ff,
  177.                 0 0 30px #ff00ff,
  178.                 0 0 45px rgba(255, 0, 255, 0.5);
  179.             display: block;
  180.             animation: guardianSpin 4s linear infinite;
  181.         }
  182.  
  183.         @keyframes guardianFloat {
  184.             0%, 100% { transform: translateY(0); }
  185.             50% { transform: translateY(-5px); }
  186.         }
  187.  
  188.         @keyframes guardianSpin {
  189.             from { transform: rotate(0deg); }
  190.             to { transform: rotate(360deg); }
  191.         }
  192.  
  193.         #hud {
  194.             display: flex;
  195.             gap: 30px;
  196.             align-items: center;
  197.             background: rgba(0, 0, 0, 0.7);
  198.             padding: 15px 25px;
  199.             border: 1px solid #00ffff;
  200.             border-radius: 5px;
  201.             box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
  202.         }
  203.  
  204.         .hudItem {
  205.             font-size: 14px;
  206.             color: #00ffff;
  207.             text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
  208.             white-space: nowrap;
  209.         }
  210.  
  211.         .hudItem span {
  212.             color: #00ff88;
  213.             font-weight: bold;
  214.         }
  215.  
  216.         #cycleIndicator {
  217.             width: 150px;
  218.             height: 8px;
  219.             background: rgba(0, 0, 0, 0.8);
  220.             border: 1px solid #00ffff;
  221.             border-radius: 4px;
  222.             position: relative;
  223.             overflow: hidden;
  224.         }
  225.  
  226.         #cycleBar {
  227.             height: 100%;
  228.             background: linear-gradient(90deg, #00ff88, #00ffff);
  229.             width: 0%;
  230.             transition: width 0.1s linear;
  231.             box-shadow: 0 0 10px rgba(0, 255, 255, 0.8);
  232.         }
  233.  
  234.         #message {
  235.             position: fixed;
  236.             top: 20%;
  237.             left: 50%;
  238.             transform: translate(-50%, -50%);
  239.             font-size: 28px;
  240.             font-weight: bold;
  241.             color: #fff;
  242.             text-align: center;
  243.             text-shadow:
  244.                 0 0 20px rgba(255, 255, 255, 0.8),
  245.                 0 0 40px rgba(0, 255, 255, 0.6);
  246.             opacity: 0;
  247.             transition: opacity 0.5s;
  248.             z-index: 200;
  249.             pointer-events: none;
  250.         }
  251.  
  252.         #message.show {
  253.             opacity: 1;
  254.         }
  255.  
  256.         .particle {
  257.             position: absolute;
  258.             width: 3px;
  259.             height: 3px;
  260.             background: #00ffff;
  261.             border-radius: 50%;
  262.             pointer-events: none;
  263.             opacity: 0.6;
  264.             animation: particleDrift 4s linear infinite;
  265.         }
  266.  
  267.         @keyframes particleDrift {
  268.             0% {
  269.                 transform: translate(0, 0);
  270.                 opacity: 0;
  271.             }
  272.             10% {
  273.                 opacity: 0.6;
  274.             }
  275.             90% {
  276.                 opacity: 0.6;
  277.             }
  278.             100% {
  279.                 transform: translate(var(--drift-x), -100px);
  280.                 opacity: 0;
  281.             }
  282.         }
  283.  
  284.         #controls {
  285.             background: rgba(0, 0, 0, 0.7);
  286.             padding: 10px 20px;
  287.             border: 1px solid #00ffff;
  288.             border-radius: 5px;
  289.             text-align: center;
  290.         }
  291.  
  292.         .controlInfo {
  293.             color: #00ffff;
  294.             font-size: 12px;
  295.             margin: 3px;
  296.         }
  297.  
  298.         .pathIndicator {
  299.             position: absolute;
  300.             width: 100%;
  301.             height: 100%;
  302.             pointer-events: none;
  303.         }
  304.  
  305.         .pathIndicator::after {
  306.             content: '';
  307.             position: absolute;
  308.             top: 50%;
  309.             left: 50%;
  310.             transform: translate(-50%, -50%);
  311.             width: 10px;
  312.             height: 10px;
  313.             background: rgba(0, 255, 255, 0.5);
  314.             border-radius: 50%;
  315.             animation: pathDot 2s ease-in-out infinite;
  316.         }
  317.  
  318.         @keyframes pathDot {
  319.             0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
  320.             50% { transform: translate(-50%, -50%) scale(1.5); opacity: 0.8; }
  321.         }
  322.     </style>
  323. </head>
  324. <body>
  325.     <div id="gameContainer">
  326.         <div id="hud">
  327.             <div class="hudItem">ROUND: <span id="round">1</span></div>
  328.             <div class="hudItem">CRYSTALS: <span id="score">0</span></div>
  329.             <div class="hudItem">SHIFT CYCLE:</div>
  330.             <div id="cycleIndicator">
  331.                 <div id="cycleBar"></div>
  332.             </div>
  333.             <div class="hudItem">MOVES: <span id="moves">0</span></div>
  334.         </div>
  335.  
  336.         <div id="labyrinthWrapper">
  337.             <div id="labyrinth"></div>
  338.             <div id="player"></div>
  339.         </div>
  340.  
  341.         <div id="controls">
  342.             <div class="controlInfo">↑↓←→ or WASD to move | Watch the shift cycle!</div>
  343.             <div class="controlInfo">Navigate from GREEN (top-left) to GOLD (bottom-right)</div>
  344.         </div>
  345.  
  346.         <div id="message"></div>
  347.     </div>
  348.  
  349.     <script>
  350.         class LatticeLabyrinth {
  351.             constructor() {
  352.                 this.gridSize = 11;
  353.                 this.nodes = [];
  354.                 this.playerPos = { x: 0, y: 0 };
  355.                 this.startPos = { x: 0, y: 0 };
  356.                 this.endPos = { x: 10, y: 10 };
  357.                 this.score = 0;
  358.                 this.round = 1;
  359.                 this.moves = 0;
  360.                 this.cycleTime = 4000;
  361.                 this.currentCycle = 0;
  362.                 this.guardians = [];
  363.                 this.particles = [];
  364.                 this.shiftTimer = null;
  365.                 this.init();
  366.             }
  367.  
  368.             init() {
  369.                 this.createLattice();
  370.                 this.createGuardians();
  371.                 this.setupControls();
  372.                 this.startCycles();
  373.                 this.updatePlayerPosition();
  374.                 this.createParticleEffects();
  375.                 this.showMessage("Navigate to the GOLDEN EXIT!", 3000);
  376.             }
  377.  
  378.             createLattice() {
  379.                 const container = document.getElementById('labyrinth');
  380.                 container.innerHTML = '';
  381.  
  382.                 for (let y = 0; y < this.gridSize; y++) {
  383.                    this.nodes[y] = [];
  384.                    for (let x = 0; x < this.gridSize; x++) {
  385.                        const node = document.createElement('div');
  386.                        node.className = 'latticeNode';
  387.                        
  388.                        // Create initial maze pattern
  389.                        const isActive = this.generateInitialMaze(x, y);
  390.                        
  391.                        this.nodes[y][x] = {
  392.                            element: node,
  393.                            active: isActive,
  394.                            x, y
  395.                        };
  396.  
  397.                        if (isActive) {
  398.                            node.classList.add('active');
  399.                        } else {
  400.                            node.classList.add('blocked');
  401.                        }
  402.  
  403.                        // Mark start and end positions
  404.                        if (x === this.startPos.x && y === this.startPos.y) {
  405.                            node.classList.add('start');
  406.                            this.nodes[y][x].active = true;
  407.                        }
  408.                        if (x === this.endPos.x && y === this.endPos.y) {
  409.                            node.classList.add('end');
  410.                            this.nodes[y][x].active = true;
  411.                        }
  412.  
  413.                        container.appendChild(node);
  414.                    }
  415.                }
  416.  
  417.                // Ensure there's always a path
  418.                this.ensurePathExists();
  419.            }
  421.            generateInitialMaze(x, y) {
  422.                // Create an interesting initial pattern
  423.                const pattern = (x + y) % 3;
  424.                const diagonal = Math.abs(x - y) < 2;
  425.                const cross = (x === 5 || y === 5);
  426.                
  427.                // Combine patterns for variety
  428.                return pattern !== 0 || diagonal || cross || Math.random() > 0.3;
  429.             }
  430.  
  431.             ensurePathExists() {
  432.                 // Always ensure start and end are connected
  433.                 const path = this.findPath(this.startPos, this.endPos);
  434.                 if (!path) {
  435.                     // Create a simple guaranteed path
  436.                     for (let i = 0; i <= 10; i++) {
  437.                        this.nodes[i][i].active = true;
  438.                        this.nodes[i][i].element.classList.remove('blocked');
  439.                        this.nodes[i][i].element.classList.add('active');
  440.                    }
  441.                }
  442.            }
  443.  
  444.            findPath(start, end) {
  445.                // Simple pathfinding check (BFS)
  446.                const queue = [start];
  447.                const visited = new Set([`${start.x},${start.y}`]);
  448.  
  449.                while (queue.length > 0) {
  450.                     const current = queue.shift();
  451.                    
  452.                     if (current.x === end.x && current.y === end.y) {
  453.                        return true;
  454.                     }
  455.  
  456.                     const neighbors = [
  457.                         { x: current.x + 1, y: current.y },
  458.                         { x: current.x - 1, y: current.y },
  459.                         { x: current.x, y: current.y + 1 },
  460.                         { x: current.x, y: current.y - 1 }
  461.                     ];
  462.  
  463.                     for (const neighbor of neighbors) {
  464.                         const key = `${neighbor.x},${neighbor.y}`;
  465.                         if (neighbor.x >= 0 && neighbor.x < this.gridSize &&
  466.                            neighbor.y >= 0 && neighbor.y < this.gridSize &&
  467.                            !visited.has(key) &&
  468.                            this.nodes[neighbor.y][neighbor.x].active) {
  469.                            visited.add(key);
  470.                             queue.push(neighbor);
  471.                         }
  472.                     }
  473.                 }
  474.                 return false;
  475.             }
  476.  
  477.             createGuardians() {
  478.                 const positions = [
  479.                     { x: 5, y: 5 },
  480.                     { x: 3, y: 7 },
  481.                     { x: 7, y: 3 },
  482.                     { x: 8, y: 8 }
  483.                 ];
  484.  
  485.                 this.guardians = [];
  486.                 positions.forEach(pos => {
  487.                     const guardian = document.createElement('div');
  488.                     guardian.className = 'guardian';
  489.                     const node = this.nodes[pos.y][pos.x].element;
  490.                     const rect = node.getBoundingClientRect();
  491.                     const labRect = document.getElementById('labyrinth').getBoundingClientRect();
  492.                    
  493.                     guardian.style.left = `${rect.left - labRect.left + 7.5}px`;
  494.                     guardian.style.top = `${rect.top - labRect.top + 7.5}px`;
  495.                    
  496.                     document.getElementById('labyrinthWrapper').appendChild(guardian);
  497.                     this.guardians.push({ element: guardian, x: pos.x, y: pos.y });
  498.                 });
  499.             }
  500.  
  501.             createParticleEffects() {
  502.                 setInterval(() => {
  503.                     if (this.particles.length < 15) {
  504.                        const particle = document.createElement('div');
  505.                        particle.className = 'particle';
  506.                        const labyrinth = document.getElementById('labyrinthWrapper');
  507.                        
  508.                        particle.style.left = `${Math.random() * 550 + 20}px`;
  509.                        particle.style.top = `${550 + 20}px`;
  510.                        particle.style.setProperty('--drift-x', `${(Math.random() - 0.5) * 100}px`);
  511.                        
  512.                        labyrinth.appendChild(particle);
  513.                        this.particles.push(particle);
  514.  
  515.                        setTimeout(() => {
  516.                             particle.remove();
  517.                             this.particles = this.particles.filter(p => p !== particle);
  518.                         }, 4000);
  519.                     }
  520.                 }, 300);
  521.             }
  522.  
  523.             startCycles() {
  524.                 // Shift the maze periodically
  525.                 this.shiftTimer = setInterval(() => {
  526.                     this.shiftLattice();
  527.                     this.currentCycle++;
  528.                 }, this.cycleTime);
  529.  
  530.                 // Update cycle bar animation
  531.                 setInterval(() => {
  532.                     const progress = ((Date.now() % this.cycleTime) / this.cycleTime) * 100;
  533.                     document.getElementById('cycleBar').style.width = `${progress}%`;
  534.                 }, 50);
  535.             }
  536.  
  537.             shiftLattice() {
  538.                 const pattern = this.currentCycle % 5;
  539.                
  540.                 for (let y = 0; y < this.gridSize; y++) {
  541.                    for (let x = 0; x < this.gridSize; x++) {
  542.                        const node = this.nodes[y][x];
  543.                        const prevActive = node.active;
  544.                        
  545.                        // Skip start and end positions
  546.                        if ((x === this.startPos.x && y === this.startPos.y) ||
  547.                            (x === this.endPos.x && y === this.endPos.y)) {
  548.                            continue;
  549.                        }
  550.  
  551.                        switch(pattern) {
  552.                            case 0: // Horizontal wave
  553.                                node.active = Math.sin((x + this.currentCycle * 0.5)) > -0.3;
  554.                                 break;
  555.                             case 1: // Vertical wave
  556.                                 node.active = Math.sin((y + this.currentCycle * 0.5)) > -0.3;
  557.                                 break;
  558.                             case 2: // Spiral pattern
  559.                                 const dist = Math.sqrt(Math.pow(x - 5, 2) + Math.pow(y - 5, 2));
  560.                                 node.active = Math.sin(dist - this.currentCycle * 0.5) > -0.2;
  561.                                 break;
  562.                             case 3: // Checkerboard shift
  563.                                 node.active = ((x + y + this.currentCycle) % 3) !== 0;
  564.                                 break;
  565.                             case 4: // Random controlled chaos
  566.                                 if (Math.random() > 0.8) {
  567.                                     node.active = !node.active;
  568.                                 } else if (Math.random() > 0.6) {
  569.                                     node.active = true;
  570.                                 }
  571.                                 break;
  572.                         }
  573.  
  574.                         // Keep player's current position active
  575.                         if (x === this.playerPos.x && y === this.playerPos.y) {
  576.                            node.active = true;
  577.                         }
  578.  
  579.                         // Update visuals
  580.                         if (node.active !== prevActive) {
  581.                             if (node.active) {
  582.                                 node.element.classList.remove('blocked');
  583.                                 node.element.classList.add('active');
  584.                             } else {
  585.                                 node.element.classList.remove('active');
  586.                                 node.element.classList.add('blocked');
  587.                             }
  588.                         }
  589.                     }
  590.                 }
  591.  
  592.                 // Ensure path still exists
  593.                 this.ensurePathExists();
  594.                 this.updateGuardians();
  595.             }
  596.  
  597.             updateGuardians() {
  598.                 this.guardians.forEach(guardian => {
  599.                     const distance = Math.abs(guardian.x - this.playerPos.x) +
  600.                                    Math.abs(guardian.y - this.playerPos.y);
  601.                    
  602.                     if (distance < 3) {
  603.                        guardian.element.classList.add('visible');
  604.                        if (distance === 0) {
  605.                            this.collectCrystal();
  606.                            // Move guardian to new position
  607.                            guardian.x = Math.floor(Math.random() * this.gridSize);
  608.                            guardian.y = Math.floor(Math.random() * this.gridSize);
  609.                            const node = this.nodes[guardian.y][guardian.x].element;
  610.                            const rect = node.getBoundingClientRect();
  611.                            const labRect = document.getElementById('labyrinth').getBoundingClientRect();
  612.                            guardian.element.style.left = `${rect.left - labRect.left + 7.5}px`;
  613.                            guardian.element.style.top = `${rect.top - labRect.top + 7.5}px`;
  614.                        }
  615.                    } else {
  616.                        guardian.element.classList.remove('visible');
  617.                    }
  618.                });
  619.            }
  620.  
  621.            collectCrystal() {
  622.                this.score += 25;
  623.                document.getElementById('score').textContent = this.score;
  624.                this.showMessage("Memory Crystal +25!", 1500);
  625.            }
  626.  
  627.            setupControls() {
  628.                document.addEventListener('keydown', (e) => {
  629.                     let newX = this.playerPos.x;
  630.                     let newY = this.playerPos.y;
  631.  
  632.                     switch(e.key.toLowerCase()) {
  633.                         case 'arrowup':
  634.                         case 'w':
  635.                             newY--;
  636.                             break;
  637.                         case 'arrowdown':
  638.                         case 's':
  639.                             newY++;
  640.                             break;
  641.                         case 'arrowleft':
  642.                         case 'a':
  643.                             newX--;
  644.                             break;
  645.                         case 'arrowright':
  646.                         case 'd':
  647.                             newX++;
  648.                             break;
  649.                         default:
  650.                             return;
  651.                     }
  652.  
  653.                     e.preventDefault();
  654.  
  655.                     // Check bounds and if node is active
  656.                     if (newX >= 0 && newX < this.gridSize &&
  657.                        newY >= 0 && newY < this.gridSize &&
  658.                        this.nodes[newY][newX].active) {
  659.                        
  660.                        this.playerPos.x = newX;
  661.                         this.playerPos.y = newY;
  662.                         this.moves++;
  663.                         document.getElementById('moves').textContent = this.moves;
  664.                         this.updatePlayerPosition();
  665.  
  666.                         // Check win condition
  667.                         if (newX === this.endPos.x && newY === this.endPos.y) {
  668.                            this.completeRound();
  669.                         }
  670.                     } else {
  671.                         this.showMessage("Path blocked!", 800);
  672.                     }
  673.                 });
  674.             }
  675.  
  676.             updatePlayerPosition() {
  677.                 const player = document.getElementById('player');
  678.                 const node = this.nodes[this.playerPos.y][this.playerPos.x].element;
  679.                 const rect = node.getBoundingClientRect();
  680.                 const wrapperRect = document.getElementById('labyrinthWrapper').getBoundingClientRect();
  681.                
  682.                 player.style.left = `${rect.left - wrapperRect.left + 10}px`;
  683.                 player.style.top = `${rect.top - wrapperRect.top + 10}px`;
  684.             }
  685.  
  686.             showMessage(text, duration) {
  687.                 const msg = document.getElementById('message');
  688.                 msg.textContent = text;
  689.                 msg.classList.add('show');
  690.                 setTimeout(() => {
  691.                     msg.classList.remove('show');
  692.                 }, duration);
  693.             }
  694.  
  695.             completeRound() {
  696.                 this.score += 100;
  697.                 this.round++;
  698.                 document.getElementById('score').textContent = this.score;
  699.                 document.getElementById('round').textContent = this.round;
  700.                
  701.                 this.showMessage(`ROUND ${this.round - 1} COMPLETE! +100`, 2500);
  702.                
  703.                 setTimeout(() => {
  704.                     // Reset for next round
  705.                     this.playerPos = { x: 0, y: 0 };
  706.                     this.moves = 0;
  707.                     document.getElementById('moves').textContent = this.moves;
  708.                     this.currentCycle = 0;
  709.                    
  710.                     // Make maze progressively harder
  711.                     this.cycleTime = Math.max(2000, this.cycleTime - 200);
  712.                    
  713.                     // Regenerate maze
  714.                     this.createLattice();
  715.                     this.updatePlayerPosition();
  716.                     this.updateGuardians();
  717.                    
  718.                     this.showMessage(`ROUND ${this.round} - BEGIN!`, 2000);
  719.                 }, 2600);
  720.             }
  721.         }
  722.  
  723.         // Initialize the game
  724.         const game = new LatticeLabyrinth();
  725.  
  726.         // Handle window resize
  727.         window.addEventListener('resize', () => {
  728.             game.updatePlayerPosition();
  729.         });
  730.     </script>
  731. </body>
  732. </html>
  733.  
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!