Drukowana wersja tematu

Kliknij tu, aby zobaczyć temat w orginalnym formacie

Forum PHP.pl _ Po stronie przeglądarki _ Opadające wyrazy

Napisany przez: AQuatro 25.01.2024, 09:44:49

Witam.
Próbuję robić program, gdzie spadają mi wyrazy a ja mam wpisać odpowiedź. Na razie "a".
Niestety po dwóch wpisanych odpowiedziach program się blokuje.
Gdybym zwiększył ilość haseł, to jak zostaną 2 ostatnie, to program się zablokuje.
Jeżeli pozwoliłbym, żeby na ekranie było widoczne więcej haseł niż jedno, to wtedy program się nie zablokuje.
Co to może być?
Zamieszczam kod:

[HTML] pobierz, plaintext 
  1.  
  2. <!DOCTYPE html>
  3. <http://december.com/html/4/element/html.html lang="en">
  4. <http://december.com/html/4/element/head.html>
  5.   <http://december.com/html/4/element/meta.html charset="UTF-8">
  6.   <http://december.com/html/4/element/meta.html name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <http://december.com/html/4/element/title.html>Falling</http://december.com/html/4/element/title.html>
  8.   <http://december.com/html/4/element/style.html>
  9.     body {
  10.       overflow: hidden;
  11.       margin: 0;
  12.       font-family: Arial, sans-serif;
  13.     }
  14.  
  15.     #container {
  16.       position: relative;
  17.       height: 100vh;     
  18.       background-color: #f0f0f0;
  19.  
  20.  
  21.     }
  22.  
  23.     #formContainer {
  24.       position: fixed;
  25.       bottom: 0;
  26.       left: 50%;
  27.       transform: translateX(-50%);
  28.       text-align: center;
  29.       padding: 10px;
  30.       background-color: white;
  31.       border: 1px solid #ccc;
  32.     }
  33.  
  34.     #wordInput {
  35.       padding: 5px;
  36.       font-size: 16px;
  37.     }
  38.  
  39.     #score {
  40.       font-size: 20px;
  41.       font-weight: bold;
  42.     }
  43.  
  44.     .word {
  45.       position: absolute;
  46.       font-size: 24px;
  47.       font-weight: bold;
  48.     }
  49.  
  50.     #line {
  51.       position: fixed;
  52.       bottom: 80px;
  53.       left: 0;
  54.       width: 100%;
  55.       height: 2px;
  56.       background-color: #000;
  57.     }
  58.  
  59.     #congratulations {
  60.       position: fixed;
  61.       top: 50%;
  62.       left: 50%;
  63.       transform: translate(-50%, -50%);
  64.       font-size: 36px;
  65.       font-weight: bold;
  66.       display: none;
  67.     }
  68.  
  69.     #remainingWords {
  70.       font-size: 16px;
  71.       font-weight: bold;
  72.       margin-left: 10px;
  73.       margin-right: 20px;
  74.     }
  75.   </http://december.com/html/4/element/style.html>
  76. </http://december.com/html/4/element/head.html>
  77.  
  78.  
  79.  
  80.  
  81. <http://december.com/html/4/element/body.html onload="document.getElementById('wordInput').focus()" style="background-color: white; color: black;">
  82.   <http://december.com/html/4/element/div.html id="container"></http://december.com/html/4/element/div.html>
  83.   <http://december.com/html/4/element/div.html id="line"></http://december.com/html/4/element/div.html>
  84.   <http://december.com/html/4/element/div.html id="formContainer">
  85.     <http://december.com/html/4/element/label.html for="wordInput">Jajko:</http://december.com/html/4/element/label.html>
  86.     <http://december.com/html/4/element/span.html id="score">0</http://december.com/html/4/element/span.html>
  87.     <http://december.com/html/4/element/span.html id="remainingWords">0</http://december.com/html/4/element/span.html>
  88.     <http://december.com/html/4/element/input.html type="text" id="wordInput" onfocus="this.focus(); this.select()">
  89.   </http://december.com/html/4/element/div.html>
  90.   <http://december.com/html/4/element/div.html id="congratulations">Gratulacje!</http://december.com/html/4/element/div.html>
  91.  
  92.  
  93.  
  94.  
  95.   <http://december.com/html/4/element/script.html>
  96.     let words = [
  97.       { word: 'wyr1', color: 'a' },
  98.       { word: 'wyr2', color: 'a' },
  99.       { word: 'wyr3', color: 'a' },
  100.       { word: 'wyr4', color: 'a' }
  101.     ];
  102.  
  103.  
  104.     const container = document.getElementById('container');
  105.     const formContainer = document.getElementById('formContainer');
  106.     const wordInput = document.getElementById('wordInput');
  107.     const scoreElement = document.getElementById('score');
  108.     const remainingWordsElement = document.getElementById('remainingWords');
  109.     const line = document.getElementById('line');
  110.     const congratulations = document.getElementById('congratulations');
  111.     let score = 0;
  112.  
  113.  
  114.     function createWordElement(wordObject) {
  115.       const wordElement = document.createElement('div');
  116.       wordElement.className = 'word';
  117.       wordElement.textContent = wordObject.word;
  118.       wordElement.style.left = `${Math.random() * (container.offsetWidth - 100)}px`; //30
  119.  
  120.       container.appendChild(wordElement);
  121.  
  122.       const fallInterval = setInterval(() => {
  123.         const rect = wordElement.getBoundingClientRect();
  124.         if (rect.bottom < container.offsetHeight) {
  125.           wordElement.style.top = `${rect.top + 0.2}px`;              
  126.         } else {
  127.           clearInterval(fallInterval);
  128.           wordElement.remove();
  129.           updateScore(-1);
  130.           updateRemainingWords();
  131.         }
  132.  
  133.  
  134.         const lineRect = line.getBoundingClientRect();
  135.         if (rect.bottom >= lineRect.top && rect.top <= lineRect.bottom && rect.left >= lineRect.left && rect.right <= lineRect.right) {
  136.           clearInterval(fallInterval);
  137.           wordElement.remove();
  138.           updateScore(-1);
  139.           removeWordFromList(wordObject);
  140.  
  141.  
  142.           if (words.length === 0) { 
  143.             showCongratulations();  
  144.             }
  145.  
  146.         }
  147.       }, 5); 
  148.  
  149.  
  150.       wordInput.addEventListener('input', function handleInput() {
  151.         if (wordInput.value.toLowerCase() === wordObject.color.toLowerCase()) {
  152.           clearInterval(fallInterval);
  153.           wordElement.remove();
  154.           updateScore(1);
  155.           wordInput.value = '';
  156.           wordInput.removeEventListener('input', handleInput);
  157.           removeWordFromList(wordObject);
  158.           updateRemainingWords();
  159.  
  160.  
  161.           if (words.length === 0) {
  162.             showCongratulations();
  163.           }
  164.         }
  165.       });
  166.     }
  167.  
  168.  
  169.  
  170.  
  171.     function removeWordFromList(wordObject) {
  172. 	if (wordObject) {
  173.          words = words.filter(word => word !== wordObject);
  174.          }
  175.       //console.log(words);
  176.     }
  177.  
  178.     function updateScore(delta) {
  179.       score += delta;
  180.       scoreElement.textContent = score;
  181.     }
  182.  
  183.     function updateRemainingWords() {
  184.       remainingWordsElement.textContent = words.length;
  185.       //console.log(words.length);
  186.     }
  187.  
  188.     function showCongratulations() {
  189.       congratulations.style.display = 'block';
  190.     }
  191.  
  192.  
  193.     function startGame() {
  194.       let wordIndex = 0;
  195.  
  196.       setInterval(() => {
  197. //        console.log(words.length);
  198. //        console.log(wordIndex);
  199.         if (words.length > 0) {
  200.           const wordObject = words[wordIndex];
  201.     	  createWordElement(wordObject);
  202.           wordIndex = (wordIndex + 1) % words.length;
  203.  
  204.  
  205.        }
  206.       }, 5000);
  207.     }
  208.  
  209. startGame();
  210.  
  211.   </http://december.com/html/4/element/script.html>
  212.  
  213.  
  214.  
[HTML] pobierz, plaintext

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)