Sådan ændres JavaScript-timerværdien for et skrivespil ved hjælp af HTML-knapper

Dynamisk timerjustering til at skrive spil ved hjælp af knapper

I et skrivespil er det afgørende at kontrollere spillets tempo for at sikre en engagerende brugeroplevelse. En vigtig faktor er timeren, som bestemmer, hvor lang tid brugeren har til at gennemføre spillet eller skriveudfordringen. Ved at give brugerne mulighed for at justere spiltimeren gennem simple HTML-knapper, kan du give dem mere kontrol over deres gameplay.

Denne artikel viser dig, hvordan du opretter en løsning i JavaScript, der giver spillere mulighed for at vælge mellem forskellige timerindstillinger ved hjælp af knapper. Hvis du for eksempel vælger en '30s'-knap, justeres timeren til 30 sekunder, mens et klik på en '60s'-knap ændrer den til 60 sekunder.

JavaScript-funktionen tager værdien fra den klikkede knap og opdaterer både timeren og spillets titel dynamisk. Denne form for fleksibilitet kan forbedre brugeroplevelsen og gøre spillet mere tilpasseligt og sjovt for forskellige færdighedsniveauer.

Ved slutningen af ​​denne vejledning har du en fuldt funktionel funktion til timerjustering ved hjælp af HTML og JavaScript. Vi vil også dække, hvordan du opdaterer den viste timerværdi på sidens titel, så den afspejler den valgte timer-varighed.

Kommando	Eksempel på brug
document.querySelector()	Bruges til at vælge HTML-elementet
addEventListener()	Binder en bestemt begivenhed (f.eks. klik) til et knapelement. I denne sammenhæng bruges den til at udløse funktionen changeTimer() når en bruger klikker på en knap, hvilket giver mulighed for dynamisk interaktion med timerindstillingerne.
innerText	Denne egenskab giver mulighed for at ændre den synlige tekst i et HTML-element. I denne løsning bruges den til at opdatere timerværdien i sidens titel, når der klikkes på en knap.
onClick	En indlejret hændelseshåndteringsattribut, der bruges i den alternative tilgang til at knytte funktionen changeTimer() direkte til knappens klikhændelse. Dette giver mulighed for en enklere, mindre modulær måde at opdatere timeren dynamisk på.
test()	Denne metode bruges i enhedstest med Jest. Det definerer et testtilfælde, hvor funktionen, der testes (f.eks. changeTimer()) evalueres for at sikre, at timeren opdateres korrekt. Det sikrer, at koden opfører sig som forventet i forskellige scenarier.
expect()	En Jest-kommando, der kontrollerer, om den faktiske værdi (som den opdaterede timer) matcher den forventede værdi. Det bruges i enhedstests for at bekræfte, at gameTime og document.title er opdateret korrekt efter et klik på en knap.
toBe()	Endnu en Jest-kommando, der kontrollerer streng lighed. Det sikrer, at efter at have kaldt changeTimer(), er spilletid nøjagtigt, hvad der forventes (f.eks. 30.000 ms i 30 sekunder).
getElementById()	Bruges til at vælge specifikke knapper efter deres ID'er (f.eks. 'tredive', 'tres'). Denne metode er vigtig for at knytte begivenhedslyttere til knapperne og udløse den dynamiske ændring af timeren som svar på brugerinteraktion.

Oprettelse af dynamiske timere ved hjælp af JavaScript og HTML-knapper

Ovenstående scripts er designet til at give en bruger mulighed for dynamisk at justere spiltimeren i et skrivespil ved at klikke på HTML-knapper. Til at begynde med erklærer vi en variabel , som holder tiden i millisekunder (30 sekunder som standard, ganget med 1000 for at konvertere til millisekunder). Nøglefunktionaliteten ligger i funktion, som opdaterer timerværdien baseret på den knap, der er klikket på. Denne metode modtager værdien af ​​knappen (f.eks. 30, 60 eller 90) og opdaterer spilletid variabel i overensstemmelse hermed. Derudover opdaterer scriptet sidens titel, så den afspejler den valgte timer-varighed, hvilket gør det klart for brugerne, hvor meget tid de har.

Til den dynamiske adfærd bruger vi begivenhedslyttere, specifikt kommando. Dette gør det muligt for scriptet at reagere, når en bruger klikker på en af ​​knapperne. Hver knap tildeles et ID og udløser, når der klikkes på den funktion, passerer den respektive tidsværdi. Denne tilgang er nyttig til at håndtere flere knapper effektivt uden at kræve gentagne inline JavaScript i HTML-strukturen. Scriptet inkluderer også en reservemulighed, hvor du kan bruge inline hændelseshandlere som hvis enkelhed foretrækkes frem for modularitet.

I den alternative løsning binder vi direkte begivenhed til knapperne. Denne metode udfører funktion direkte, når der trykkes på knappen. Det er en ligetil tilgang, men mangler fleksibiliteten i begivenhedslyttermetoden. Enkelheden af ​​denne metode er nyttig til mindre, mindre komplekse applikationer. For mere skalerbar kode tilbyder begivenhedslyttere dog mere fleksibilitet og muliggør lettere opdateringer af scriptet uden at ændre HTML-strukturen direkte. Begge metoder har til formål at løse det samme problem, som er at justere timeren og opdatere titlen dynamisk baseret på brugerens valg.

Til sidst implementerer vi enhedstest ved hjælp af Jest, en JavaScript-testramme. De funktioner er afgørende for at validere, at timeren opdateres korrekt. Ved at teste flere scenarier, såsom om timeren justerer til 30 sekunder, 60 sekunder eller 90 sekunder, sikrer disse enhedstests scriptets rigtighed. Kommandoer som og bruges til at verificere, at den faktiske timerværdi og sidetitel matcher de forventede resultater. Denne testfase sikrer, at din timerlogik fungerer korrekt på tværs af forskellige use cases, hvilket giver tillid til din løsnings robusthed.

// 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');
});

Forbedring af spilinteraktion med timertilpasning

Et andet aspekt at overveje, når du ændrer timeren i et skrivespil, er den overordnede brugeroplevelse og grænseflade. Ud over at justere spiltimeren via knapper, er det vigtigt at give spillerne visuel feedback på deres valgte timer. Dette kan opnås ved at opdatere andre elementer på siden, såsom en nedtællingsvisning. Når der er klikket på en knap for at indstille timeren, bør nedtællingstimeren starte med det samme og give feedback i realtid til brugeren. Dette sikrer, at interaktionen er jævn og intuitiv, hvilket gør spillet mere engagerende.

For at implementere dette kan du bruge JavaScript fungere. Når timeren er indstillet, sætinterval kan bruges til at oprette en nedtælling, der reducerer timerværdien hvert sekund. Når timeren når nul, kan funktionen enten stoppe spillet eller advare brugeren om, at tiden er gået. Denne funktionalitet, kombineret med evnen til dynamisk at ændre timeren ved hjælp af knapper, forbedrer gameplay-oplevelsen markant. En responsiv grænseflade er nøglen til at holde spillerne engageret, og feedback i realtid er en måde at opnå det på.

Endvidere bør fejlhåndtering overvejes. For eksempel, hvis en bruger forsøger at starte spillet uden at indstille en timer, kan du bede dem med en besked om at vælge et gyldigt tidspunkt. Ved at inkorporere valideringsmekanismer sikrer du, at spillet fungerer problemfrit og reducerer potentielle problemer. Denne type validering forbedrer ikke kun brugeroplevelsen, men bidrager også til dit spils pålidelighed og sikrer, at spillere ikke står over for unødvendig forvirring.

1. Hvordan bruger jeg at oprette en nedtælling?
2. Du kan bruge ved at indstille den til at udføre hvert 1000 millisekund (1 sekund) og mindske timerværdien hver gang. Når værdien når nul, kan du stoppe nedtællingen vha .
3. Hvad er formålet med ?
4. bruges til at stoppe en nedtælling eller enhver anden tilbagevendende handling startet af . Det er afgørende at sikre, at nedtællingen stopper, når den når nul.
5. Hvordan kan jeg opdatere HTML-titlen dynamisk?
6. Bruge for at indstille teksten til sidetitlen. Dette kan opdateres i din funktion baseret på den valgte tidsværdi.
7. Kan jeg håndtere brugerfejl, når jeg vælger en timer?
8. Ja, du kan tilføje validering ved at kontrollere, om der er valgt en gyldig timerindstilling, før du starter nedtællingen. Hvis der ikke er valgt et gyldigt tidspunkt, kan du vise en advarsel eller prompt.
9. Hvordan udløser jeg en funktion, når der trykkes på en knap?
10. Du kan knytte en funktion til en knap vha eller ved direkte at bruge i knappens HTML-element.

At inkorporere dynamiske timerjusteringer i et skrivespil forbedrer spilleroplevelsen markant. Ved at tillade brugere at ændre timeren ved hjælp af simple HTML-knapper og opdatere spillets grænseflade i realtid, kan udviklere gøre deres spil mere interaktive og fleksible. Denne type kontrol hjælper med at imødekomme forskellige færdighedsniveauer.

Brug af bedste praksis såsom hændelseslyttere, fejlhåndtering og enhedstest sikrer, at spillet kører problemfrit og giver en pålidelig brugeroplevelse. Implementering af disse funktioner vil ikke kun forbedre spillets funktionalitet, men også holde spillerne mere engagerede med responsiv, brugervenlig mekanik.