HTML ಬಟನ್‌ಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಟೈಪಿಂಗ್ ಗೇಮ್‌ಗಾಗಿ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಟೈಮರ್ ಮೌಲ್ಯವನ್ನು ಹೇಗೆ ಮಾರ್ಪಡಿಸುವುದು

ಟೈಪಿಂಗ್‌ಗಾಗಿ ಡೈನಾಮಿಕ್ ಟೈಮರ್ ಹೊಂದಾಣಿಕೆ ಗೇಮ್ ಬಟನ್‌ಗಳನ್ನು ಬಳಸುವುದು

ಟೈಪಿಂಗ್ ಆಟದಲ್ಲಿ, ತೊಡಗಿಸಿಕೊಳ್ಳುವ ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಆಟದ ವೇಗವನ್ನು ನಿಯಂತ್ರಿಸುವುದು ಮುಖ್ಯವಾಗಿದೆ. ಒಂದು ಪ್ರಮುಖ ಅಂಶವೆಂದರೆ ಟೈಮರ್, ಇದು ಬಳಕೆದಾರರು ಎಷ್ಟು ಸಮಯದವರೆಗೆ ಆಟವನ್ನು ಪೂರ್ಣಗೊಳಿಸಬೇಕು ಅಥವಾ ಟೈಪಿಂಗ್ ಸವಾಲನ್ನು ನಿರ್ಧರಿಸುತ್ತದೆ. ಸರಳ HTML ಬಟನ್‌ಗಳ ಮೂಲಕ ಆಟದ ಟೈಮರ್ ಅನ್ನು ಹೊಂದಿಸಲು ಬಳಕೆದಾರರಿಗೆ ಅವಕಾಶ ನೀಡುವ ಮೂಲಕ, ನೀವು ಅವರ ಆಟದ ಮೇಲೆ ಹೆಚ್ಚಿನ ನಿಯಂತ್ರಣವನ್ನು ಅವರಿಗೆ ನೀಡಬಹುದು.

ಬಟನ್‌ಗಳನ್ನು ಬಳಸಿಕೊಂಡು ವಿಭಿನ್ನ ಟೈಮರ್ ಸೆಟ್ಟಿಂಗ್‌ಗಳ ನಡುವೆ ಆಯ್ಕೆ ಮಾಡಲು ಆಟಗಾರರನ್ನು ಅನುಮತಿಸುವ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನಲ್ಲಿ ಪರಿಹಾರವನ್ನು ಹೇಗೆ ರಚಿಸುವುದು ಎಂಬುದನ್ನು ಈ ಲೇಖನವು ನಿಮಗೆ ತೋರಿಸುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, '30s' ಬಟನ್ ಅನ್ನು ಆಯ್ಕೆ ಮಾಡುವುದರಿಂದ ಟೈಮರ್ ಅನ್ನು 30 ಸೆಕೆಂಡುಗಳಿಗೆ ಸರಿಹೊಂದಿಸುತ್ತದೆ, ಆದರೆ '60s' ಬಟನ್ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡುವುದರಿಂದ ಅದನ್ನು 60 ಸೆಕೆಂಡುಗಳಿಗೆ ಬದಲಾಯಿಸುತ್ತದೆ.

JavaScript ಕಾರ್ಯವು ಕ್ಲಿಕ್ ಮಾಡಿದ ಬಟನ್‌ನಿಂದ ಮೌಲ್ಯವನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ ಮತ್ತು ಟೈಮರ್ ಮತ್ತು ಆಟದ ಶೀರ್ಷಿಕೆ ಎರಡನ್ನೂ ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ನವೀಕರಿಸುತ್ತದೆ. ಈ ರೀತಿಯ ನಮ್ಯತೆಯು ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ಹೆಚ್ಚಿಸಬಹುದು, ವಿಭಿನ್ನ ಕೌಶಲ್ಯ ಮಟ್ಟಗಳಿಗೆ ಆಟವನ್ನು ಹೆಚ್ಚು ಗ್ರಾಹಕೀಯಗೊಳಿಸಬಹುದು ಮತ್ತು ಆನಂದಿಸಬಹುದು.

ಈ ಮಾರ್ಗದರ್ಶಿಯ ಅಂತ್ಯದ ವೇಳೆಗೆ, ನೀವು HTML ಮತ್ತು JavaScript ಅನ್ನು ಬಳಸಿಕೊಂಡು ಸಂಪೂರ್ಣ ಕ್ರಿಯಾತ್ಮಕ ಟೈಮರ್ ಹೊಂದಾಣಿಕೆ ವೈಶಿಷ್ಟ್ಯವನ್ನು ಹೊಂದಿರುತ್ತೀರಿ. ಆಯ್ಕೆಮಾಡಿದ ಟೈಮರ್ ಅವಧಿಯನ್ನು ಪ್ರತಿಬಿಂಬಿಸಲು ಪುಟದ ಶೀರ್ಷಿಕೆಯಲ್ಲಿ ಪ್ರದರ್ಶಿಸಲಾದ ಟೈಮರ್ ಮೌಲ್ಯವನ್ನು ಹೇಗೆ ನವೀಕರಿಸುವುದು ಎಂಬುದನ್ನು ಸಹ ನಾವು ಕವರ್ ಮಾಡುತ್ತೇವೆ.

ಆಜ್ಞೆ	ಬಳಕೆಯ ಉದಾಹರಣೆ
document.querySelector()	ಬ್ರೌಸರ್ ಟ್ಯಾಬ್‌ನ ಶೀರ್ಷಿಕೆಯನ್ನು ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ನವೀಕರಿಸಲು HTML
addEventListener()	ನಿರ್ದಿಷ್ಟ ಈವೆಂಟ್ ಅನ್ನು (ಉದಾ. ಕ್ಲಿಕ್ ಮಾಡಿ) ಬಟನ್ ಅಂಶಕ್ಕೆ ಬಂಧಿಸುತ್ತದೆ. ಈ ಸಂದರ್ಭದಲ್ಲಿ, ಬಳಕೆದಾರರು ಬಟನ್ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ, ಟೈಮರ್ ಸೆಟ್ಟಿಂಗ್‌ಗಳೊಂದಿಗೆ ಡೈನಾಮಿಕ್ ಪರಸ್ಪರ ಕ್ರಿಯೆಯನ್ನು ಅನುಮತಿಸಿದಾಗ changeTimer() ಕಾರ್ಯವನ್ನು ಪ್ರಚೋದಿಸಲು ಇದನ್ನು ಬಳಸಲಾಗುತ್ತದೆ.
innerText	ಈ ಗುಣಲಕ್ಷಣವು HTML ಅಂಶದೊಳಗೆ ಗೋಚರಿಸುವ ಪಠ್ಯವನ್ನು ಮಾರ್ಪಡಿಸಲು ಅನುಮತಿಸುತ್ತದೆ. ಈ ಪರಿಹಾರದಲ್ಲಿ, ಬಟನ್ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ ಪುಟದ ಶೀರ್ಷಿಕೆಯಲ್ಲಿ ಟೈಮರ್ ಮೌಲ್ಯವನ್ನು ನವೀಕರಿಸಲು ಇದನ್ನು ಬಳಸಲಾಗುತ್ತದೆ.
onClick	ಬಟನ್‌ನ ಕ್ಲಿಕ್ ಈವೆಂಟ್‌ಗೆ ನೇರವಾಗಿ changeTimer() ಕಾರ್ಯವನ್ನು ಲಗತ್ತಿಸಲು ಪರ್ಯಾಯ ವಿಧಾನದಲ್ಲಿ ಇನ್‌ಲೈನ್ ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್ ಗುಣಲಕ್ಷಣವನ್ನು ಬಳಸಲಾಗುತ್ತದೆ. ಟೈಮರ್ ಅನ್ನು ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ನವೀಕರಿಸಲು ಇದು ಸರಳವಾದ, ಕಡಿಮೆ ಮಾಡ್ಯುಲರ್ ಮಾರ್ಗವನ್ನು ಅನುಮತಿಸುತ್ತದೆ.
test()	ಈ ವಿಧಾನವನ್ನು ಜೆಸ್ಟ್ನೊಂದಿಗೆ ಘಟಕ ಪರೀಕ್ಷೆಯಲ್ಲಿ ಬಳಸಲಾಗುತ್ತದೆ. ಟೈಮರ್ ಅಪ್‌ಡೇಟ್‌ಗಳನ್ನು ಸರಿಯಾಗಿ ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಪರೀಕ್ಷಿಸಲಾಗುವ ಕಾರ್ಯವನ್ನು (ಉದಾ., changeTimer()) ಮೌಲ್ಯಮಾಪನ ಮಾಡುವ ಪರೀಕ್ಷಾ ಪ್ರಕರಣವನ್ನು ಇದು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ. ವಿಭಿನ್ನ ಸನ್ನಿವೇಶಗಳಲ್ಲಿ ಕೋಡ್ ನಿರೀಕ್ಷೆಯಂತೆ ವರ್ತಿಸುವುದನ್ನು ಇದು ಖಚಿತಪಡಿಸುತ್ತದೆ.
expect()	ನಿಜವಾದ ಮೌಲ್ಯವು (ನವೀಕರಿಸಿದ ಟೈಮರ್‌ನಂತೆ) ನಿರೀಕ್ಷಿತ ಮೌಲ್ಯಕ್ಕೆ ಹೊಂದಿಕೆಯಾಗುತ್ತದೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸುವ ಜೆಸ್ಟ್ ಆಜ್ಞೆ. ಬಟನ್ ಕ್ಲಿಕ್ ಮಾಡಿದ ನಂತರ ಗೇಮ್‌ಟೈಮ್ ಮತ್ತು ಡಾಕ್ಯುಮೆಂಟ್.ಟೈಟಲ್ ಅನ್ನು ಸರಿಯಾಗಿ ಅಪ್‌ಡೇಟ್ ಮಾಡಲಾಗಿದೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸಲು ಘಟಕ ಪರೀಕ್ಷೆಗಳಲ್ಲಿ ಇದನ್ನು ಬಳಸಲಾಗುತ್ತದೆ.
toBe()	ಕಟ್ಟುನಿಟ್ಟಾದ ಸಮಾನತೆಯನ್ನು ಪರಿಶೀಲಿಸುವ ಮತ್ತೊಂದು ಜೆಸ್ಟ್ ಆಜ್ಞೆ. changeTimer() ಗೆ ಕರೆ ಮಾಡಿದ ನಂತರ, ಆಟದ ಸಮಯವು ನಿಖರವಾಗಿ ನಿರೀಕ್ಷಿತವಾಗಿದೆ ಎಂದು ಇದು ಖಚಿತಪಡಿಸುತ್ತದೆ (ಉದಾ., 30 ಸೆಕೆಂಡುಗಳಿಗೆ 30,000 ms).
getElementById()	ನಿರ್ದಿಷ್ಟ ಬಟನ್‌ಗಳನ್ನು ಅವುಗಳ ID ಗಳ ಮೂಲಕ ಆಯ್ಕೆ ಮಾಡಲು ಬಳಸಲಾಗುತ್ತದೆ (ಉದಾ., 'ಮೂವತ್ತು', 'ಅರವತ್ತು'). ಈವೆಂಟ್ ಕೇಳುಗರನ್ನು ಬಟನ್‌ಗಳಿಗೆ ಲಗತ್ತಿಸಲು ಮತ್ತು ಬಳಕೆದಾರರ ಸಂವಹನಕ್ಕೆ ಪ್ರತಿಕ್ರಿಯೆಯಾಗಿ ಟೈಮರ್‌ನ ಡೈನಾಮಿಕ್ ಬದಲಾವಣೆಯನ್ನು ಪ್ರಚೋದಿಸಲು ಈ ವಿಧಾನವು ಮುಖ್ಯವಾಗಿದೆ.

JavaScript ಮತ್ತು HTML ಬಟನ್‌ಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಡೈನಾಮಿಕ್ ಟೈಮರ್‌ಗಳನ್ನು ರಚಿಸುವುದು

ಮೇಲೆ ಒದಗಿಸಲಾದ ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳನ್ನು HTML ಬಟನ್‌ಗಳನ್ನು ಕ್ಲಿಕ್ ಮಾಡುವ ಮೂಲಕ ಟೈಪಿಂಗ್ ಗೇಮ್‌ನಲ್ಲಿ ಆಟದ ಟೈಮರ್ ಅನ್ನು ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ಹೊಂದಿಸಲು ಬಳಕೆದಾರರನ್ನು ಅನುಮತಿಸಲು ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ. ಆರಂಭದಲ್ಲಿ, ನಾವು ವೇರಿಯಬಲ್ ಅನ್ನು ಘೋಷಿಸುತ್ತೇವೆ , ಇದು ಮಿಲಿಸೆಕೆಂಡ್‌ಗಳಲ್ಲಿ ಸಮಯವನ್ನು ಹಿಡಿದಿಟ್ಟುಕೊಳ್ಳುತ್ತದೆ (ಡೀಫಾಲ್ಟ್ ಆಗಿ 30 ಸೆಕೆಂಡುಗಳು, ಮಿಲಿಸೆಕೆಂಡ್‌ಗಳಿಗೆ ಪರಿವರ್ತಿಸಲು 1000 ರಿಂದ ಗುಣಿಸಿದಾಗ). ಪ್ರಮುಖ ಕಾರ್ಯಚಟುವಟಿಕೆಯಲ್ಲಿದೆ ಕಾರ್ಯ, ಇದು ಕ್ಲಿಕ್ ಮಾಡಿದ ಬಟನ್ ಅನ್ನು ಆಧರಿಸಿ ಟೈಮರ್ ಮೌಲ್ಯವನ್ನು ನವೀಕರಿಸುತ್ತದೆ. ಈ ವಿಧಾನವು ಬಟನ್‌ನ ಮೌಲ್ಯವನ್ನು ಪಡೆಯುತ್ತದೆ (ಉದಾ., 30, 60, ಅಥವಾ 90) ಮತ್ತು ನವೀಕರಿಸುತ್ತದೆ ಆಟದ ಸಮಯ ಅದಕ್ಕೆ ಅನುಗುಣವಾಗಿ ವೇರಿಯಬಲ್. ಹೆಚ್ಚುವರಿಯಾಗಿ, ಆಯ್ದ ಟೈಮರ್ ಅವಧಿಯನ್ನು ಪ್ರತಿಬಿಂಬಿಸಲು ಸ್ಕ್ರಿಪ್ಟ್ ಪುಟದ ಶೀರ್ಷಿಕೆಯನ್ನು ನವೀಕರಿಸುತ್ತದೆ, ಬಳಕೆದಾರರಿಗೆ ಅವರು ಎಷ್ಟು ಸಮಯವನ್ನು ಹೊಂದಿದ್ದಾರೆ ಎಂಬುದನ್ನು ಸ್ಪಷ್ಟಪಡಿಸುತ್ತದೆ.

ಕ್ರಿಯಾತ್ಮಕ ನಡವಳಿಕೆಗಾಗಿ, ನಾವು ಈವೆಂಟ್ ಕೇಳುಗರನ್ನು ವಿಶೇಷವಾಗಿ ಬಳಸಿಕೊಳ್ಳುತ್ತೇವೆ ಆಜ್ಞೆ. ಬಳಕೆದಾರರು ಯಾವುದೇ ಬಟನ್‌ಗಳನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ ಸ್ಕ್ರಿಪ್ಟ್ ಪ್ರತಿಕ್ರಿಯಿಸಲು ಇದು ಅನುಮತಿಸುತ್ತದೆ. ಪ್ರತಿ ಬಟನ್‌ಗೆ ಐಡಿಯನ್ನು ನಿಗದಿಪಡಿಸಲಾಗಿದೆ ಮತ್ತು ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ, ಟ್ರಿಗ್ಗರ್ ಮಾಡುತ್ತದೆ ಕಾರ್ಯ, ಆಯಾ ಸಮಯದ ಮೌಲ್ಯವನ್ನು ಹಾದುಹೋಗುತ್ತದೆ. HTML ರಚನೆಯಲ್ಲಿ ಪುನರಾವರ್ತಿತ ಇನ್‌ಲೈನ್ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅಗತ್ಯವಿಲ್ಲದೇ ಬಹು ಗುಂಡಿಗಳನ್ನು ಸಮರ್ಥವಾಗಿ ನಿರ್ವಹಿಸಲು ಈ ವಿಧಾನವು ಉಪಯುಕ್ತವಾಗಿದೆ. ಸ್ಕ್ರಿಪ್ಟ್ ಫಾಲ್‌ಬ್ಯಾಕ್ ಆಯ್ಕೆಯನ್ನು ಸಹ ಒಳಗೊಂಡಿದೆ, ಅಲ್ಲಿ ನೀವು ಇನ್‌ಲೈನ್ ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್‌ಗಳನ್ನು ಬಳಸಬಹುದು ಮಾಡ್ಯುಲಾರಿಟಿಗಿಂತ ಸರಳತೆಗೆ ಆದ್ಯತೆ ನೀಡಿದರೆ.

ಪರ್ಯಾಯ ಪರಿಹಾರದಲ್ಲಿ, ನಾವು ನೇರವಾಗಿ ಟೈ ಗುಂಡಿಗಳಿಗೆ ಈವೆಂಟ್. ಈ ವಿಧಾನವು ಕಾರ್ಯಗತಗೊಳಿಸುತ್ತದೆ ಕ್ಲಿಕ್ ಮಾಡಲಾದ ಬಟನ್ ಮೇಲೆ ನೇರವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ. ಇದು ನೇರವಾದ ವಿಧಾನವಾಗಿದೆ ಆದರೆ ಈವೆಂಟ್ ಕೇಳುಗ ವಿಧಾನದ ನಮ್ಯತೆಯನ್ನು ಹೊಂದಿಲ್ಲ. ಈ ವಿಧಾನದ ಸರಳತೆಯು ಚಿಕ್ಕದಾದ, ಕಡಿಮೆ ಸಂಕೀರ್ಣವಾದ ಅನ್ವಯಗಳಿಗೆ ಉಪಯುಕ್ತವಾಗಿದೆ. ಆದಾಗ್ಯೂ, ಹೆಚ್ಚು ಸ್ಕೇಲೆಬಲ್ ಕೋಡ್‌ಗಾಗಿ, ಈವೆಂಟ್ ಕೇಳುಗರು ಹೆಚ್ಚು ನಮ್ಯತೆಯನ್ನು ನೀಡುತ್ತಾರೆ ಮತ್ತು 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');
});

ಟೈಮರ್ ಗ್ರಾಹಕೀಕರಣದೊಂದಿಗೆ ಆಟದ ಸಂವಹನವನ್ನು ಹೆಚ್ಚಿಸುವುದು

ಟೈಪಿಂಗ್ ಆಟದಲ್ಲಿ ಟೈಮರ್ ಅನ್ನು ಬದಲಾಯಿಸುವಾಗ ಪರಿಗಣಿಸಬೇಕಾದ ಇನ್ನೊಂದು ಅಂಶವೆಂದರೆ ಒಟ್ಟಾರೆ ಬಳಕೆದಾರ ಅನುಭವ ಮತ್ತು ಇಂಟರ್ಫೇಸ್. ಬಟನ್‌ಗಳ ಮೂಲಕ ಆಟದ ಟೈಮರ್ ಅನ್ನು ಸರಿಹೊಂದಿಸುವುದರ ಜೊತೆಗೆ, ಆಟಗಾರರಿಗೆ ಅವರ ಆಯ್ಕೆಮಾಡಿದ ಟೈಮರ್‌ನಲ್ಲಿ ದೃಶ್ಯ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ನೀಡುವುದು ಮುಖ್ಯವಾಗಿದೆ. ಕೌಂಟ್‌ಡೌನ್ ಪ್ರದರ್ಶನದಂತಹ ಪುಟದಲ್ಲಿನ ಇತರ ಅಂಶಗಳನ್ನು ನವೀಕರಿಸುವ ಮೂಲಕ ಇದನ್ನು ಸಾಧಿಸಬಹುದು. ಟೈಮರ್ ಅನ್ನು ಹೊಂದಿಸಲು ಬಟನ್ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿದ ನಂತರ, ಕೌಂಟ್‌ಡೌನ್ ಟೈಮರ್ ತಕ್ಷಣವೇ ಪ್ರಾರಂಭವಾಗಬೇಕು, ಬಳಕೆದಾರರಿಗೆ ನೈಜ-ಸಮಯದ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ನೀಡುತ್ತದೆ. ಇದು ಪರಸ್ಪರ ಕ್ರಿಯೆಯು ನಯವಾದ ಮತ್ತು ಅರ್ಥಗರ್ಭಿತವಾಗಿದೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ, ಇದು ಆಟವನ್ನು ಹೆಚ್ಚು ತೊಡಗಿಸಿಕೊಳ್ಳುವಂತೆ ಮಾಡುತ್ತದೆ.

ಇದನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲು, ನೀವು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಬಳಸಬಹುದು ಕಾರ್ಯ. ಟೈಮರ್ ಅನ್ನು ಹೊಂದಿಸಿದ ನಂತರ, ಸೆಟ್ ಮಧ್ಯಂತರ ಪ್ರತಿ ಸೆಕೆಂಡಿಗೆ ಟೈಮರ್ ಮೌಲ್ಯವನ್ನು ಕಡಿಮೆ ಮಾಡುವ ಕೌಂಟ್ಡೌನ್ ಅನ್ನು ರಚಿಸಲು ಬಳಸಬಹುದು. ಟೈಮರ್ ಶೂನ್ಯವನ್ನು ತಲುಪಿದಾಗ, ಕಾರ್ಯವು ಆಟವನ್ನು ನಿಲ್ಲಿಸಬಹುದು ಅಥವಾ ಸಮಯ ಮುಗಿದಿದೆ ಎಂದು ಬಳಕೆದಾರರನ್ನು ಎಚ್ಚರಿಸಬಹುದು. ಗುಂಡಿಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಟೈಮರ್ ಅನ್ನು ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ಬದಲಾಯಿಸುವ ಸಾಮರ್ಥ್ಯದೊಂದಿಗೆ ಸಂಯೋಜಿಸಲ್ಪಟ್ಟ ಈ ಕಾರ್ಯವು ಆಟದ ಅನುಭವವನ್ನು ಗಮನಾರ್ಹವಾಗಿ ಹೆಚ್ಚಿಸುತ್ತದೆ. ಆಟಗಾರರನ್ನು ತೊಡಗಿಸಿಕೊಳ್ಳಲು ಸ್ಪಂದಿಸುವ ಇಂಟರ್ಫೇಸ್ ಪ್ರಮುಖವಾಗಿದೆ ಮತ್ತು ನೈಜ-ಸಮಯದ ಪ್ರತಿಕ್ರಿಯೆಯು ಅದನ್ನು ಸಾಧಿಸುವ ಒಂದು ಮಾರ್ಗವಾಗಿದೆ.

ಇದಲ್ಲದೆ, ದೋಷ ನಿರ್ವಹಣೆಯನ್ನು ಪರಿಗಣಿಸಬೇಕು. ಉದಾಹರಣೆಗೆ, ಬಳಕೆದಾರರು ಟೈಮರ್ ಅನ್ನು ಹೊಂದಿಸದೆ ಆಟವನ್ನು ಪ್ರಾರಂಭಿಸಲು ಪ್ರಯತ್ನಿಸಿದರೆ, ಮಾನ್ಯವಾದ ಸಮಯವನ್ನು ಆಯ್ಕೆ ಮಾಡಲು ನೀವು ಅವರಿಗೆ ಸಂದೇಶದೊಂದಿಗೆ ಪ್ರಾಂಪ್ಟ್ ಮಾಡಬಹುದು. ಮೌಲ್ಯೀಕರಣ ಕಾರ್ಯವಿಧಾನಗಳನ್ನು ಸಂಯೋಜಿಸುವ ಮೂಲಕ, ಆಟವು ಸುಗಮವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಮತ್ತು ಸಂಭಾವ್ಯ ಸಮಸ್ಯೆಗಳನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ ಎಂದು ನೀವು ಖಚಿತಪಡಿಸುತ್ತೀರಿ. ಈ ರೀತಿಯ ಮೌಲ್ಯೀಕರಣವು ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ಸುಧಾರಿಸುವುದಲ್ಲದೆ, ನಿಮ್ಮ ಆಟದ ವಿಶ್ವಾಸಾರ್ಹತೆಗೆ ಕೊಡುಗೆ ನೀಡುತ್ತದೆ, ಆಟಗಾರರು ಅನಗತ್ಯ ಗೊಂದಲವನ್ನು ಎದುರಿಸುವುದಿಲ್ಲ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ.

1. ನಾನು ಹೇಗೆ ಬಳಸಲಿ ಕೌಂಟ್ಡೌನ್ ರಚಿಸಲು?
2. ನೀವು ಬಳಸಬಹುದು ಪ್ರತಿ 1000 ಮಿಲಿಸೆಕೆಂಡ್‌ಗಳಿಗೆ (1 ಸೆಕೆಂಡ್) ಅದನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲು ಹೊಂದಿಸುವ ಮೂಲಕ ಮತ್ತು ಪ್ರತಿ ಬಾರಿ ಟೈಮರ್ ಮೌಲ್ಯವನ್ನು ಕಡಿಮೆ ಮಾಡುವ ಮೂಲಕ. ಮೌಲ್ಯವು ಶೂನ್ಯವನ್ನು ತಲುಪಿದಾಗ, ನೀವು ಬಳಸಿಕೊಂಡು ಕೌಂಟ್ಡೌನ್ ಅನ್ನು ನಿಲ್ಲಿಸಬಹುದು .
3. ಇದರ ಉದ್ದೇಶವೇನು ?
4. ಕೌಂಟ್‌ಡೌನ್ ಅಥವಾ ಯಾವುದೇ ಇತರ ಪುನರಾವರ್ತಿತ ಕ್ರಿಯೆಯನ್ನು ಪ್ರಾರಂಭಿಸುವುದನ್ನು ನಿಲ್ಲಿಸಲು ಬಳಸಲಾಗುತ್ತದೆ . ಕೌಂಟ್‌ಡೌನ್ ಶೂನ್ಯವನ್ನು ತಲುಪಿದಾಗ ಸ್ಥಗಿತಗೊಳ್ಳುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳುವುದು ಬಹಳ ಮುಖ್ಯ.
5. ನಾನು HTML ಶೀರ್ಷಿಕೆಯನ್ನು ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ಹೇಗೆ ನವೀಕರಿಸಬಹುದು?
6. ಬಳಸಿ ಪುಟದ ಶೀರ್ಷಿಕೆಯ ಪಠ್ಯವನ್ನು ಹೊಂದಿಸಲು. ಇದನ್ನು ನಿಮ್ಮೊಳಗೆ ನವೀಕರಿಸಬಹುದು ಆಯ್ದ ಸಮಯದ ಮೌಲ್ಯವನ್ನು ಆಧರಿಸಿ ಕಾರ್ಯ.
7. ಟೈಮರ್ ಅನ್ನು ಆಯ್ಕೆಮಾಡುವಾಗ ನಾನು ಬಳಕೆದಾರರ ದೋಷಗಳನ್ನು ನಿಭಾಯಿಸಬಹುದೇ?
8. ಹೌದು, ಕೌಂಟ್‌ಡೌನ್ ಪ್ರಾರಂಭಿಸುವ ಮೊದಲು ಮಾನ್ಯವಾದ ಟೈಮರ್ ಆಯ್ಕೆಯನ್ನು ಆರಿಸಲಾಗಿದೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸುವ ಮೂಲಕ ನೀವು ಮೌಲ್ಯೀಕರಣವನ್ನು ಸೇರಿಸಬಹುದು. ಮಾನ್ಯವಾದ ಸಮಯವನ್ನು ಆಯ್ಕೆ ಮಾಡದಿದ್ದರೆ, ನೀವು ಎಚ್ಚರಿಕೆ ಅಥವಾ ಪ್ರಾಂಪ್ಟ್ ಅನ್ನು ಪ್ರದರ್ಶಿಸಬಹುದು.
9. ಬಟನ್ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ ನಾನು ಕಾರ್ಯವನ್ನು ಹೇಗೆ ಪ್ರಚೋದಿಸುವುದು?
10. ನೀವು ಬಳಸಿಕೊಂಡು ಬಟನ್‌ಗೆ ಕಾರ್ಯವನ್ನು ಲಗತ್ತಿಸಬಹುದು ಅಥವಾ ನೇರವಾಗಿ ಬಳಸುವ ಮೂಲಕ ಬಟನ್‌ನ HTML ಅಂಶದಲ್ಲಿ.

ಟೈಪಿಂಗ್ ಆಟದಲ್ಲಿ ಡೈನಾಮಿಕ್ ಟೈಮರ್ ಹೊಂದಾಣಿಕೆಗಳನ್ನು ಸೇರಿಸುವುದು ಆಟಗಾರರ ಅನುಭವವನ್ನು ಗಮನಾರ್ಹವಾಗಿ ಸುಧಾರಿಸುತ್ತದೆ. ಸರಳ HTML ಬಟನ್‌ಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಟೈಮರ್ ಅನ್ನು ಬದಲಾಯಿಸಲು ಬಳಕೆದಾರರಿಗೆ ಅವಕಾಶ ನೀಡುವ ಮೂಲಕ ಮತ್ತು ನೈಜ ಸಮಯದಲ್ಲಿ ಆಟದ ಇಂಟರ್ಫೇಸ್ ಅನ್ನು ನವೀಕರಿಸುವ ಮೂಲಕ, ಡೆವಲಪರ್‌ಗಳು ತಮ್ಮ ಆಟಗಳನ್ನು ಹೆಚ್ಚು ಸಂವಾದಾತ್ಮಕ ಮತ್ತು ಹೊಂದಿಕೊಳ್ಳುವಂತೆ ಮಾಡಬಹುದು. ಈ ರೀತಿಯ ನಿಯಂತ್ರಣವು ವಿಭಿನ್ನ ಕೌಶಲ್ಯ ಮಟ್ಟವನ್ನು ಸರಿಹೊಂದಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ.

ಈವೆಂಟ್ ಕೇಳುಗರು, ದೋಷ ನಿರ್ವಹಣೆ ಮತ್ತು ಘಟಕ ಪರೀಕ್ಷೆಗಳಂತಹ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಬಳಸುವುದರಿಂದ ಆಟವು ಸುಗಮವಾಗಿ ಸಾಗುತ್ತದೆ ಮತ್ತು ವಿಶ್ವಾಸಾರ್ಹ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ಒದಗಿಸುತ್ತದೆ. ಈ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸುವುದರಿಂದ ಆಟದ ಕಾರ್ಯವನ್ನು ವರ್ಧಿಸುತ್ತದೆ ಆದರೆ ಆಟಗಾರರನ್ನು ಸ್ಪಂದಿಸುವ, ಬಳಕೆದಾರ ಸ್ನೇಹಿ ಯಂತ್ರಶಾಸ್ತ್ರದೊಂದಿಗೆ ಹೆಚ್ಚು ತೊಡಗಿಸಿಕೊಳ್ಳುತ್ತದೆ.