Како да измените вредност ЈаваСцрипт тајмера за игру куцања помоћу ХТМЛ дугмади

Динамичко подешавање тајмера за куцање игре помоћу дугмади

У игри куцања, контрола темпа игре је кључна да би се обезбедило занимљиво корисничко искуство. Један важан фактор је тајмер, који одређује колико дуго корисник треба да заврши игру или изазов за куцање. Омогућавајући корисницима да подесе тајмер игре помоћу једноставних ХТМЛ дугмади, можете им дати већу контролу над њиховим играњем.

Овај чланак ће вам показати како да направите решење у ЈаваСцрипт-у које омогућава играчима да бирају између различитих подешавања тајмера помоћу дугмади. На пример, избор дугмета '30с' ће подесити тајмер на 30 секунди, док се кликом на дугме '60с' мења на 60 секунди.

ЈаваСцрипт функција ће узети вредност са дугмета на које сте кликнули и динамички ће ажурирати и тајмер и наслов игре. Ова врста флексибилности може побољшати корисничко искуство, чинећи игру прилагодљивијом и пријатнијом за различите нивое вештина.

До краја овог водича, имаћете потпуно функционалну функцију подешавања тајмера користећи ХТМЛ и ЈаваСцрипт. Такође ћемо покрити како да ажурирамо приказану вредност тајмера у наслову странице да би одражавала изабрано трајање тајмера.

Креирање динамичких тајмера помоћу ЈаваСцрипт и ХТМЛ дугмади

Горе наведене скрипте су дизајниране да омогуће кориснику да динамички подешава тајмер игре у игри за куцање кликом на ХТМЛ дугмад. У почетку декларишемо променљиву гамеТиме, који задржава време у милисекундама (30 секунди подразумевано, помножено са 1000 да би се претворило у милисекунде). Кључна функционалност лежи у цхангеТимер функција, која ажурира вредност тајмера на основу дугмета на које се кликне. Овај метод прима вредност дугмета (нпр. 30, 60 или 90) и ажурира гамеТиме сходно томе променљива. Поред тога, скрипта ажурира наслов странице тако да одражава изабрано трајање тајмера, стављајући корисницима до знања колико времена имају.

За динамичко понашање користимо слушаоце догађаја, посебно аддЕвентЛистенер команда. Ово омогућава скрипти да реагује када корисник кликне на било које дугме. Сваком дугмету је додељен ИД и, када се кликне, покреће цхангеТимер функцију, која пропушта одговарајућу временску вредност. Овај приступ је користан за ефикасно руковање више дугмади без потребе за понављањем уграђеног ЈаваСцрипт-а у ХТМЛ структури. Скрипта такође укључује резервну опцију где можете да користите инлине руковаоце догађајима као што је онЦлицк ако се преферира једноставност у односу на модуларност.

У алтернативном решењу, директно везујемо онЦлицк догађај на дугмад. Овај метод извршава цхангеТимер функционишу директно на дугме на које се кликне. То је једноставан приступ, али му недостаје флексибилност методе слушања догађаја. Једноставност ове методе је корисна за мање, мање сложене апликације. Међутим, за скалабилнији код, слушаоци догађаја нуде већу флексибилност и омогућавају лакше ажурирање скрипте без директног мењања ХТМЛ структуре. Обе методе имају за циљ да реше исти проблем, а то је подешавање тајмера и динамичко ажурирање наслова на основу избора корисника.

На крају, имплементирамо јединичне тестове користећи Јест, ЈаваСцрипт оквир за тестирање. Тхе тест функције су кључне за проверу да ли се тајмер правилно ажурира. Тестирањем више сценарија, као што је да ли се тајмер прилагођава на 30 секунди, 60 секунди или 90 секунди, ови тестови јединица осигуравају исправност скрипте. Команде попут очекивати и тоБе се користе за проверу да стварна вредност тајмера и наслов странице одговарају очекиваним исходима. Ова фаза тестирања осигурава да ваша логика тајмера исправно функционише у различитим случајевима коришћења, пружајући поверење у робусност вашег решења.

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

Побољшање интеракције у игри са прилагођавањем тајмера

Још један аспект који треба узети у обзир када мењате тајмер у игри за куцање је укупно корисничко искуство и интерфејс. Поред подешавања тајмера игре преко дугмади, важно је дати играчима визуелне повратне информације о одабраном тајмеру. Ово се може постићи ажурирањем других елемената на страници, као што је приказ одбројавања. Након што се кликне на дугме за подешавање тајмера, тајмер би требало да почне одмах, пружајући кориснику повратну информацију у реалном времену. Ово осигурава да је интеракција глатка и интуитивна, чинећи игру занимљивијом.

Да бисте ово применили, можете користити ЈаваСцрипт сетИнтервал функција. Када је тајмер подешен, сетИнтервал може се користити за креирање одбројавања које смањује вредност тајмера сваке секунде. Када тајмер достигне нулу, функција може или зауставити игру или упозорити корисника да је време истекло. Ова функционалност, у комбинацији са могућношћу динамичке промене тајмера помоћу дугмади, значајно побољшава искуство играња. Интерфејс који реагује је кључан за одржавање ангажовања играча, а повратне информације у реалном времену су један од начина да се то постигне.

Штавише, треба размотрити руковање грешкама. На пример, ако корисник покуша да покрене игру без подешавања тајмера, можете га поруком затражити да одабере важеће време. Укључујући механизме валидације, осигуравате да игра ради несметано и смањује потенцијалне проблеме. Ова врста провере не само да побољшава корисничко искуство већ и доприноси поузданости ваше игре, осигуравајући да се играчи не суочавају са непотребном конфузијом.