HTML 버튼을 사용하여 타이핑 게임의 JavaScript 타이머 값을 수정하는 방법

버튼을 이용한 타이핑 게임의 동적 타이머 조정

타이핑 게임에서는 매력적인 사용자 경험을 보장하기 위해 게임 속도를 제어하는 ​​것이 중요합니다. 중요한 요소 중 하나는 사용자가 게임이나 타이핑 과제를 완료해야 하는 시간을 결정하는 타이머입니다. 사용자가 간단한 HTML 버튼을 통해 게임 타이머를 조정할 수 있도록 하면 게임 플레이를 더 효과적으로 제어할 수 있습니다.

이 문서에서는 플레이어가 버튼을 사용하여 다양한 타이머 설정 중에서 선택할 수 있도록 하는 JavaScript 솔루션을 만드는 방법을 보여줍니다. 예를 들어, '30초' 버튼을 선택하면 타이머가 30초로 조정되고, '60초' 버튼을 클릭하면 60초로 변경됩니다.

JavaScript 함수는 클릭한 버튼의 값을 가져와 타이머와 게임 제목을 동적으로 업데이트합니다. 이러한 종류의 유연성은 사용자 경험을 향상시켜 다양한 기술 수준에 맞게 게임을 더욱 맞춤화하고 즐겁게 만들 수 있습니다.

이 가이드가 끝나면 HTML 및 JavaScript를 사용하여 완전한 기능을 갖춘 타이머 조정 기능을 갖게 됩니다. 또한 선택한 타이머 기간을 반영하도록 페이지 제목에 표시된 타이머 값을 업데이트하는 방법도 다룹니다.

명령	사용예
document.querySelector()	브라우저 탭의 제목을 동적으로 업데이트하기 위해 HTML
addEventListener()	특정 이벤트(예: 클릭)를 버튼 요소에 바인딩합니다. 이 컨텍스트에서는 사용자가 버튼을 클릭할 때 ChangeTimer() 함수를 트리거하는 데 사용되어 타이머 설정과의 동적 상호 작용을 허용합니다.
innerText	이 속성을 사용하면 HTML 요소 내에서 표시되는 텍스트를 수정할 수 있습니다. 이 솔루션에서는 버튼을 클릭할 때 페이지 제목의 타이머 값을 업데이트하는 데 사용됩니다.
onClick	ChangeTimer() 함수를 버튼의 클릭 이벤트에 직접 연결하기 위한 대체 접근 방식에 사용되는 인라인 이벤트 핸들러 속성입니다. 이를 통해 타이머를 동적으로 업데이트하는 더 간단하고 덜 모듈화된 방식이 가능해졌습니다.
test()	이 방법은 Jest를 사용한 단위 테스트에 사용됩니다. 타이머가 올바르게 업데이트되는지 확인하기 위해 테스트 중인 함수(예:changeTimer())를 평가하는 테스트 케이스를 정의합니다. 다양한 시나리오에서 코드가 예상대로 작동하도록 보장합니다.
expect()	업데이트된 타이머와 같은 실제 값이 예상 값과 일치하는지 확인하는 Jest 명령입니다. 이는 버튼 클릭 후 gameTime 및 document.title이 올바르게 업데이트되는지 확인하기 위해 단위 테스트에 사용됩니다.
toBe()	엄격한 평등을 확인하는 또 다른 Jest 명령입니다. ChangeTimer()를 호출한 후 게임 시간이 정확히 예상한 시간(예: 30초 동안 30,000ms)인지 확인합니다.
getElementById()	ID로 특정 버튼을 선택하는 데 사용됩니다(예: '30', '60'). 이 메서드는 이벤트 리스너를 버튼에 연결하고 사용자 상호 작용에 대한 응답으로 타이머의 동적 변경을 트리거하는 데 중요합니다.

JavaScript 및 HTML 버튼을 사용하여 동적 타이머 만들기

위에 제공된 스크립트는 사용자가 HTML 버튼을 클릭하여 타이핑 게임에서 게임 타이머를 동적으로 조정할 수 있도록 설계되었습니다. 처음에는 변수를 선언합니다. , 밀리초 단위로 시간을 유지합니다(기본적으로 30초, 밀리초로 변환하려면 1000을 곱함). 핵심 기능은 다음과 같습니다. 클릭한 버튼에 따라 타이머 값을 업데이트하는 함수입니다. 이 메소드는 버튼 값(예: 30, 60 또는 90)을 수신하고 그에 따라 가변적입니다. 또한 스크립트는 선택한 타이머 기간을 반영하도록 페이지 제목을 업데이트하여 사용자에게 시간이 얼마나 있는지 명확하게 보여줍니다.

동적 동작을 위해 이벤트 리스너, 특히 명령. 이를 통해 사용자가 버튼을 클릭할 때 스크립트가 반응할 수 있습니다. 각 버튼에는 ID가 할당되어 있으며 클릭하면 함수, 해당 시간 값을 전달합니다. 이 접근 방식은 HTML 구조에서 반복적인 인라인 JavaScript가 필요 없이 여러 버튼을 효율적으로 처리하는 데 유용합니다. 스크립트에는 다음과 같은 인라인 이벤트 핸들러를 사용할 수 있는 대체 옵션도 포함되어 있습니다. 모듈성보다 단순성을 선호하는 경우.

대체 솔루션에서는 버튼에 대한 이벤트입니다. 이 메소드는 버튼을 클릭하면 바로 작동합니다. 이는 간단한 접근 방식이지만 이벤트 리스너 메서드의 유연성이 부족합니다. 이 방법의 단순성은 더 작고 덜 복잡한 애플리케이션에 유용합니다. 그러나 확장 가능한 코드의 경우 이벤트 리스너를 사용하면 더 많은 유연성을 제공하고 HTML 구조를 직접 수정하지 않고도 스크립트를 더 쉽게 업데이트할 수 있습니다. 두 가지 방법 모두 동일한 문제를 해결하는 것을 목표로 합니다. 즉, 사용자의 선택에 따라 타이머를 조정하고 제목을 동적으로 업데이트하는 것입니다.

마지막으로 JavaScript 테스트 프레임워크인 Jest를 사용하여 단위 테스트를 구현합니다. 그만큼 기능은 타이머가 제대로 업데이트되는지 확인하는 데 중요합니다. 타이머가 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');
});

타이머 사용자 정의로 게임 상호 작용 향상

타이핑 게임에서 타이머를 변경할 때 고려해야 할 또 다른 측면은 전반적인 사용자 경험과 인터페이스입니다. 버튼을 통해 게임 타이머를 조정하는 것 외에도 플레이어에게 선택한 타이머에 대한 시각적 피드백을 제공하는 것이 중요합니다. 이는 카운트다운 표시와 같은 페이지의 다른 요소를 업데이트하여 달성할 수 있습니다. 타이머를 설정하기 위해 버튼을 클릭하면 카운트다운 타이머가 즉시 시작되어 사용자에게 실시간 피드백을 제공해야 합니다. 이를 통해 상호 작용이 원활하고 직관적이게 되어 게임을 더욱 매력적으로 만들 수 있습니다.

이를 구현하려면 JavaScript를 사용할 수 있습니다. 기능. 타이머가 설정되면, 간격 설정 매초 타이머 값을 줄이는 카운트다운을 만드는 데 사용할 수 있습니다. 타이머가 0에 도달하면 이 기능은 게임을 중지하거나 사용자에게 시간이 다되었음을 알릴 수 있습니다. 버튼을 사용하여 타이머를 동적으로 변경하는 기능과 결합된 이 기능은 게임 플레이 경험을 크게 향상시킵니다. 반응형 인터페이스는 플레이어의 참여를 유지하는 데 핵심이며 실시간 피드백은 이를 달성하는 한 가지 방법입니다.

또한 오류 처리도 고려해야 합니다. 예를 들어 사용자가 타이머를 설정하지 않고 게임을 시작하려고 하면 유효한 시간을 선택하라는 메시지를 표시할 수 있습니다. 유효성 검사 메커니즘을 통합하면 게임이 원활하게 작동하고 잠재적인 문제를 줄일 수 있습니다. 이러한 유형의 검증은 사용자 경험을 향상시킬 뿐만 아니라 게임의 안정성에도 기여하여 플레이어가 불필요한 혼란에 직면하지 않도록 보장합니다.

1. 어떻게 사용하나요? 카운트다운을 만들려고?
2. 당신은 사용할 수 있습니다 1000밀리초(1초)마다 실행되도록 설정하고 매번 타이머 값을 줄입니다. 값이 0에 도달하면 다음을 사용하여 카운트다운을 중지할 수 있습니다. .
3. 목적은 무엇입니까? ?
4. 카운트다운이나 시작된 기타 반복 작업을 중지하는 데 사용됩니다. . 0에 도달하면 카운트다운이 중단되도록 하는 것이 중요합니다.
5. HTML 제목을 동적으로 업데이트하려면 어떻게 해야 합니까?
6. 사용 페이지 제목의 텍스트를 설정합니다. 이는 귀하의 내에서 업데이트될 수 있습니다. 선택한 시간 값에 따라 기능합니다.
7. 타이머 선택 시 사용자 오류를 처리할 수 있나요?
8. 예, 카운트다운을 시작하기 전에 유효한 타이머 옵션이 선택되었는지 확인하여 유효성 검사를 추가할 수 있습니다. 유효한 시간을 선택하지 않은 경우 경고나 프롬프트를 표시할 수 있습니다.
9. 버튼을 클릭할 때 기능을 어떻게 트리거합니까?
10. 다음을 사용하여 버튼에 기능을 첨부할 수 있습니다. 또는 직접 사용하여 버튼의 HTML 요소에 있습니다.

타이핑 게임에 동적 타이머 조정을 통합하면 플레이어 경험이 크게 향상됩니다. 사용자가 간단한 HTML 버튼을 사용하여 타이머를 변경하고 게임 인터페이스를 실시간으로 업데이트할 수 있도록 함으로써 개발자는 게임을 더욱 상호 작용적이고 유연하게 만들 수 있습니다. 이러한 유형의 제어는 다양한 기술 수준을 수용하는 데 도움이 됩니다.

이벤트 리스너, 오류 처리, 단위 테스트 등의 모범 사례를 사용하면 게임이 원활하게 실행되고 안정적인 사용자 경험을 제공할 수 있습니다. 이러한 기능을 구현하면 게임의 기능이 향상될 뿐만 아니라 반응성이 뛰어나고 사용자 친화적인 메커니즘을 통해 플레이어의 참여도를 높일 수 있습니다.