Jak zmodyfikować wartość licznika czasu JavaScript dla gry polegającej na pisaniu za pomocą przycisków HTML

Dynamiczna regulacja timera dla gry polegającej na pisaniu za pomocą przycisków

W grze polegającej na pisaniu kontrolowanie tempa gry ma kluczowe znaczenie dla zapewnienia wciągającego doświadczenia użytkownika. Jednym z ważnych czynników jest licznik czasu, który określa, ile czasu użytkownik ma na ukończenie gry lub wyzwanie polegające na pisaniu. Umożliwiając użytkownikom regulację licznika czasu gry za pomocą prostych przycisków HTML, możesz zapewnić im większą kontrolę nad rozgrywką.

W tym artykule dowiesz się, jak stworzyć rozwiązanie w JavaScript, które pozwoli graczom wybierać pomiędzy różnymi ustawieniami timera za pomocą przycisków. Na przykład wybranie przycisku „30 s” spowoduje ustawienie timera na 30 sekund, a kliknięcie przycisku „60 s” zmieni go na 60 sekund.

Funkcja JavaScript pobierze wartość z klikniętego przycisku i dynamicznie zaktualizuje zarówno licznik czasu, jak i tytuł gry. Ten rodzaj elastyczności może poprawić doświadczenie użytkownika, czyniąc grę bardziej konfigurowalną i przyjemną dla różnych poziomów umiejętności.

Pod koniec tego przewodnika będziesz mieć w pełni funkcjonalną funkcję regulacji timera przy użyciu HTML i JavaScript. Omówimy również, jak zaktualizować wartość licznika czasu wyświetlaną w tytule strony, aby odzwierciedlała wybrany czas trwania licznika.

Rozkaz	Przykład użycia
document.querySelector()	Służy do wybierania elementu HTML
addEventListener()	Wiąże określone zdarzenie (np. kliknięcie) z elementem przycisku. W tym kontekście służy do wyzwalania funkcji ChangeTimer(), gdy użytkownik kliknie przycisk, co pozwala na dynamiczną interakcję z ustawieniami timera.
innerText	Ta właściwość umożliwia modyfikowanie widocznego tekstu w elemencie HTML. W tym rozwiązaniu służy do aktualizacji wartości timera w tytule strony po kliknięciu przycisku.
onClick	Wbudowany atrybut obsługi zdarzeń używany w alternatywnym podejściu do dołączania funkcji ChangeTimer() bezpośrednio do zdarzenia kliknięcia przycisku. Pozwala to na prostszy, mniej modułowy sposób dynamicznej aktualizacji timera.
test()	Ta metoda jest używana w testach jednostkowych z Jest. Definiuje przypadek testowy, w którym testowana funkcja (np. zmianaTimer()) jest oceniana w celu zapewnienia prawidłowej aktualizacji timera. Zapewnia, że ​​kod zachowuje się zgodnie z oczekiwaniami w różnych scenariuszach.
expect()	Polecenie Jest, które sprawdza, czy rzeczywista wartość (np. zaktualizowany licznik czasu) odpowiada wartości oczekiwanej. Jest używany w testach jednostkowych w celu sprawdzenia, czy gameTime i document.title są poprawnie zaktualizowane po kliknięciu przycisku.
toBe()	Kolejne polecenie Jest, które sprawdza ścisłą równość. Zapewnia, że ​​po wywołaniu metody ChangeTimer() czas gry będzie dokładnie taki, jakiego oczekiwano (np. 30 000 ms przez 30 sekund).
getElementById()	Służy do wybierania określonych przycisków według ich identyfikatorów (np. „trzydzieści”, „sześćdziesiąt”). Ta metoda jest ważna w przypadku dołączania detektorów zdarzeń do przycisków i wyzwalania dynamicznej zmiany timera w odpowiedzi na interakcję użytkownika.

Tworzenie dynamicznych timerów za pomocą przycisków JavaScript i HTML

Powyższe skrypty zaprojektowano tak, aby umożliwić użytkownikowi dynamiczne dostosowywanie licznika czasu gry w grze polegającej na pisaniu poprzez klikanie przycisków HTML. Na początku deklarujemy zmienną , który przechowuje czas w milisekundach (domyślnie 30 sekund pomnożonych przez 1000 w celu przeliczenia na milisekundy). Kluczowa funkcjonalność polega na funkcja, która aktualizuje wartość timera na podstawie kliknięcia przycisku. Ta metoda pobiera wartość przycisku (np. 30, 60 lub 90) i aktualizuje Czas gry odpowiednio zmienna. Dodatkowo skrypt aktualizuje tytuł strony, aby odzwierciedlić wybrany czas trwania timera, dzięki czemu użytkownicy wiedzą, ile mają czasu.

Do dynamicznego zachowania używamy detektorów zdarzeń, w szczególności rozkaz. Dzięki temu skrypt może zareagować, gdy użytkownik kliknie dowolny przycisk. Każdemu przyciskowi przypisany jest identyfikator, a po kliknięciu uruchamia funkcję, przekazując odpowiednią wartość czasu. To podejście jest przydatne do wydajnej obsługi wielu przycisków bez konieczności stosowania powtarzalnego kodu JavaScript wbudowanego w strukturę HTML. Skrypt zawiera również opcję awaryjną, w której można używać wbudowanych procedur obsługi zdarzeń, takich jak jeśli prostota jest preferowana nad modułowością.

W rozwiązaniu alternatywnym bezpośrednio wiążemy zdarzenie do przycisków. Ta metoda wykonuje działają bezpośrednio po kliknięciu przycisku. Jest to proste podejście, ale brakuje mu elastyczności metody detektora zdarzeń. Prostota tej metody jest przydatna w mniejszych, mniej złożonych zastosowaniach. Jednak w przypadku bardziej skalowalnego kodu detektory zdarzeń oferują większą elastyczność i pozwalają na łatwiejsze aktualizacje skryptu bez bezpośredniego modyfikowania struktury HTML. Obie metody mają na celu rozwiązanie tego samego problemu, czyli dostosowania timera i dynamicznej aktualizacji tytułu w oparciu o wybór użytkownika.

Na koniec wdrażamy testy jednostkowe przy użyciu Jest, frameworku testowego JavaScript. The funkcje mają kluczowe znaczenie dla sprawdzenia, czy licznik czasu aktualizuje się prawidłowo. Testując wiele scenariuszy, na przykład czy licznik czasu dostosowuje się do 30 sekund, 60 sekund czy 90 sekund, te testy jednostkowe zapewniają poprawność skryptu. Polecenia takie jak I służą do sprawdzenia, czy rzeczywista wartość licznika czasu i tytuł strony odpowiadają oczekiwanym wynikom. Ta faza testowania zapewnia, że ​​logika timera działa prawidłowo w różnych przypadkach użycia, co daje pewność co do niezawodności rozwiązania.

// Solution 1: Using event listeners to change timer value dynamically
let gameTime = 30 * 1000; // Default timer set to 30 seconds
const titleElement = document.querySelector('title');
function changeTimer(value) {
    gameTime = value * 1000; // Update timer to selected value
    titleElement.innerText = value + 's'; // Update the title
}
// Attach event listeners to buttons
document.getElementById('thirty').addEventListener('click', () => changeTimer(30));
document.getElementById('sixty').addEventListener('click', () => changeTimer(60));
document.getElementById('ninety').addEventListener('click', () => changeTimer(90));
// HTML Buttons:
// <button id="thirty" type="button">30s</button>
// <button id="sixty" type="button">60s</button>
// <button id="ninety" type="button">90s</button>

<script>
let gameTime = 30 * 1000;
function changeTimer(value) {
    gameTime = value * 1000;
    document.title = value + 's';
}
</script>
<button onClick="changeTimer(30)">30s</button>
<button onClick="changeTimer(60)">60s</button>
<button onClick="changeTimer(90)">90s</button>

// Jest Test Cases
test('Timer should update to 30 seconds', () => {
    changeTimer(30);
    expect(gameTime).toBe(30000);
    expect(document.title).toBe('30s');
});
test('Timer should update to 60 seconds', () => {
    changeTimer(60);
    expect(gameTime).toBe(60000);
    expect(document.title).toBe('60s');
});
test('Timer should update to 90 seconds', () => {
    changeTimer(90);
    expect(gameTime).toBe(90000);
    expect(document.title).toBe('90s');
});

Ulepszanie interakcji w grze dzięki dostosowywaniu timera

Kolejnym aspektem, który należy wziąć pod uwagę przy zmianie licznika czasu w grze polegającej na pisaniu, jest ogólne doświadczenie użytkownika i interfejs. Oprócz regulacji licznika czasu gry za pomocą przycisków, ważne jest zapewnienie graczom wizualnej informacji zwrotnej na temat wybranego licznika czasu. Można to osiągnąć poprzez aktualizację innych elementów na stronie, takich jak wyświetlanie odliczania. Po kliknięciu przycisku w celu ustawienia timera, licznik czasu powinien rozpocząć się natychmiast, zapewniając użytkownikowi informację zwrotną w czasie rzeczywistym. Dzięki temu interakcja jest płynna i intuicyjna, co czyni grę bardziej wciągającą.

Aby to zaimplementować, możesz użyć JavaScript funkcjonować. Po ustawieniu timera, ustawinterwał można wykorzystać do utworzenia odliczania zmniejszającego wartość licznika co sekundę. Gdy licznik czasu osiągnie zero, funkcja może zatrzymać grę lub powiadomić użytkownika o upływie czasu. Funkcjonalność ta w połączeniu z możliwością dynamicznej zmiany timera za pomocą przycisków znacząco podnosi komfort rozgrywki. Responsywny interfejs jest kluczem do utrzymania zaangażowania graczy, a opinie w czasie rzeczywistym to jeden ze sposobów, aby to osiągnąć.

Ponadto należy wziąć pod uwagę obsługę błędów. Na przykład, jeśli użytkownik spróbuje uruchomić grę bez ustawienia timera, możesz poprosić go o wybranie prawidłowego czasu. Włączając mechanizmy sprawdzania poprawności, masz pewność, że gra działa płynnie i zmniejszasz potencjalne problemy. Ten rodzaj weryfikacji nie tylko poprawia wygodę użytkownika, ale także przyczynia się do niezawodności Twojej gry, zapewniając, że gracze nie będą musieli stawić czoła niepotrzebnemu zamieszaniu.

1. Jak używać utworzyć odliczanie?
2. Możesz użyć ustawiając wykonywanie co 1000 milisekund (1 sekunda) i za każdym razem zmniejszając wartość licznika czasu. Gdy wartość osiągnie zero, możesz zatrzymać odliczanie za pomocą .
3. Jaki jest cel ?
4. służy do zatrzymania odliczania lub innej powtarzającej się akcji rozpoczętej przez . Bardzo ważne jest, aby odliczanie zatrzymało się po osiągnięciu zera.
5. Jak mogę dynamicznie aktualizować tytuł HTML?
6. Używać aby ustawić tekst tytułu strony. Można to zaktualizować w swoim funkcję w oparciu o wybraną wartość czasu.
7. Czy mogę poradzić sobie z błędami użytkownika podczas wybierania timera?
8. Tak, możesz dodać weryfikację, sprawdzając, czy przed rozpoczęciem odliczania została wybrana prawidłowa opcja timera. Jeśli nie zostanie wybrany żaden ważny czas, możesz wyświetlić alert lub monit.
9. Jak uruchomić funkcję po kliknięciu przycisku?
10. Możesz przypisać funkcję do przycisku za pomocą lub bezpośrednio używając w elemencie HTML przycisku.

Włączenie dynamicznych ustawień timera do gry polegającej na pisaniu znacznie poprawia wrażenia gracza. Umożliwiając użytkownikom zmianę licznika czasu za pomocą prostych przycisków HTML i aktualizując interfejs gry w czasie rzeczywistym, programiści mogą uczynić swoje gry bardziej interaktywnymi i elastycznymi. Ten rodzaj kontroli pomaga dostosować się do różnych poziomów umiejętności.

Korzystanie z najlepszych praktyk, takich jak detektory zdarzeń, obsługa błędów i testy jednostkowe, gwarantuje, że gra działa płynnie i zapewnia niezawodne doświadczenie użytkownika. Wdrożenie tych funkcji nie tylko poprawi funkcjonalność gry, ale także sprawi, że gracze będą bardziej zaangażowani dzięki responsywnej i przyjaznej dla użytkownika mechanice.