API tools faq
paste
XTaylorSpenceX

Quantum Quarry Quest

XTaylorSpenceX
Oct 1st, 2025
74
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 20.01 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>Quantum Quarry Quest</title>
  7. <style>
  8. * {
  9. margin: 0;
  10. padding: 0;
  11. box-sizing: border-box;
  12. }
  13.  
  14. body {
  15. background: linear-gradient(135deg, #0a0e27 0%, #1a0b2e 50%, #16213e 100%);
  16. color: #fff;
  17. font-family: 'Courier New', monospace;
  18. overflow: hidden;
  19. position: relative;
  20. height: 100vh;
  21. }
  22.  
  23. /* Cosmic radiation background */
  24. body::before {
  25. content: '';
  26. position: fixed;
  27. top: 0;
  28. left: 0;
  29. width: 200%;
  30. height: 200%;
  31. background-image:
  32. radial-gradient(2px 2px at 20% 30%, white, transparent),
  33. radial-gradient(2px 2px at 60% 70%, white, transparent),
  34. radial-gradient(1px 1px at 50% 50%, white, transparent);
  35. background-size: 50vw 50vh;
  36. animation: cosmicDrift 60s linear infinite;
  37. opacity: 0.03;
  38. pointer-events: none;
  39. }
  40.  
  41. @keyframes cosmicDrift {
  42. 0% { transform: translate(0, 0); }
  43. 100% { transform: translate(-50%, -50%); }
  44. }
  45.  
  46. .game-container {
  47. display: flex;
  48. flex-direction: column;
  49. align-items: center;
  50. padding: 20px;
  51. max-width: 1200px;
  52. margin: 0 auto;
  53. height: 100vh;
  54. }
  55.  
  56. .header {
  57. text-align: center;
  58. margin-bottom: 20px;
  59. z-index: 10;
  60. }
  61.  
  62. h1 {
  63. font-size: 2.5em;
  64. background: linear-gradient(45deg, #00ffff, #ff00ff, #00ff00);
  65. -webkit-background-clip: text;
  66. -webkit-text-fill-color: transparent;
  67. animation: quantumShift 3s ease-in-out infinite;
  68. margin-bottom: 10px;
  69. }
  70.  
  71. @keyframes quantumShift {
  72. 0%, 100% { filter: hue-rotate(0deg); }
  73. 50% { filter: hue-rotate(180deg); }
  74. }
  75.  
  76. .stats {
  77. display: flex;
  78. gap: 30px;
  79. margin-bottom: 20px;
  80. background: rgba(0, 0, 0, 0.5);
  81. padding: 15px 30px;
  82. border-radius: 15px;
  83. border: 1px solid rgba(0, 255, 255, 0.3);
  84. }
  85.  
  86. .stat {
  87. display: flex;
  88. flex-direction: column;
  89. align-items: center;
  90. }
  91.  
  92. .stat-label {
  93. font-size: 0.9em;
  94. color: #8af;
  95. margin-bottom: 5px;
  96. }
  97.  
  98. .stat-value {
  99. font-size: 1.5em;
  100. font-weight: bold;
  101. color: #0ff;
  102. text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
  103. }
  104.  
  105. .observation-meter {
  106. width: 300px;
  107. height: 30px;
  108. background: linear-gradient(90deg, #001122 0%, #003366 100%);
  109. border: 2px solid #0ff;
  110. border-radius: 15px;
  111. position: relative;
  112. overflow: hidden;
  113. margin-bottom: 20px;
  114. }
  115.  
  116. .observation-fill {
  117. height: 100%;
  118. background: linear-gradient(90deg, #00ff00 0%, #ffff00 50%, #ff0000 100%);
  119. width: 0%;
  120. transition: width 0.3s ease;
  121. box-shadow: 0 0 20px currentColor;
  122. }
  123.  
  124. .observation-label {
  125. position: absolute;
  126. top: 50%;
  127. left: 50%;
  128. transform: translate(-50%, -50%);
  129. font-size: 0.9em;
  130. text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
  131. }
  132.  
  133. .mine-grid {
  134. display: grid;
  135. grid-template-columns: repeat(8, 80px);
  136. grid-template-rows: repeat(6, 80px);
  137. gap: 10px;
  138. background: rgba(0, 0, 0, 0.3);
  139. padding: 20px;
  140. border-radius: 20px;
  141. border: 2px solid rgba(0, 255, 255, 0.2);
  142. position: relative;
  143. }
  144.  
  145. .ore-cell {
  146. width: 80px;
  147. height: 80px;
  148. border: 2px solid rgba(0, 255, 255, 0.2);
  149. border-radius: 15px; /* Rounded more for smoother edges */
  150. cursor: pointer;
  151. position: relative;
  152. transition: all 0.3s ease;
  153. background: radial-gradient(circle at center, rgba(0, 50, 100, 0.5), transparent);
  154. }
  155.  
  156. .ore-cell:hover {
  157. border-color: rgba(0, 255, 255, 0.5);
  158. transform: scale(1.05) rotate(2deg); /* Added subtle rotation for fun gamified feel */
  159. }
  160.  
  161. .ore-cell.observed {
  162. animation: quantumObserve 0.5s ease;
  163. }
  164.  
  165. @keyframes quantumObserve {
  166. 0% { box-shadow: 0 0 0 0 rgba(0, 255, 255, 0.8); }
  167. 100% { box-shadow: 0 0 30px 20px rgba(0, 255, 255, 0); }
  168. }
  169.  
  170. .quantum-ore {
  171. position: absolute;
  172. width: 60%;
  173. height: 60%;
  174. top: 50%;
  175. left: 50%;
  176. transform: translate(-50%, -50%);
  177. border-radius: 50%;
  178. opacity: 0;
  179. transition: opacity 0.5s ease, transform 0.5s ease; /* Smoother transitions */
  180. }
  181.  
  182. .quantum-ore.active {
  183. opacity: 1;
  184. }
  185.  
  186. .quantum-ore.common {
  187. background: radial-gradient(circle, #4a9eff, #2060aa);
  188. animation: quantumPulse 2s infinite;
  189. box-shadow: 0 0 20px #4a9eff;
  190. }
  191.  
  192. .quantum-ore.rare {
  193. background: radial-gradient(circle, #ff4aff, #aa20aa);
  194. animation: quantumPulse 1.5s infinite;
  195. box-shadow: 0 0 30px #ff4aff;
  196. }
  197.  
  198. .quantum-ore.legendary {
  199. background: radial-gradient(circle, #ffd700, #ff8c00);
  200. animation: quantumPulse 1s infinite, quantumRotate 3s linear infinite;
  201. box-shadow: 0 0 40px #ffd700;
  202. }
  203.  
  204. .quantum-ore.unstable {
  205. background: radial-gradient(circle, #ff0000, #ff00ff, #00ffff);
  206. animation: unstablePulse 0.5s infinite, quantumRotate 1s linear infinite;
  207. box-shadow: 0 0 50px #ff0000;
  208. }
  209.  
  210. @keyframes quantumPulse {
  211. 0%, 100% {
  212. transform: translate(-50%, -50%) scale(1);
  213. filter: brightness(1);
  214. }
  215. 50% {
  216. transform: translate(-50%, -50%) scale(1.2);
  217. filter: brightness(1.5);
  218. }
  219. }
  220.  
  221. @keyframes unstablePulse {
  222. 0%, 100% {
  223. transform: translate(-50%, -50%) scale(0.8);
  224. filter: hue-rotate(0deg) brightness(1);
  225. }
  226. 50% {
  227. transform: translate(-50%, -50%) scale(1.3);
  228. filter: hue-rotate(180deg) brightness(2);
  229. }
  230. }
  231.  
  232. @keyframes quantumRotate {
  233. 0% { filter: hue-rotate(0deg); }
  234. 100% { filter: hue-rotate(360deg); }
  235. }
  236.  
  237. .probability-indicator {
  238. position: absolute;
  239. top: 5px;
  240. right: 5px;
  241. font-size: 0.7em;
  242. color: #0ff;
  243. opacity: 0;
  244. transition: opacity 0.3s;
  245. }
  246.  
  247. .ore-cell:hover .probability-indicator {
  248. opacity: 0.7;
  249. }
  250.  
  251. .controls {
  252. display: flex;
  253. gap: 20px;
  254. margin-top: 20px;
  255. }
  256.  
  257. button {
  258. padding: 12px 30px;
  259. background: linear-gradient(135deg, #0066cc, #00ccff);
  260. border: none;
  261. border-radius: 30px; /* More rounded for intuitive feel */
  262. color: white;
  263. font-size: 1em;
  264. font-weight: bold;
  265. cursor: pointer;
  266. transition: all 0.3s ease;
  267. text-transform: uppercase;
  268. letter-spacing: 1px;
  269. position: relative;
  270. overflow: hidden;
  271. }
  272.  
  273. button::before {
  274. content: '';
  275. position: absolute;
  276. top: 50%;
  277. left: 50%;
  278. width: 0;
  279. height: 0;
  280. background: rgba(255, 255, 255, 0.3);
  281. border-radius: 50%;
  282. transform: translate(-50%, -50%);
  283. transition: width 0.6s, height 0.6s;
  284. }
  285.  
  286. button:hover::before {
  287. width: 300px;
  288. height: 300px;
  289. }
  290.  
  291. button:hover {
  292. transform: translateY(-2px) scale(1.05); /* Added scale for gamified bounce */
  293. box-shadow: 0 5px 20px rgba(0, 204, 255, 0.5);
  294. }
  295.  
  296. .message {
  297. position: fixed;
  298. top: 50%;
  299. left: 50%;
  300. transform: translate(-50%, -50%);
  301. background: linear-gradient(135deg, rgba(0, 0, 0, 0.9), rgba(0, 50, 100, 0.9));
  302. padding: 30px 50px;
  303. border-radius: 20px;
  304. border: 3px solid #0ff;
  305. font-size: 1.5em;
  306. text-align: center;
  307. opacity: 0;
  308. pointer-events: none;
  309. transition: opacity 0.5s ease, transform 0.5s ease; /* Smoother pop-in */
  310. z-index: 1000;
  311. }
  312.  
  313. .message.show {
  314. opacity: 1;
  315. transform: translate(-50%, -50%) scale(1.05); /* Gentle scale for emphasis */
  316. }
  317.  
  318. .particle {
  319. position: absolute;
  320. width: 4px;
  321. height: 4px;
  322. background: #0ff;
  323. border-radius: 50%;
  324. pointer-events: none;
  325. animation: particleFloat 2s ease-out forwards;
  326. }
  327.  
  328. @keyframes particleFloat {
  329. 0% {
  330. transform: translate(0, 0) scale(1);
  331. opacity: 1;
  332. }
  333. 100% {
  334. transform: translate(var(--x), var(--y)) scale(0);
  335. opacity: 0;
  336. }
  337. }
  338.  
  339. .tooltip {
  340. position: absolute;
  341. bottom: -40px;
  342. left: 50%;
  343. transform: translateX(-50%);
  344. background: rgba(0, 0, 0, 0.9);
  345. padding: 5px 10px;
  346. border-radius: 5px;
  347. font-size: 0.8em;
  348. white-space: nowrap;
  349. opacity: 0;
  350. pointer-events: none;
  351. transition: opacity 0.3s;
  352. z-index: 100;
  353. }
  354.  
  355. .ore-cell:hover .tooltip {
  356. opacity: 1;
  357. }
  358.  
  359. .instructions {
  360. position: absolute;
  361. top: 20px;
  362. right: 20px;
  363. background: rgba(0, 0, 0, 0.7);
  364. padding: 20px;
  365. border-radius: 15px;
  366. border: 1px solid rgba(0, 255, 255, 0.3);
  367. max-width: 250px;
  368. font-size: 0.9em;
  369. line-height: 1.6;
  370. }
  371.  
  372. .instructions h3 {
  373. color: #0ff;
  374. margin-bottom: 10px;
  375. }
  376.  
  377. .instructions p {
  378. margin-bottom: 8px;
  379. color: #aaf;
  380. }
  381.  
  382. /* New tutorial modal for intuitiveness */
  383. .modal {
  384. position: fixed;
  385. top: 0;
  386. left: 0;
  387. width: 100%;
  388. height: 100%;
  389. background: rgba(0, 0, 0, 0.8);
  390. display: flex;
  391. align-items: center;
  392. justify-content: center;
  393. z-index: 2000;
  394. opacity: 0;
  395. pointer-events: none;
  396. transition: opacity 0.5s ease;
  397. }
  398.  
  399. .modal.show {
  400. opacity: 1;
  401. pointer-events: auto;
  402. }
  403.  
  404. .modal-content {
  405. background: linear-gradient(135deg, rgba(0, 0, 0, 0.9), rgba(0, 50, 100, 0.9));
  406. padding: 40px;
  407. border-radius: 20px;
  408. border: 3px solid #0ff;
  409. max-width: 500px;
  410. text-align: center;
  411. }
  412.  
  413. .modal-content h2 {
  414. color: #0ff;
  415. margin-bottom: 20px;
  416. }
  417.  
  418. .modal-content p {
  419. margin-bottom: 15px;
  420. color: #aaf;
  421. }
  422.  
  423. .modal-content button {
  424. margin-top: 20px;
  425. }
  426. </style>
  427. </head>
  428. <body>
  429. <div class="game-container">
  430. <div class="header">
  431. <h1>⚛️ Quantum Quarry Quest ⚛️</h1>
  432. <div class="stats">
  433. <div class="stat">
  434. <span class="stat-label">Level</span>
  435. <span class="stat-value" id="level">1</span>
  436. </div>
  437. <div class="stat">
  438. <span class="stat-label">Quantum Crystals</span>
  439. <span class="stat-value" id="score">0</span>
  440. </div>
  441. <div class="stat">
  442. <span class="stat-label">High Score</span>
  443. <span class="stat-value" id="high-score">0</span>
  444. </div>
  445. <div class="stat">
  446. <span class="stat-label">Cells Remaining</span>
  447. <span class="stat-value" id="remaining">48</span>
  448. </div>
  449. <div class="stat">
  450. <span class="stat-label">Success Rate</span>
  451. <span class="stat-value" id="success-rate">0%</span>
  452. </div>
  453. </div>
  454. <div class="observation-meter">
  455. <div class="observation-fill" id="observation-fill"></div>
  456. <span class="observation-label">Observation Intensity: <span id="observation-percent">0%</span></span>
  457. </div>
  458. </div>
  459.  
  460. <div class="mine-grid" id="mine-grid"></div>
  461.  
  462. <div class="controls">
  463. <button onclick="game.resetObservation()">Reset Observation</button>
  464. <button onclick="game.newGame()">New Quantum Field</button>
  465. </div>
  466. </div>
  467.  
  468. <div class="instructions">
  469. <h3>Quantum Mining Rules</h3>
  470. <p>🔮 <strong>Observe:</strong> Hover to increase observation and reveal hints</p>
  471. <p>⚡ <strong>Mine:</strong> Click to extract ore—balance risk!</p>
  472. <p>⚠️ <strong>Warning:</strong> High observation collapses quantum states!</p>
  473. <p>💎 <strong>Ores:</strong> Blue (1pt), Purple (5pt), Gold (10pt), Unstable (20pt, but explosion risk!)</p>
  474. <p>🎯 <strong>Strategy:</strong> Mix observation with bold blind mining for max rewards</p>
  475. <p>🏆 <strong>Levels:</strong> Clear the grid to level up—harder fields, bigger payoffs!</p>
  476. </div>
  477.  
  478. <div class="message" id="message"></div>
  479.  
  480. <!-- Tutorial modal -->
  481. <div class="modal" id="tutorial">
  482. <div class="modal-content">
  483. <h2>Welcome to Quantum Quarry Quest! 🎉</h2>
  484. <p>Dive into a quantum mining adventure where observation shapes reality!</p>
  485. <p>Hover cells to observe and peek at potentials, but watch out—too much collapses the state!</p>
  486. <p>Click to mine, score crystals, and level up by clearing grids. Unstable ores offer big wins but might explode!</p>
  487. <p>Pro tip: Reset observation to stay stealthy. Chase high scores and innovate your strategy!</p>
  488. <button onclick="game.closeTutorial()">Start Mining! ⚛️</button>
  489. </div>
  490. </div>
  491.  
  492. <script>
  493. class QuantumQuarryGame {
  494. constructor() {
  495. this.grid = [];
  496. this.score = 0;
  497. this.highScore = localStorage.getItem('qqqHighScore') || 0;
  498. this.level = 1;
  499. this.totalMines = 0;
  500. this.successfulMines = 0;
  501. this.observationLevel = 0;
  502. this.observationDecayTimer = null;
  503. this.initGame();
  504. this.showTutorial();
  505. }
  506.  
  507. showTutorial() {
  508. document.getElementById('tutorial').classList.add('show');
  509. }
  510.  
  511. closeTutorial() {
  512. document.getElementById('tutorial').classList.remove('show');
  513. }
  514.  
  515. initGame() {
  516. this.createGrid();
  517. this.startObservationDecay();
  518. this.updateDisplay();
  519. }
  520.  
  521. createGrid() {
  522. const grid = document.getElementById('mine-grid');
  523. grid.innerHTML = '';
  524. this.grid = [];
  525. this.totalMines = 0;
  526.  
  527. for (let i = 0; i < 48; i++) {
  528. const cell = document.createElement('div');
  529. cell.className = 'ore-cell';
  530. cell.dataset.index = i;
  531.  
  532. const ore = document.createElement('div');
  533. ore.className = 'quantum-ore';
  534. cell.appendChild(ore);
  535.  
  536. const prob = document.createElement('div');
  537. prob.className = 'probability-indicator';
  538. cell.appendChild(prob);
  539.  
  540. const tooltip = document.createElement('div');
  541. tooltip.className = 'tooltip';
  542. cell.appendChild(tooltip);
  543.  
  544. const quantumState = this.generateQuantumState();
  545. this.grid.push(quantumState);
  546.  
  547. cell.addEventListener('mouseenter', (e) => this.observe(e, i));
  548. cell.addEventListener('mouseleave', (e) => this.stopObserve(e, i));
  549. cell.addEventListener('click', (e) => this.mine(e, i));
  550.  
  551. grid.appendChild(cell);
  552. }
  553. }
  554.  
  555. generateQuantumState() {
  556. const rand = Math.random();
  557. const levelModifier = 0.01 * (this.level - 1); // Innovation: Levels increase rarity and risk
  558. let state = {
  559. collapsed: false,
  560. mined: false,
  561. observationTime: 0,
  562. baseProbability: Math.random(),
  563. type: null,
  564. value: 0
  565. };
  566.  
  567. if (rand < (0.02 + levelModifier)) {
  568. state.type = 'unstable';
  569. state.value = 20 + this.level * 2; // Higher rewards per level
  570. } else if (rand < (0.1 + levelModifier)) {
  571. state.type = 'legendary';
  572. state.value = 10 + this.level;
  573. } else if (rand < (0.3 + levelModifier)) {
  574. state.type = 'rare';
  575. state.value = 5 + Math.floor(this.level / 2);
  576. } else if (rand < (0.6 - levelModifier)) { // Slightly more empties for difficulty
  577. state.type = 'common';
  578. state.value = 1;
  579. } else {
  580. state.type = 'empty';
  581. state.value = 0;
  582. }
  583.  
  584. return state;
  585. }
  586.  
  587. observe(event, index) {
  588. const cell = event.currentTarget;
  589. const state = this.grid[index];
  590.  
  591. if (state.mined) return;
  592.  
  593. this.observationLevel = Math.min(100, this.observationLevel + 2 * (1 + (this.level - 1) * 0.1)); // Faster observation build-up per level
  594. state.observationTime += 1;
  595.  
  596. const prob = cell.querySelector('.probability-indicator');
  597. const probability = this.calculateCollapseProbability(state);
  598. prob.textContent = `${Math.round(probability * 100)}%`;
  599.  
  600. const tooltip = cell.querySelector('.tooltip');
  601. tooltip.textContent = `Quantum Stability: ${Math.round(100 - probability * 100)}% | Potential: ${state.type ? state.type.charAt(0).toUpperCase() + state.type.slice(1) : 'Unknown'}`;
  602.  
  603. const ore = cell.querySelector('.quantum-ore');
  604. if (state.observationTime > 5 && !state.collapsed) {
  605. ore.classList.add('active', state.type);
  606. }
  607.  
  608. if (probability > 0.8 && !state.collapsed) {
  609. this.collapseQuantumState(index);
  610. }
  611.  
  612. this.updateObservationMeter();
  613. }
  614.  
  615. stopObserve(event, index) {
  616. clearTimeout(this.observationDecayTimer);
  617. this.startObservationDecay();
  618. }
  619.  
  620. startObservationDecay() {
  621. this.observationDecayTimer = setInterval(() => {
  622. this.observationLevel = Math.max(0, this.observationLevel - 1);
  623. this.updateObservationMeter();
  624. }, 100);
  625. }
  626.  
  627. calculateCollapseProbability(state) {
  628. const observationFactor = this.observationLevel / 100;
  629. const timeFactor = Math.min(state.observationTime / 20, 1);
  630. const instabilityFactor = state.type === 'unstable' ? 1.5 + (this.level * 0.1) : 1; // Higher risk per level
  631. const levelFactor = 1 + (this.level - 1) * 0.05; // Overall harder collapses
  632.  
  633. return Math.min(1, (observationFactor * 0.5 + timeFactor * 0.5) * instabilityFactor * levelFactor);
  634. }
  635.  
  636. collapseQuantumState(index) {
  637. const cell = document.querySelectorAll('.ore-cell')[index];
  638. const state = this.grid[index];
  639. const ore = cell.querySelector('.quantum-ore');
  640.  
  641. state.collapsed = true;
  642.  
  643. if (Math.random() < 0.7 + (this.level * 0.02)) { // Higher disappear chance per level
  644. state.type = 'empty';
  645. state.value = 0;
  646. ore.classList.remove('active');
  647. this.showMessage('Quantum state collapsed! Ore lost...', 'error');
  648. this.createParticles(cell, '#ff0000');
  649. }
  650.  
  651. cell.classList.add('observed');
  652. }
  653.  
  654. mine(event, index) {
  655. const cell = event.currentTarget;
  656. const state = this.grid[index];
  657.  
  658. if (state.mined) return;
  659.  
  660. state.mined = true;
  661. this.totalMines++;
  662. cell.style.pointerEvents = 'none';
  663. cell.style.opacity = '0.3';
  664.  
  665. const successChance = state.collapsed ? 0.3 : (state.observationTime > 0 ? 0.8 : 0.5);
  666.  
  667. if (Math.random() < successChance && state.value > 0) {
  668. this.successfulMines++;
  669. const ore = cell.querySelector('.quantum-ore');
  670. ore.classList.add('active', state.type);
  671.  
  672. if (state.type === 'unstable' && Math.random() < 0.3 + (this.level * 0.05)) { // Innovation: Explosion risk increases with level
  673. this.score = Math.max(0, this.score - 10);
  674. this.showMessage('Unstable ore exploded! -10 crystals', 'error');
  675. this.createParticles(cell, '#ff0000');
  676. } else {
  677. this.score += state.value;
  678. this.showMessage(this.getSuccessMessage(state.type), 'success');
  679. this.createParticles(cell, this.getOreColor(state.type));
  680. }
  681. } else {
  682. this.createParticles(cell, '#555');
  683. if (state.value === 0) {
  684. this.showMessage('Empty cavity...', 'info');
  685. } else {
  686. this.showMessage('Mining failed! Ore shattered...', 'error');
  687. }
  688. }
  689.  
  690. this.updateDisplay();
  691. if (48 - this.totalMines === 0) {
  692. this.gameOver();
  693. }
  694. }
  695.  
  696. getSuccessMessage(type) {
  697. const messages = {
  698. 'common': 'Common ore extracted! +1',
  699. 'rare': 'Rare quantum crystal! +5',
  700. 'legendary': 'Legendary ore discovered! +10',
  701. 'unstable': 'Unstable matter harvested! +20'
  702. };
  703. return messages[type] || 'Ore extracted!';
  704. }
  705.  
  706. getOreColor(type) {
  707. const colors = {
  708. 'common': '#4a9eff',
  709. 'rare': '#ff4aff',
  710. 'legendary': '#ffd700',
  711. 'unstable': '#ff00ff'
  712. };
  713. return colors[type] || '#555';
  714. }
  715.  
  716. createParticles(element, color) {
  717. const rect = element.getBoundingClientRect();
  718. for (let i = 0; i < 15; i++) { // More particles for gamified flair
  719. const particle = document.createElement('div');
  720. particle.className = 'particle';
  721. particle.style.left = rect.left + rect.width / 2 + 'px';
  722. particle.style.top = rect.top + rect.height / 2 + 'px';
  723. particle.style.background = color;
  724. particle.style.setProperty('--x', `${(Math.random() - 0.5) * 150}px`); // Wider spread
  725. particle.style.setProperty('--y', `${(Math.random() - 0.5) * 150}px`);
  726. document.body.appendChild(particle);
  727.  
  728. setTimeout(() => particle.remove(), 2000);
  729. }
  730. }
  731.  
  732. showMessage(text, type) {
  733. const message = document.getElementById('message');
  734. message.textContent = text;
  735. message.className = 'message show';
  736.  
  737. if (type === 'success') {
  738. message.style.borderColor = '#0f0';
  739. message.style.background = 'linear-gradient(135deg, rgba(0, 50, 0, 0.9), rgba(0, 100, 50, 0.9))';
  740. } else if (type === 'error') {
  741. message.style.borderColor = '#f00';
  742. message.style.background = 'linear-gradient(135deg, rgba(50, 0, 0, 0.9), rgba(100, 0, 50, 0.9))';
  743. } else {
  744. message.style.borderColor = '#0ff';
  745. message.style.background = 'linear-gradient(135deg, rgba(0, 0, 0, 0.9), rgba(0, 50, 100, 0.9))';
  746. }
  747.  
  748. setTimeout(() => {
  749. message.classList.remove('show');
  750. }, 2500); // Longer display for better feedback
  751. }
  752.  
  753. resetObservation() {
  754. this.observationLevel = 0;
  755. this.grid.forEach((state, index) => {
  756. if (!state.mined) {
  757. state.observationTime = 0;
  758. state.collapsed = false;
  759. const cell = document.querySelectorAll('.ore-cell')[index];
  760. const ore = cell.querySelector('.quantum-ore');
  761. ore.classList.remove('active', 'common', 'rare', 'legendary', 'unstable');
  762. cell.classList.remove('observed');
  763. }
  764. });
  765. this.updateObservationMeter();
  766. this.showMessage('Observation field reset!', 'info');
  767. }
  768.  
  769. updateObservationMeter() {
  770. const fill = document.getElementById('observation-fill');
  771. const percent = document.getElementById('observation-percent');
  772. fill.style.width = this.observationLevel + '%';
  773. percent.textContent = this.observationLevel + '%';
  774. }
  775.  
  776. updateDisplay() {
  777. document.getElementById('level').textContent = this.level;
  778. document.getElementById('score').textContent = this.score;
  779. document.getElementById('remaining').textContent = 48 - this.totalMines;
  780. const successRate = this.totalMines > 0 ? Math.round((this.successfulMines / this.totalMines) * 100) : 0;
  781. document.getElementById('success-rate').textContent = successRate + '%';
  782.  
  783. if (this.score > this.highScore) {
  784. this.highScore = this.score;
  785. localStorage.setItem('qqqHighScore', this.highScore);
  786. }
  787. document.getElementById('high-score').textContent = this.highScore;
  788. }
  789.  
  790. gameOver() {
  791. let msg = `Level ${this.level} Complete! Field exhausted. Score: ${this.score}`;
  792. if (this.score > this.highScore) {
  793. msg += ' - New High Score! 🏆';
  794. }
  795. this.showMessage(msg, 'success');
  796. setTimeout(() => {
  797. this.level++;
  798. this.newGame();
  799. }, 3000);
  800. }
  801.  
  802. newGame() {
  803. clearInterval(this.observationDecayTimer);
  804. this.totalMines = 0;
  805. this.successfulMines = 0;
  806. this.observationLevel = 0;
  807. this.initGame();
  808. this.showMessage(`Level ${this.level} - New quantum field generated! Higher stakes await!`, 'success');
  809. }
  810. }
  811.  
  812. // Initialize game
  813. const game = new QuantumQuarryGame();
  814. </script>
  815. </body>
  816. </html>
  817.  
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!