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 játékidő, amely az időt ezredmásodpercben tartja (alapértelmezés szerint 30 másodperc, 1000-zel szorozva ezredmásodpercekre). A legfontosabb funkció a changeTimer 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 addEventListener 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 changeTimer 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 onClick 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 onClick eseményt a gombokhoz. Ez a módszer végrehajtja a changeTimer 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 teszt 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 elvárják és lenni 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.
Az időzítő értékének megváltoztatása HTML gombokkal egy gépelési játékhoz
JavaScript-alapú front-end megközelítés dinamikus időfrissítéssel és címbeállítással
// 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>
Alternatív megközelítés: Inline HTML és JavaScript függvények használata
Inline JavaScript HTML-ben közvetlen függvényhívásokkal gombkattintáskor
<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>
Egységteszt az időzítő érték változásaira különböző környezetekben
JavaScript-alapú egységtesztek a Jest használatával az előtér-környezet ellenőrzéséhez
// 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 setInterval 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.
Gyakori kérdések az időzítő testreszabásával kapcsolatban a JavaScriptben
- Hogyan használjam setInterval visszaszámlálás létrehozásához?
- Használhatod setInterval ú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 clearInterval.
- Mi a célja clearInterval?
- clearInterval 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 setInterval. Nagyon fontos, hogy a visszaszámlálás leálljon, amikor eléri a nullát.
- Hogyan frissíthetem dinamikusan a HTML címet?
- Használat document.title az oldalcím szövegének beállításához. Ez frissíthető az Önön belül changeTimer funkciót a kiválasztott időérték alapján.
- Kezelhetem a felhasználói hibákat az időzítő kiválasztásakor?
- 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.
- Hogyan indíthatok el egy funkciót, ha egy gombra kattintanak?
- A gombbal funkciót csatolhat addEventListener vagy közvetlen használatával onClick a gomb HTML elemében.
Utolsó gondolatok az időzítő testreszabásáról
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.
Források és hivatkozások az időzítő testreszabásához
- A JavaScript DOM-manipulációhoz és eseménykezeléshez való használatáról a következő helyen található részletes információ: MDN Web Docs .
- A megértéshez a Tréfa keretrendszer és annak implementációja a JavaScript alkalmazásokban való egységteszthez.
- Átfogó betekintés a használatba addEventListener Az események JavaScriptben történő kezeléséhez elérhetők a W3Schools oldalon.
- A webalkalmazások valós idejű frissítéseinek fontosságát, beleértve az időzítőket is, a cikk tárgyalja Smashing Magazine .