Hur man ändrar JavaScript-timervärdet för ett skrivspel med HTML-knappar

Dynamisk timerjustering för att skriva spel med knappar

I ett skrivspel är det avgörande att kontrollera takten i spelet för att säkerställa en engagerande användarupplevelse. En viktig faktor är timern, som avgör hur lång tid användaren har på sig att slutföra spelet eller skrivutmaningen. Genom att tillåta användare att justera speltimern med enkla HTML-knappar kan du ge dem mer kontroll över sitt spelande.

Den här artikeln kommer att visa dig hur du skapar en lösning i JavaScript som låter spelare välja mellan olika timerinställningar med hjälp av knappar. Om du till exempel väljer en "30s"-knapp justeras timern till 30 sekunder, medan du klickar på en "60s"-knapp ändrar den till 60 sekunder.

JavaScript-funktionen tar värdet från den klickade knappen och uppdaterar både timern och spelets titel dynamiskt. Denna typ av flexibilitet kan förbättra användarupplevelsen, vilket gör spelet mer anpassningsbart och roligt för olika färdighetsnivåer.

I slutet av den här guiden har du en fullt fungerande timerjusteringsfunktion med HTML och JavaScript. Vi kommer också att täcka hur du uppdaterar det visade timervärdet på sidans titel för att återspegla den valda timerns varaktighet.

Kommando	Exempel på användning
document.querySelector()	Används för att välja HTML-elementet
addEventListener()	Binder en specifik händelse (t.ex. klick) till ett knappelement. I detta sammanhang används den för att utlösa funktionen changeTimer() när en användare klickar på en knapp, vilket möjliggör dynamisk interaktion med timerinställningarna.
innerText	Den här egenskapen gör det möjligt att modifiera den synliga texten i ett HTML-element. I den här lösningen används den för att uppdatera timervärdet i sidans titel när en knapp klickas.
onClick	Ett inline-händelsehanterarattribut som används i den alternativa metoden för att koppla funktionen changeTimer() direkt till knappens klickhändelse. Detta möjliggör ett enklare, mindre modulärt sätt att uppdatera timern dynamiskt.
test()	Denna metod används i enhetstestning med Jest. Den definierar ett testfall där funktionen som testas (t.ex. changeTimer()) utvärderas för att säkerställa att timern uppdateras korrekt. Det säkerställer att koden beter sig som förväntat i olika scenarier.
expect()	Ett Jest-kommando som kontrollerar om det faktiska värdet (som den uppdaterade timern) matchar det förväntade värdet. Den används i enhetstester för att verifiera att gameTime och document.title uppdateras korrekt efter ett knapptryck.
toBe()	Ännu ett Jest-kommando som kontrollerar strikt jämlikhet. Det säkerställer att efter att ha anropat changeTimer(), är speltiden exakt vad som förväntas (t.ex. 30 000 ms i 30 sekunder).
getElementById()	Används för att välja specifika knappar efter deras ID (t.ex. "trettio", "sextio"). Denna metod är viktig för att koppla händelseavlyssnare till knapparna och utlösa den dynamiska förändringen av timern som svar på användarinteraktion.

Skapa dynamiska timer med JavaScript och HTML-knappar

Skripten som tillhandahålls ovan är utformade för att tillåta en användare att dynamiskt justera speltimern i ett skrivspel genom att klicka på HTML-knappar. Inledningsvis deklarerar vi en variabel , som håller tiden i millisekunder (30 sekunder som standard, multiplicerat med 1000 för att konvertera till millisekunder). Nyckelfunktionaliteten ligger i funktion, som uppdaterar timervärdet baserat på knappen som klickas. Denna metod tar emot knappens värde (t.ex. 30, 60 eller 90) och uppdaterar speltid varierar i enlighet därmed. Dessutom uppdaterar skriptet sidans titel för att återspegla den valda timerns varaktighet, vilket gör det tydligt för användarna hur mycket tid de har.

För det dynamiska beteendet använder vi händelseavlyssnare, särskilt kommando. Detta gör att skriptet kan reagera när en användare klickar på någon av knapparna. Varje knapp tilldelas ett ID och, när den klickas, utlöser den funktion, passerar respektive tidsvärde. Det här tillvägagångssättet är användbart för att hantera flera knappar effektivt utan att behöva upprepande inline JavaScript i HTML-strukturen. Skriptet innehåller också ett reservalternativ där du kan använda inline-händelsehanterare som om enkelhet föredras framför modularitet.

I den alternativa lösningen binder vi direkt händelse till knapparna. Denna metod kör funktion direkt när knappen klickas. Det är ett enkelt tillvägagångssätt men saknar flexibiliteten hos evenemangslyssnarmetoden. Enkelheten i denna metod är användbar för mindre, mindre komplexa applikationer. Men för mer skalbar kod erbjuder händelseavlyssnare mer flexibilitet och möjliggör enklare uppdateringar av skriptet utan att direkt ändra HTML-strukturen. Båda metoderna syftar till att lösa samma problem, som är att justera timern och uppdatera titeln dynamiskt baserat på användarens val.

Slutligen implementerar vi enhetstester med Jest, ett JavaScript-testramverk. De funktioner är avgörande för att verifiera att timern uppdateras korrekt. Genom att testa flera scenarier, till exempel om timern justerar till 30 sekunder, 60 sekunder eller 90 sekunder, säkerställer dessa enhetstester att skriptet är korrekt. Kommandon som och används för att verifiera att det faktiska timervärdet och sidtiteln matchar de förväntade resultaten. Denna testfas säkerställer att din timerlogik fungerar korrekt i olika användningsfall, vilket ger förtroende för din lösnings robusthet.

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

Förbättra spelinteraktion med timeranpassning

En annan aspekt att tänka på när du ändrar timern i ett skrivspel är den övergripande användarupplevelsen och gränssnittet. Förutom att justera speltimern via knappar, är det viktigt att ge spelarna visuell feedback på sin valda timer. Detta kan uppnås genom att uppdatera andra element på sidan, till exempel en nedräkningsskärm. Efter att en knapp har klickats för att ställa in timern, bör nedräkningstimern starta omedelbart och ge realtidsfeedback till användaren. Detta säkerställer att interaktionen är smidig och intuitiv, vilket gör spelet mer engagerande.

För att implementera detta kan du använda JavaScript fungera. När timern är inställd, setInterval kan användas för att skapa en nedräkning som minskar timervärdet varje sekund. När timern når noll kan funktionen antingen stoppa spelet eller varna användaren om att tiden är ute. Denna funktion, i kombination med möjligheten att dynamiskt ändra timern med hjälp av knappar, förbättrar spelupplevelsen avsevärt. Ett responsivt gränssnitt är nyckeln till att hålla spelarna engagerade, och feedback i realtid är ett sätt att uppnå det.

Vidare bör felhantering övervägas. Till exempel, om en användare försöker starta spelet utan att ställa in en timer, kan du uppmana dem med ett meddelande att välja en giltig tid. Genom att införliva valideringsmekanismer säkerställer du att spelet fungerar smidigt och minskar potentiella problem. Den här typen av validering förbättrar inte bara användarupplevelsen utan bidrar också till ditt spels tillförlitlighet, vilket säkerställer att spelare inte möter onödig förvirring.

1. Hur använder jag skapa en nedräkning?
2. Du kan använda genom att ställa in den så att den körs var 1000:e millisekund (1 sekund) och minska timervärdet varje gång. När värdet når noll kan du stoppa nedräkningen med .
3. Vad är syftet med ?
4. används för att stoppa en nedräkning eller någon annan återkommande åtgärd som startas av . Det är avgörande att se till att nedräkningen stannar när den når noll.
5. Hur kan jag uppdatera HTML-titeln dynamiskt?
6. Använda för att ställa in texten i sidtiteln. Detta kan uppdateras inom din funktion baserat på det valda tidsvärdet.
7. Kan jag hantera användarfel när jag väljer en timer?
8. Ja, du kan lägga till validering genom att kontrollera om ett giltigt timeralternativ har valts innan du startar nedräkningen. Om ingen giltig tid har valts kan du visa en varning eller uppmaning.
9. Hur aktiverar jag en funktion när en knapp klickas?
10. Du kan koppla en funktion till en knapp med hjälp av eller genom att direkt använda i knappens HTML-element.

Att integrera dynamiska timerjusteringar i ett skrivspel förbättrar spelarupplevelsen avsevärt. Genom att tillåta användare att ändra timern med enkla HTML-knappar och uppdatera spelets gränssnitt i realtid, kan utvecklare göra sina spel mer interaktiva och flexibla. Denna typ av kontroll hjälper till att tillgodose olika kompetensnivåer.

Att använda bästa praxis som händelseavlyssnare, felhantering och enhetstester säkerställer att spelet fungerar smidigt och ger en pålitlig användarupplevelse. Att implementera dessa funktioner kommer inte bara att förbättra spelets funktionalitet utan också hålla spelarna mer engagerade med lyhörd, användarvänlig mekanik.