Hogyan módosíthatja a JavaScript időzítő értékét egy gépelési játékhoz HTML gombokkal

Dinamikus időzítő beállítása a játék gombokkal történő gépeléséhez

A gépelési játékban a játék tempójának szabályozása kulcsfontosságú a vonzó felhasználói élmény biztosításához. Az egyik fontos tényező az időzítő, amely meghatározza, hogy a felhasználónak mennyi ideig kell befejeznie a játékot vagy a gépelési kihívást. Azáltal, hogy lehetővé teszi a felhasználók számára, hogy egyszerű HTML gombokkal állítsák be a játékidőzítőt, nagyobb irányítást biztosíthat számukra a játékmenet felett.

Ez a cikk bemutatja, hogyan hozhat létre olyan megoldást JavaScriptben, amely lehetővé teszi a játékosoknak, hogy a gombok segítségével válasszanak a különböző időzítőbeállítások között. Például, ha kiválaszt egy „30s” gombot, az időzítőt 30 másodpercre állítja be, míg a „60s” gombra kattintva 60 másodpercre.

A JavaScript funkció a rákattintott gomb értékét veszi, és dinamikusan frissíti az időzítőt és a játék címét. Ez a fajta rugalmasság javíthatja a felhasználói élményt, testreszabhatóbbá és élvezetesebbé téve a játékot a különböző képzettségi szintek számára.

Az útmutató végére egy teljesen működőképes időzítő beállítási funkcióval fog rendelkezni HTML és JavaScript használatával. Kitérünk arra is, hogyan frissíthetjük az oldal címében megjelenített időzítő értékét, hogy az tükrözze a kiválasztott időzítő időtartamát.

Parancs	Használati példa
document.querySelector()	A HTML
addEventListener()	Egy adott eseményt (pl. kattintást) köt egy gombelemhez. Ebben az összefüggésben a changeTimer() függvény aktiválására szolgál, amikor a felhasználó egy gombra kattint, lehetővé téve az időzítő beállításaival való dinamikus interakciót.
innerText	Ez a tulajdonság lehetővé teszi a látható szöveg módosítását egy HTML elemen belül. Ebben a megoldásban az időzítő értékének frissítésére szolgál az oldal címében, amikor egy gombra kattintanak.
onClick	Egy soron belüli eseménykezelő attribútum, amelyet az alternatív megközelítésben használnak a changeTimer() függvény közvetlenül a gomb kattintási eseményéhez való csatolására. Ez egyszerűbb, kevésbé moduláris módot tesz lehetővé az időzítő dinamikus frissítéséhez.
test()	Ezt a módszert a Jesttel végzett egységteszteknél használják. Meghatároz egy tesztesetet, ahol a tesztelt függvény (pl. changeTimer()) kiértékelésre kerül annak érdekében, hogy az időzítő megfelelően frissüljön. Biztosítja, hogy a kód a különböző forgatókönyvekben elvárt módon viselkedjen.
expect()	Jest parancs, amely ellenőrzi, hogy a tényleges érték (például a frissített időzítő) megegyezik-e a várt értékkel. Egységtesztekben használják annak ellenőrzésére, hogy a gameTime és a document.title megfelelően frissül-e egy gombkattintás után.
toBe()	Egy másik Jest parancs, amely a szigorú egyenlőséget ellenőrzi. Biztosítja, hogy a changeTimer() meghívása után a játékidő pontosan megfeleljen a vártnak (pl. 30 000 ms 30 másodpercig).
getElementById()	Adott gombok azonosítójuk alapján történő kiválasztására szolgál (pl. „harminc”, „hatvan”). Ez a módszer fontos az eseményfigyelők gombokhoz való csatlakoztatásához, és az időzítő dinamikus változásának elindításához a felhasználói interakció hatására.

Dinamikus időzítők létrehozása JavaScript és HTML gombok használatával

A fent megadott szkriptek lehetővé teszik a felhasználó számára, hogy dinamikusan állítsa be a játékidőzítőt egy gépelési játékban a HTML gombokra kattintva. Kezdetben deklarálunk egy változót , amely az időt ezredmásodpercben tartja (alapértelmezés szerint 30 másodperc, 1000-zel szorozva ezredmásodpercekre). A legfontosabb funkció a funkció, amely a kattintott gomb alapján frissíti az időzítő értékét. Ez a módszer fogadja a gomb értékét (pl. 30, 60 vagy 90), és frissíti a játékidő ennek megfelelően változtatható. Ezenkívül a szkript frissíti az oldal címét, hogy tükrözze a kiválasztott időzítő időtartamát, egyértelművé téve a felhasználók számára, hogy mennyi idejük van.

A dinamikus viselkedéshez eseményfigyelőket használunk, különösen a parancs. Ez lehetővé teszi, hogy a szkript reagáljon, ha a felhasználó bármelyik gombra kattint. Minden gombhoz tartozik egy azonosító, és ha rákattint, kiváltja a függvényt, átadva a megfelelő időértéket. Ez a megközelítés hasznos több gomb hatékony kezeléséhez anélkül, hogy ismétlődő soron belüli JavaScript-re lenne szükség a HTML-struktúrában. A szkript tartalmaz egy tartalék opciót is, ahol olyan soron belüli eseménykezelőket használhat, mint pl ha az egyszerűséget részesítik előnyben a modularitás helyett.

Az alternatív megoldásban közvetlenül lekötjük a eseményt a gombokhoz. Ez a módszer végrehajtja a funkció közvetlenül a gombra kattintás után. Ez egy egyszerű megközelítés, de hiányzik belőle az eseményfigyelő módszer rugalmassága. Ennek a módszernek az egyszerűsége kisebb, kevésbé bonyolult alkalmazásoknál hasznos. A skálázhatóbb kód érdekében azonban az eseményfigyelők nagyobb rugalmasságot kínálnak, és lehetővé teszik a szkript egyszerűbb frissítését a HTML-struktúra közvetlen módosítása nélkül. Mindkét módszer ugyanazt a problémát kívánja megoldani, vagyis az időzítő beállítását és a cím dinamikus frissítését a felhasználó választása alapján.

Végül egységteszteket valósítunk meg a Jest, egy JavaScript tesztelési keretrendszer segítségével. A A funkciók kulcsfontosságúak az időzítő megfelelő frissítésének ellenőrzéséhez. Több forgatókönyv tesztelésével, például, hogy az időzítő 30 másodpercre, 60 másodpercre vagy 90 másodpercre áll-e be, ezek az egységtesztek biztosítják a szkript helyességét. Parancsok, mint és annak ellenőrzésére szolgál, hogy az időzítő tényleges értéke és az oldal címe megfelel-e a várt eredményeknek. Ez a tesztelési szakasz biztosítja, hogy az időzítő logikája megfelelően működjön a különböző felhasználási esetekben, és bizalmat ad a megoldás robusztusságában.

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

A játék interakciójának javítása az időzítő testreszabásával

Egy másik szempont, amelyet figyelembe kell venni az időzítő megváltoztatásakor egy gépelési játékban, az általános felhasználói élmény és felület. A játékidőzítő gombokkal történő beállításán túl fontos, hogy a játékosok vizuális visszajelzést kapjanak a kiválasztott időzítőjükről. Ezt az oldal egyéb elemeinek, például a visszaszámláló kijelzőjének frissítésével érheti el. Az időzítő beállításához egy gombra kattintás után a visszaszámlálónak azonnal el kell indulnia, és valós idejű visszajelzést kell adnia a felhasználónak. Ez biztosítja, hogy az interakció zökkenőmentes és intuitív legyen, így a játék még vonzóbbá válik.

Ennek megvalósításához használhatja a JavaScriptet funkció. Miután beállította az időzítőt, setInterval olyan visszaszámlálás létrehozására használható, amely másodpercenként csökkenti az időzítő értékét. Amikor az időzítő eléri a nullát, a funkció vagy leállíthatja a játékot, vagy figyelmeztetheti a felhasználót, hogy lejárt az idő. Ez a funkció az időzítő gombokkal történő dinamikus megváltoztatásának lehetőségével kombinálva jelentősen javítja a játékélményt. A reszponzív felület kulcsfontosságú a játékosok elköteleződésében, és a valós idejű visszajelzés az egyik módja ennek elérésére.

Ezenkívül mérlegelni kell a hibakezelést. Például, ha egy felhasználó időzítő beállítása nélkül próbálja elindítani a játékot, üzenetben kérheti, hogy válasszon érvényes időt. Az érvényesítési mechanizmusok beépítésével biztosítja a játék zökkenőmentes működését, és csökkenti a lehetséges problémákat. Ez a fajta érvényesítés nem csak a felhasználói élményt javítja, hanem hozzájárul a játék megbízhatóságához is, biztosítva, hogy a játékosok ne kerüljenek felesleges zavarba.

1. Hogyan használjam visszaszámlálás létrehozásához?
2. Használhatod úgy, hogy 1000 ezredmásodpercenként (1 másodpercenként) hajtsa végre, és minden alkalommal csökkenti az időzítő értékét. Amikor az érték eléri a nullát, a gombbal leállíthatja a visszaszámlálást .
3. Mi a célja ?
4. a visszaszámlálás vagy bármely más által indított ismétlődő művelet leállítására szolgál . Nagyon fontos, hogy a visszaszámlálás leálljon, amikor eléri a nullát.
5. Hogyan frissíthetem dinamikusan a HTML címet?
6. Használat az oldalcím szövegének beállításához. Ez frissíthető az Önön belül funkciót a kiválasztott időérték alapján.
7. Kezelhetem a felhasználói hibákat az időzítő kiválasztásakor?
8. Igen, a visszaszámlálás megkezdése előtt ellenőrizheti, hogy érvényes időzítő opciót választott-e. Ha nem választott ki érvényes időt, megjeleníthet egy figyelmeztetést vagy figyelmeztetést.
9. Hogyan indíthatok el egy funkciót, ha egy gombra kattintanak?
10. A gombbal funkciót csatolhat vagy közvetlen használatával a gomb HTML elemében.

A dinamikus időzítő-beállítások beépítése egy gépelési játékba jelentősen javítja a játékos élményét. Azáltal, hogy a felhasználók egyszerű HTML gombokkal módosíthatják az időzítőt, és valós időben frissítik a játék felületét, a fejlesztők interaktívabbá és rugalmasabbá tehetik játékaikat. Ez a fajta ellenőrzés segít a különböző képzettségi szintek alkalmazkodásában.

A legjobb gyakorlatok, például az eseményfigyelők, a hibakezelés és az egységtesztek alkalmazása biztosítja a játék zökkenőmentes működését és megbízható felhasználói élményt. Ezeknek a funkcióknak a megvalósítása nemcsak a játék funkcionalitását javítja, hanem a játékosokat is jobban elkötelezi az érzékeny, felhasználóbarát mechanika iránt.