Cách sửa đổi giá trị bộ đếm thời gian JavaScript cho trò chơi đánh máy bằng các nút HTML

Điều chỉnh hẹn giờ động để gõ trò chơi bằng nút

Trong một trò chơi đánh máy, việc kiểm soát nhịp độ của trò chơi là rất quan trọng để đảm bảo trải nghiệm hấp dẫn cho người dùng. Một yếu tố quan trọng là bộ đếm thời gian, xác định thời gian người dùng phải hoàn thành trò chơi hoặc thử thách đánh máy. Bằng cách cho phép người dùng điều chỉnh bộ đếm thời gian của trò chơi thông qua các nút HTML đơn giản, bạn có thể cung cấp cho họ nhiều quyền kiểm soát hơn đối với lối chơi của mình.

Bài viết này sẽ hướng dẫn bạn cách tạo một giải pháp trong JavaScript cho phép người chơi lựa chọn giữa các cài đặt hẹn giờ khác nhau bằng cách sử dụng các nút. Ví dụ: chọn nút '30 giây' sẽ điều chỉnh bộ hẹn giờ thành 30 giây, trong khi nhấp vào nút '60 giây' sẽ thay đổi thành 60 giây.

Hàm JavaScript sẽ lấy giá trị từ nút được nhấp và cập nhật động cả bộ đếm thời gian và tiêu đề trò chơi. Tính linh hoạt này có thể nâng cao trải nghiệm người dùng, giúp trò chơi trở nên tùy biến hơn và thú vị hơn đối với các cấp độ kỹ năng khác nhau.

Đến cuối hướng dẫn này, bạn sẽ có tính năng điều chỉnh hẹn giờ đầy đủ chức năng bằng cách sử dụng HTML và JavaScript. Chúng tôi cũng sẽ đề cập đến cách cập nhật giá trị bộ hẹn giờ được hiển thị trên tiêu đề của trang để phản ánh thời lượng bộ hẹn giờ đã chọn.

Yêu cầu	Ví dụ về sử dụng
document.querySelector()	Được sử dụng để chọn phần tử HTML
addEventListener()	Liên kết một sự kiện cụ thể (ví dụ: nhấp chuột) với thành phần nút. Trong ngữ cảnh này, nó được sử dụng để kích hoạt hàm ChangeTimer() khi người dùng nhấp vào nút, cho phép tương tác động với cài đặt hẹn giờ.
innerText	Thuộc tính này cho phép sửa đổi văn bản hiển thị trong phần tử HTML. Trong giải pháp này, nó được sử dụng để cập nhật giá trị bộ đếm thời gian trong tiêu đề của trang khi nhấp vào nút.
onClick	Thuộc tính xử lý sự kiện nội tuyến được sử dụng theo phương pháp thay thế để gắn trực tiếp hàm ChangeTimer() vào sự kiện nhấp chuột của nút. Điều này cho phép cập nhật bộ hẹn giờ một cách linh hoạt, đơn giản hơn, ít mô-đun hơn.
test()	Phương pháp này được sử dụng trong thử nghiệm đơn vị với Jest. Nó xác định một trường hợp thử nghiệm trong đó hàm đang được thử nghiệm (ví dụ: ChangeTimer()) được đánh giá để đảm bảo bộ đếm thời gian cập nhật chính xác. Nó đảm bảo mã hoạt động như mong đợi trong các tình huống khác nhau.
expect()	Lệnh Jest kiểm tra xem giá trị thực tế (như bộ hẹn giờ được cập nhật) có khớp với giá trị mong đợi hay không. Nó được sử dụng trong các bài kiểm tra đơn vị để xác minh rằng gameTime và document.title được cập nhật chính xác sau một lần bấm nút.
toBe()	Một lệnh Jest khác để kiểm tra sự bình đẳng nghiêm ngặt. Nó đảm bảo rằng sau khi gọi ChangeTimer(), thời gian trò chơi chính xác như mong đợi (ví dụ: 30.000 mili giây trong 30 giây).
getElementById()	Được sử dụng để chọn các nút cụ thể theo ID của chúng (ví dụ: 'ba mươi', 'sáu mươi'). Phương pháp này rất quan trọng để gắn trình xử lý sự kiện vào các nút và kích hoạt sự thay đổi động của bộ hẹn giờ để đáp ứng với tương tác của người dùng.

Tạo bộ hẹn giờ động bằng cách sử dụng nút JavaScript và HTML

Các tập lệnh được cung cấp ở trên được thiết kế để cho phép người dùng tự động điều chỉnh bộ hẹn giờ trò chơi trong trò chơi đánh máy bằng cách nhấp vào các nút HTML. Ban đầu chúng ta khai báo một biến , giữ thời gian tính bằng mili giây (30 giây theo mặc định, nhân với 1000 để chuyển đổi thành mili giây). Chức năng chính nằm ở chức năng cập nhật giá trị bộ đếm thời gian dựa trên nút được nhấp. Phương thức này nhận giá trị của nút (ví dụ: 30, 60 hoặc 90) và cập nhật trò chơiThời gian biến tương ứng. Ngoài ra, tập lệnh còn cập nhật tiêu đề của trang để phản ánh khoảng thời gian đã chọn, giúp người dùng biết rõ họ có bao nhiêu thời gian.

Đối với hành vi động, chúng tôi sử dụng trình xử lý sự kiện, cụ thể là yêu cầu. Điều này cho phép tập lệnh phản ứng khi người dùng nhấp vào bất kỳ nút nào. Mỗi nút được gán một ID và khi được nhấp vào sẽ kích hoạt hàm, truyền giá trị thời gian tương ứng. Cách tiếp cận này hữu ích để xử lý nhiều nút một cách hiệu quả mà không cần JavaScript nội tuyến lặp đi lặp lại trong cấu trúc HTML. Tập lệnh cũng bao gồm tùy chọn dự phòng nơi bạn có thể sử dụng các trình xử lý sự kiện nội tuyến như nếu sự đơn giản được ưa thích hơn tính mô-đun.

Trong giải pháp thay thế, chúng tôi liên kết trực tiếp sự kiện cho các nút. Phương pháp này thực hiện hoạt động trực tiếp khi nút được nhấp vào. Đó là một cách tiếp cận đơn giản nhưng thiếu tính linh hoạt của phương thức xử lý sự kiện. Sự đơn giản của phương pháp này rất hữu ích cho các ứng dụng nhỏ hơn, ít phức tạp hơn. Tuy nhiên, để mã có khả năng mở rộng cao hơn, trình xử lý sự kiện mang lại sự linh hoạt hơn và cho phép cập nhật tập lệnh dễ dàng hơn mà không cần sửa đổi trực tiếp cấu trúc HTML. Cả hai phương pháp đều nhằm giải quyết cùng một vấn đề, đó là điều chỉnh bộ đếm thời gian và cập nhật tiêu đề một cách linh hoạt dựa trên lựa chọn của người dùng.

Cuối cùng, chúng tôi triển khai các bài kiểm tra đơn vị bằng cách sử dụng Jest, một khung kiểm tra JavaScript. các các chức năng rất quan trọng để xác nhận rằng bộ hẹn giờ cập nhật đúng cách. Bằng cách kiểm tra nhiều tình huống, chẳng hạn như bộ hẹn giờ điều chỉnh thành 30 giây, 60 giây hay 90 giây, các thử nghiệm đơn vị này đảm bảo tính chính xác của tập lệnh. Các lệnh như Và được sử dụng để xác minh rằng giá trị bộ đếm thời gian thực tế và tiêu đề trang phù hợp với kết quả mong đợi. Giai đoạn thử nghiệm này đảm bảo rằng logic hẹn giờ của bạn hoạt động bình thường trong các trường hợp sử dụng khác nhau, mang lại sự tự tin về tính mạnh mẽ của giải pháp của bạn.

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

Tăng cường tương tác trò chơi với tùy chỉnh hẹn giờ

Một khía cạnh khác cần xem xét khi thay đổi bộ đếm thời gian trong trò chơi đánh máy là trải nghiệm và giao diện tổng thể của người dùng. Ngoài việc điều chỉnh bộ đếm thời gian của trò chơi thông qua các nút, điều quan trọng là cung cấp cho người chơi phản hồi trực quan về bộ đếm thời gian đã chọn của họ. Điều này có thể đạt được bằng cách cập nhật các thành phần khác trên trang, chẳng hạn như màn hình đếm ngược. Sau khi nhấp vào nút để đặt bộ hẹn giờ, đồng hồ đếm ngược sẽ bắt đầu ngay lập tức, cung cấp phản hồi theo thời gian thực cho người dùng. Điều này đảm bảo sự tương tác mượt mà và trực quan, giúp trò chơi trở nên hấp dẫn hơn.

Để thực hiện điều này, bạn có thể sử dụng JavaScript chức năng. Sau khi đã đặt hẹn giờ, tập khoảng thời gian có thể được sử dụng để tạo bộ đếm ngược làm giảm giá trị bộ đếm thời gian mỗi giây. Khi bộ đếm thời gian về 0, chức năng này có thể dừng trò chơi hoặc cảnh báo người dùng rằng đã hết thời gian. Chức năng này, kết hợp với khả năng tự động thay đổi bộ đếm thời gian bằng các nút, nâng cao đáng kể trải nghiệm chơi trò chơi. Giao diện đáp ứng là chìa khóa để thu hút người chơi và phản hồi theo thời gian thực là một cách để đạt được điều đó.

Hơn nữa, việc xử lý lỗi cũng cần được xem xét. Ví dụ: nếu người dùng cố gắng bắt đầu trò chơi mà không đặt hẹn giờ, bạn có thể nhắc họ bằng thông báo để chọn thời gian hợp lệ. Bằng cách kết hợp các cơ chế xác thực, bạn đảm bảo rằng trò chơi hoạt động trơn tru và giảm thiểu các sự cố tiềm ẩn. Loại xác thực này không chỉ cải thiện trải nghiệm người dùng mà còn góp phần nâng cao độ tin cậy cho trò chơi của bạn, đảm bảo người chơi không gặp phải sự nhầm lẫn không cần thiết.

1. Làm cách nào để sử dụng để tạo ra một sự đếm ngược?
2. Bạn có thể sử dụng bằng cách đặt nó thực thi cứ sau 1000 mili giây (1 giây) và giảm giá trị bộ đếm thời gian mỗi lần. Khi giá trị đạt đến 0, bạn có thể dừng đếm ngược bằng cách sử dụng .
3. Mục đích của việc này là gì ?
4. được sử dụng để dừng đếm ngược hoặc bất kỳ hành động định kỳ nào khác được bắt đầu bởi . Điều quan trọng là đảm bảo quá trình đếm ngược dừng lại khi nó về 0.
5. Làm cách nào tôi có thể cập nhật tiêu đề HTML một cách linh hoạt?
6. Sử dụng để đặt văn bản của tiêu đề trang. Điều này có thể được cập nhật trong vòng của bạn chức năng dựa trên giá trị thời gian đã chọn.
7. Tôi có thể xử lý lỗi người dùng khi chọn bộ hẹn giờ không?
8. Có, bạn có thể thêm xác thực bằng cách kiểm tra xem tùy chọn hẹn giờ hợp lệ đã được chọn hay chưa trước khi bắt đầu đếm ngược. Nếu không chọn thời gian hợp lệ, bạn có thể hiển thị cảnh báo hoặc lời nhắc.
9. Làm cách nào để kích hoạt chức năng khi nhấp vào nút?
10. Bạn có thể đính kèm một chức năng vào một nút bằng cách sử dụng hoặc bằng cách sử dụng trực tiếp trong phần tử HTML của nút.

Việc kết hợp các điều chỉnh hẹn giờ động trong trò chơi đánh máy sẽ cải thiện đáng kể trải nghiệm của người chơi. Bằng cách cho phép người dùng thay đổi bộ đếm thời gian bằng các nút HTML đơn giản và cập nhật giao diện của trò chơi theo thời gian thực, các nhà phát triển có thể làm cho trò chơi của họ trở nên tương tác và linh hoạt hơn. Kiểu kiểm soát này giúp đáp ứng các cấp độ kỹ năng khác nhau.

Việc sử dụng các phương pháp hay nhất như trình xử lý sự kiện, xử lý lỗi và kiểm tra đơn vị sẽ đảm bảo trò chơi chạy trơn tru và mang lại trải nghiệm đáng tin cậy cho người dùng. Việc triển khai các tính năng này sẽ không chỉ nâng cao chức năng của trò chơi mà còn giúp người chơi tương tác nhiều hơn với cơ chế phản hồi nhanh, thân thiện với người dùng.