API tools faq
paste
XTaylorSpenceX

Chrono Cipher Chamber

XTaylorSpenceX
Oct 9th, 2025
62
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 19.67 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>Chrono Cipher Chamber</title>
  7.     <style>
  8.         * {
  9.             margin: 0;
  10.             padding: 0;
  11.             box-sizing: border-box;
  12.         }
  13.  
  14.         body {
  15.             font-family: 'Courier New', monospace;
  16.             background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 100%);
  17.             display: flex;
  18.             justify-content: center;
  19.             align-items: center;
  20.             min-height: 100vh;
  21.             overflow: hidden;
  22.             color: #fff;
  23.         }
  24.  
  25.         #gameContainer {
  26.             position: relative;
  27.             width: 900px;
  28.             max-width: 95vw;
  29.             background: rgba(20, 20, 40, 0.9);
  30.             border: 3px solid #00ffff;
  31.             border-radius: 20px;
  32.             padding: 30px;
  33.             box-shadow: 0 0 40px rgba(0, 255, 255, 0.5),
  34.                         inset 0 0 30px rgba(0, 100, 255, 0.2);
  35.         }
  36.  
  37.         #title {
  38.             text-align: center;
  39.             font-size: 2.5em;
  40.             color: #00ffff;
  41.             text-shadow: 0 0 20px rgba(0, 255, 255, 0.8);
  42.             margin-bottom: 20px;
  43.             letter-spacing: 3px;
  44.         }
  45.  
  46.         #hud {
  47.             display: flex;
  48.             justify-content: space-between;
  49.             margin-bottom: 20px;
  50.             font-size: 1.2em;
  51.             padding: 15px;
  52.             background: rgba(0, 0, 0, 0.5);
  53.             border-radius: 10px;
  54.             border: 2px solid #00aaff;
  55.         }
  56.  
  57.         .hud-item {
  58.             display: flex;
  59.             flex-direction: column;
  60.             align-items: center;
  61.         }
  62.  
  63.         .hud-label {
  64.             color: #00aaff;
  65.             font-size: 0.8em;
  66.             margin-bottom: 5px;
  67.         }
  68.  
  69.         .hud-value {
  70.             color: #00ffff;
  71.             font-size: 1.3em;
  72.             font-weight: bold;
  73.             text-shadow: 0 0 10px rgba(0, 255, 255, 0.6);
  74.         }
  75.  
  76.         #canvas {
  77.             display: block;
  78.             width: 100%;
  79.             height: 500px;
  80.             background: rgba(0, 0, 0, 0.7);
  81.             border: 2px solid #00aaff;
  82.             border-radius: 10px;
  83.             cursor: pointer;
  84.             box-shadow: inset 0 0 30px rgba(0, 150, 255, 0.3);
  85.         }
  86.  
  87.         #instructions {
  88.             margin-top: 20px;
  89.             text-align: center;
  90.             color: #00aaff;
  91.             font-size: 0.9em;
  92.             line-height: 1.6;
  93.             padding: 15px;
  94.             background: rgba(0, 0, 0, 0.4);
  95.             border-radius: 10px;
  96.             border: 1px solid #004488;
  97.         }
  98.  
  99.         .pulse {
  100.             animation: pulse 2s ease-in-out infinite;
  101.         }
  102.  
  103.         @keyframes pulse {
  104.             0%, 100% { opacity: 0.6; transform: scale(1); }
  105.             50% { opacity: 1; transform: scale(1.05); }
  106.         }
  107.  
  108.         .glow {
  109.             animation: glow 1.5s ease-in-out infinite alternate;
  110.         }
  111.  
  112.         @keyframes glow {
  113.             from { text-shadow: 0 0 10px rgba(0, 255, 255, 0.5); }
  114.             to { text-shadow: 0 0 20px rgba(0, 255, 255, 1), 0 0 30px rgba(0, 255, 255, 0.8); }
  115.         }
  116.  
  117.         #modal {
  118.             position: absolute;
  119.             top: 50%;
  120.             left: 50%;
  121.             transform: translate(-50%, -50%);
  122.             background: rgba(10, 10, 30, 0.98);
  123.             border: 3px solid #00ffff;
  124.             border-radius: 15px;
  125.             padding: 40px;
  126.             text-align: center;
  127.             box-shadow: 0 0 50px rgba(0, 255, 255, 0.8);
  128.             z-index: 100;
  129.             min-width: 400px;
  130.         }
  131.  
  132.         #modal h2 {
  133.             color: #00ffff;
  134.             font-size: 2em;
  135.             margin-bottom: 20px;
  136.             text-shadow: 0 0 15px rgba(0, 255, 255, 0.8);
  137.         }
  138.  
  139.         #modal p {
  140.             color: #00aaff;
  141.             font-size: 1.2em;
  142.             margin-bottom: 15px;
  143.         }
  144.  
  145.         #modal button {
  146.             background: linear-gradient(135deg, #00aaff 0%, #0088ff 100%);
  147.             color: white;
  148.             border: none;
  149.             padding: 15px 40px;
  150.             font-size: 1.2em;
  151.             border-radius: 10px;
  152.             cursor: pointer;
  153.             margin: 10px;
  154.             font-family: 'Courier New', monospace;
  155.             font-weight: bold;
  156.             box-shadow: 0 0 20px rgba(0, 150, 255, 0.6);
  157.             transition: all 0.3s;
  158.         }
  159.  
  160.         #modal button:hover {
  161.             background: linear-gradient(135deg, #00ccff 0%, #00aaff 100%);
  162.             box-shadow: 0 0 30px rgba(0, 200, 255, 0.9);
  163.             transform: scale(1.05);
  164.         }
  165.  
  166.         .hidden {
  167.             display: none;
  168.         }
  169.  
  170.         #timeWarning {
  171.             position: absolute;
  172.             top: 10px;
  173.             left: 50%;
  174.             transform: translateX(-50%);
  175.             background: rgba(255, 0, 0, 0.8);
  176.             color: white;
  177.             padding: 10px 30px;
  178.             border-radius: 10px;
  179.             font-size: 1.2em;
  180.             font-weight: bold;
  181.             display: none;
  182.             animation: shake 0.5s ease-in-out infinite;
  183.             z-index: 50;
  184.         }
  185.  
  186.         @keyframes shake {
  187.             0%, 100% { transform: translateX(-50%) translateY(0); }
  188.             25% { transform: translateX(-50%) translateY(-5px); }
  189.             75% { transform: translateX(-50%) translateY(5px); }
  190.         }
  191.     </style>
  192. </head>
  193. <body>
  194.     <div id="gameContainer">
  195.         <h1 id="title" class="glow">CHRONO CIPHER CHAMBER</h1>
  196.        
  197.         <div id="hud">
  198.             <div class="hud-item">
  199.                 <span class="hud-label">CHAMBER</span>
  200.                 <span class="hud-value" id="level">1</span>
  201.             </div>
  202.             <div class="hud-item">
  203.                 <span class="hud-label">TIME WINDOW</span>
  204.                 <span class="hud-value" id="timer">30.0</span>
  205.             </div>
  206.             <div class="hud-item">
  207.                 <span class="hud-label">SCORE</span>
  208.                 <span class="hud-value" id="score">0</span>
  209.             </div>
  210.             <div class="hud-item">
  211.                 <span class="hud-label">STREAK</span>
  212.                 <span class="hud-value" id="streak">0</span>
  213.             </div>
  214.         </div>
  215.  
  216.         <div id="timeWarning">TIME WINDOW CLOSING!</div>
  217.  
  218.         <canvas id="canvas"></canvas>
  219.  
  220.         <div id="instructions">
  221.             <strong>TEMPORAL PROTOCOL:</strong> Match the glyphs on the left to the shifting cipher pattern on the right.
  222.             Click glyphs to rotate them through their temporal states.
  223.             Patterns shift with the flow of time - solve before the window closes!
  224.         </div>
  225.  
  226.         <div id="modal" class="hidden">
  227.             <h2 id="modalTitle">CHAMBER SEALED</h2>
  228.             <p id="modalMessage"></p>
  229.             <button id="modalButton">CONTINUE</button>
  230.         </div>
  231.     </div>
  232.  
  233.     <script>
  234.         const canvas = document.getElementById('canvas');
  235.         const ctx = canvas.getContext('2d');
  236.        
  237.         // Set canvas size
  238.         canvas.width = canvas.offsetWidth;
  239.         canvas.height = canvas.offsetHeight;
  240.  
  241.         // Game state
  242.         const game = {
  243.             level: 1,
  244.             score: 0,
  245.             streak: 0,
  246.             timeLimit: 30,
  247.             timeRemaining: 30,
  248.             running: false,
  249.             glyphs: ['◇', '△', '□', '○', '☆', '◈', '◊', '▽'],
  250.             playerGlyphs: [],
  251.             targetGlyphs: [],
  252.             glyphSize: 60,
  253.             selectedGlyph: -1,
  254.             timeSpeed: 1,
  255.             rotationStates: {},
  256.             particleEffects: [],
  257.             lastTime: 0
  258.         };
  259.  
  260.         // Initialize game
  261.         function init() {
  262.             generateLevel();
  263.             game.running = true;
  264.             game.lastTime = Date.now();
  265.             gameLoop();
  266.         }
  267.  
  268.         // Generate new level
  269.         function generateLevel() {
  270.             const glyphCount = Math.min(3 + game.level, 6);
  271.             game.playerGlyphs = [];
  272.             game.targetGlyphs = [];
  273.             game.rotationStates = {};
  274.  
  275.             // Create target pattern
  276.             for (let i = 0; i < glyphCount; i++) {
  277.                const glyph = game.glyphs[Math.floor(Math.random() * game.glyphs.length)];
  278.                game.targetGlyphs.push(glyph);
  279.            }
  280.  
  281.            // Create shuffled player glyphs
  282.            for (let i = 0; i < glyphCount; i++) {
  283.                const randomGlyph = game.glyphs[Math.floor(Math.random() * game.glyphs.length)];
  284.                game.playerGlyphs.push(randomGlyph);
  285.                game.rotationStates[i] = 0;
  286.            }
  287.  
  288.            game.timeRemaining = game.timeLimit;
  289.            game.timeSpeed = 1 + (game.level - 1) * 0.1;
  290.        }
  291.  
  292.        // Draw glyph with effects
  293.        function drawGlyph(x, y, glyph, rotation, scale, color, glowIntensity) {
  294.            ctx.save();
  295.            ctx.translate(x, y);
  296.            ctx.rotate(rotation);
  297.            ctx.scale(scale, scale);
  298.  
  299.            // Glow effect
  300.            if (glowIntensity > 0) {
  301.                 ctx.shadowColor = color;
  302.                 ctx.shadowBlur = 20 * glowIntensity;
  303.             }
  304.  
  305.             // Background circle
  306.             ctx.fillStyle = 'rgba(0, 50, 100, 0.5)';
  307.             ctx.beginPath();
  308.             ctx.arc(0, 0, game.glyphSize / 2, 0, Math.PI * 2);
  309.             ctx.fill();
  310.  
  311.             // Border
  312.             ctx.strokeStyle = color;
  313.             ctx.lineWidth = 3;
  314.             ctx.stroke();
  315.  
  316.             // Glyph symbol
  317.             ctx.fillStyle = color;
  318.             ctx.font = `bold ${game.glyphSize * 0.6}px Arial`;
  319.             ctx.textAlign = 'center';
  320.             ctx.textBaseline = 'middle';
  321.             ctx.fillText(glyph, 0, 0);
  322.  
  323.             ctx.restore();
  324.         }
  325.  
  326.         // Draw game
  327.         function draw() {
  328.             // Clear canvas
  329.             ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
  330.             ctx.fillRect(0, 0, canvas.width, canvas.height);
  331.  
  332.             // Draw grid effect
  333.             ctx.strokeStyle = 'rgba(0, 100, 150, 0.1)';
  334.             ctx.lineWidth = 1;
  335.             for (let i = 0; i < canvas.width; i += 20) {
  336.                ctx.beginPath();
  337.                ctx.moveTo(i, 0);
  338.                ctx.lineTo(i, canvas.height);
  339.                ctx.stroke();
  340.            }
  341.            for (let i = 0; i < canvas.height; i += 20) {
  342.                ctx.beginPath();
  343.                ctx.moveTo(0, i);
  344.                ctx.lineTo(canvas.width, i);
  345.                ctx.stroke();
  346.            }
  347.  
  348.            const now = Date.now();
  349.            const timeProgress = (game.timeLimit - game.timeRemaining) / game.timeLimit;
  350.  
  351.            // Draw player glyphs (left side)
  352.            const leftX = canvas.width * 0.25;
  353.            const startY = canvas.height / 2 - (game.playerGlyphs.length * 80) / 2;
  354.  
  355.            ctx.fillStyle = '#00aaff';
  356.            ctx.font = 'bold 20px Courier New';
  357.            ctx.textAlign = 'center';
  358.            ctx.fillText('YOUR SEQUENCE', leftX, 30);
  359.  
  360.            game.playerGlyphs.forEach((glyph, i) => {
  361.                 const y = startY + i * 80;
  362.                 const rotation = (game.rotationStates[i] * Math.PI / 4) + (now * 0.001);
  363.                 const isSelected = game.selectedGlyph === i;
  364.                 const scale = isSelected ? 1.1 : 1;
  365.                 const color = isSelected ? '#00ffff' : '#00aaff';
  366.                 const glow = isSelected ? 1 : 0.3;
  367.  
  368.                 drawGlyph(leftX, y, glyph, rotation, scale, color, glow);
  369.  
  370.                 // Draw index
  371.                 ctx.fillStyle = '#00aaff';
  372.                 ctx.font = '14px Courier New';
  373.                 ctx.fillText(`[${i + 1}]`, leftX, y + 50);
  374.             });
  375.  
  376.             // Draw target glyphs (right side) with time-based shifting
  377.             const rightX = canvas.width * 0.75;
  378.  
  379.             ctx.fillStyle = '#00ffaa';
  380.             ctx.font = 'bold 20px Courier New';
  381.             ctx.textAlign = 'center';
  382.             ctx.fillText('TARGET CIPHER', rightX, 30);
  383.  
  384.             game.targetGlyphs.forEach((glyph, i) => {
  385.                 const y = startY + i * 80;
  386.                 const timeShift = Math.sin(now * 0.003 + i) * 0.3;
  387.                 const rotation = now * 0.002 * (1 + timeShift);
  388.                 const scale = 1 + Math.sin(now * 0.005 + i) * 0.1;
  389.                 const pulseIntensity = 0.5 + Math.sin(now * 0.004 + i) * 0.3;
  390.  
  391.                 drawGlyph(rightX + timeShift * 20, y, glyph, rotation, scale, '#00ffaa', pulseIntensity);
  392.             });
  393.  
  394.             // Draw connecting lines showing matches
  395.             ctx.strokeStyle = 'rgba(0, 255, 255, 0.2)';
  396.             ctx.lineWidth = 2;
  397.             game.playerGlyphs.forEach((glyph, i) => {
  398.                 const y = startY + i * 80;
  399.                 const isMatch = glyph === game.targetGlyphs[i];
  400.                 if (isMatch) {
  401.                     ctx.strokeStyle = 'rgba(0, 255, 170, 0.6)';
  402.                     ctx.lineWidth = 3;
  403.                 } else {
  404.                     ctx.strokeStyle = 'rgba(255, 100, 100, 0.3)';
  405.                     ctx.lineWidth = 2;
  406.                 }
  407.                 ctx.beginPath();
  408.                 ctx.moveTo(leftX + 40, y);
  409.                 ctx.lineTo(rightX - 40, y);
  410.                 ctx.stroke();
  411.             });
  412.  
  413.             // Draw particle effects
  414.             game.particleEffects = game.particleEffects.filter(p => {
  415.                 p.life -= 0.02;
  416.                 p.y -= p.vy;
  417.                 p.x += p.vx;
  418.                
  419.                 if (p.life > 0) {
  420.                     ctx.fillStyle = `rgba(0, 255, 255, ${p.life})`;
  421.                     ctx.fillRect(p.x, p.y, 3, 3);
  422.                     return true;
  423.                 }
  424.                 return false;
  425.             });
  426.  
  427.             // Draw time indicator
  428.             const timeBarWidth = canvas.width * 0.8;
  429.             const timeBarX = (canvas.width - timeBarWidth) / 2;
  430.             const timeBarY = canvas.height - 40;
  431.             const progress = game.timeRemaining / game.timeLimit;
  432.  
  433.             ctx.fillStyle = 'rgba(0, 50, 100, 0.5)';
  434.             ctx.fillRect(timeBarX, timeBarY, timeBarWidth, 20);
  435.  
  436.             const gradient = ctx.createLinearGradient(timeBarX, 0, timeBarX + timeBarWidth * progress, 0);
  437.             gradient.addColorStop(0, '#00ffff');
  438.             gradient.addColorStop(0.5, '#00aaff');
  439.             gradient.addColorStop(1, progress < 0.3 ? '#ff0000' : '#0088ff');
  440.            
  441.            ctx.fillStyle = gradient;
  442.            ctx.fillRect(timeBarX, timeBarY, timeBarWidth * progress, 20);
  443.  
  444.            ctx.strokeStyle = '#00aaff';
  445.            ctx.lineWidth = 2;
  446.            ctx.strokeRect(timeBarX, timeBarY, timeBarWidth, 20);
  447.        }
  448.  
  449.        // Handle click
  450.        canvas.addEventListener('click', (e) => {
  451.             if (!game.running) return;
  452.  
  453.             const rect = canvas.getBoundingClientRect();
  454.             const x = e.clientX - rect.left;
  455.             const y = e.clientY - rect.top;
  456.  
  457.             const leftX = canvas.width * 0.25;
  458.             const startY = canvas.height / 2 - (game.playerGlyphs.length * 80) / 2;
  459.  
  460.             game.playerGlyphs.forEach((_, i) => {
  461.                 const glyphY = startY + i * 80;
  462.                 const dist = Math.sqrt((x - leftX) ** 2 + (y - glyphY) ** 2);
  463.  
  464.                 if (dist < game.glyphSize / 2) {
  465.                    rotateGlyph(i);
  466.                }
  467.            });
  468.        });
  469.  
  470.        // Rotate glyph
  471.        function rotateGlyph(index) {
  472.            const currentIndex = game.glyphs.indexOf(game.playerGlyphs[index]);
  473.            const nextIndex = (currentIndex + 1) % game.glyphs.length;
  474.            game.playerGlyphs[index] = game.glyphs[nextIndex];
  475.            game.rotationStates[index] = (game.rotationStates[index] + 1) % 8;
  476.  
  477.            // Create particle effect
  478.            const leftX = canvas.width * 0.25;
  479.            const startY = canvas.height / 2 - (game.playerGlyphs.length * 80) / 2;
  480.            const y = startY + index * 80;
  481.            
  482.            for (let i = 0; i < 10; i++) {
  483.                game.particleEffects.push({
  484.                    x: leftX,
  485.                    y: y,
  486.                    vx: (Math.random() - 0.5) * 4,
  487.                    vy: Math.random() * 3,
  488.                    life: 1
  489.                });
  490.            }
  491.  
  492.            checkWin();
  493.        }
  494.  
  495.        // Check win condition
  496.        function checkWin() {
  497.            const isMatch = game.playerGlyphs.every((glyph, i) => glyph === game.targetGlyphs[i]);
  498.            
  499.             if (isMatch) {
  500.                 game.running = false;
  501.                 const timeBonus = Math.floor(game.timeRemaining * 10);
  502.                 const levelBonus = game.level * 100;
  503.                 const streakBonus = game.streak * 50;
  504.                 const totalPoints = timeBonus + levelBonus + streakBonus;
  505.                
  506.                 game.score += totalPoints;
  507.                 game.streak++;
  508.                 game.level++;
  509.  
  510.                 showModal(
  511.                     'CHAMBER UNLOCKED!',
  512.                     `Time Bonus: +${timeBonus}<br>Level Bonus: +${levelBonus}<br>Streak Bonus: +${streakBonus}<br><br>Total: +${totalPoints} points`,
  513.                     'NEXT CHAMBER'
  514.                 );
  515.             }
  516.         }
  517.  
  518.         // Update game
  519.         function update(deltaTime) {
  520.             if (!game.running) return;
  521.  
  522.             game.timeRemaining -= deltaTime * game.timeSpeed;
  523.  
  524.             if (game.timeRemaining <= 0) {
  525.                game.timeRemaining = 0;
  526.                game.running = false;
  527.                game.streak = 0;
  528.                showModal(
  529.                    'TIME EXPIRED',
  530.                    `The temporal window has closed.<br>Chamber ${game.level} remains sealed.<br><br>Final Score: ${game.score}`,
  531.                     'TRY AGAIN'
  532.                 );
  533.             }
  534.  
  535.             // Update HUD
  536.             document.getElementById('timer').textContent = game.timeRemaining.toFixed(1);
  537.             document.getElementById('level').textContent = game.level;
  538.             document.getElementById('score').textContent = game.score;
  539.             document.getElementById('streak').textContent = game.streak;
  540.  
  541.             // Show time warning
  542.             const warning = document.getElementById('timeWarning');
  543.             if (game.timeRemaining < 10 && game.running) {
  544.                warning.style.display = 'block';
  545.            } else {
  546.                warning.style.display = 'none';
  547.            }
  548.        }
  549.  
  550.        // Show modal
  551.        function showModal(title, message, buttonText) {
  552.            document.getElementById('modalTitle').textContent = title;
  553.            document.getElementById('modalMessage').innerHTML = message;
  554.            document.getElementById('modalButton').textContent = buttonText;
  555.            document.getElementById('modal').classList.remove('hidden');
  556.        }
  557.  
  558.        // Modal button handler
  559.        document.getElementById('modalButton').addEventListener('click', () => {
  560.             document.getElementById('modal').classList.add('hidden');
  561.            
  562.             if (game.timeRemaining <= 0 && game.level === 1) {
  563.                // Game over, restart
  564.                game.level = 1;
  565.                game.score = 0;
  566.                game.streak = 0;
  567.            }
  568.            
  569.            generateLevel();
  570.            game.running = true;
  571.        });
  572.  
  573.        // Game loop
  574.        function gameLoop() {
  575.            const now = Date.now();
  576.            const deltaTime = (now - game.lastTime) / 1000;
  577.            game.lastTime = now;
  578.  
  579.            update(deltaTime);
  580.            draw();
  581.  
  582.            requestAnimationFrame(gameLoop);
  583.        }
  584.  
  585.        // Start game
  586.        init();
  587.    </script>
  588. </body>
  589. </html>
  590.  
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!