HTML ਬਟਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇੱਕ ਟਾਈਪਿੰਗ ਗੇਮ ਲਈ JavaScript ਟਾਈਮਰ ਮੁੱਲ ਨੂੰ ਕਿਵੇਂ ਸੋਧਿਆ ਜਾਵੇ

ਬਟਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਟਾਈਪਿੰਗ ਗੇਮ ਲਈ ਡਾਇਨਾਮਿਕ ਟਾਈਮਰ ਐਡਜਸਟਮੈਂਟ

ਟਾਈਪਿੰਗ ਗੇਮ ਵਿੱਚ, ਇੱਕ ਆਕਰਸ਼ਕ ਉਪਭੋਗਤਾ ਅਨੁਭਵ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਗੇਮ ਦੀ ਗਤੀ ਨੂੰ ਨਿਯੰਤਰਿਤ ਕਰਨਾ ਮਹੱਤਵਪੂਰਨ ਹੈ। ਇੱਕ ਮਹੱਤਵਪੂਰਨ ਕਾਰਕ ਟਾਈਮਰ ਹੈ, ਜੋ ਇਹ ਨਿਰਧਾਰਤ ਕਰਦਾ ਹੈ ਕਿ ਉਪਭੋਗਤਾ ਨੂੰ ਗੇਮ ਜਾਂ ਟਾਈਪਿੰਗ ਚੁਣੌਤੀ ਨੂੰ ਕਿੰਨਾ ਸਮਾਂ ਪੂਰਾ ਕਰਨਾ ਹੈ। ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਸਧਾਰਨ HTML ਬਟਨਾਂ ਰਾਹੀਂ ਗੇਮ ਟਾਈਮਰ ਨੂੰ ਅਨੁਕੂਲ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦੇ ਕੇ, ਤੁਸੀਂ ਉਹਨਾਂ ਨੂੰ ਉਹਨਾਂ ਦੇ ਗੇਮਪਲੇ 'ਤੇ ਵਧੇਰੇ ਨਿਯੰਤਰਣ ਦੇ ਸਕਦੇ ਹੋ।

ਇਹ ਲੇਖ ਤੁਹਾਨੂੰ ਦਿਖਾਏਗਾ ਕਿ JavaScript ਵਿੱਚ ਇੱਕ ਹੱਲ ਕਿਵੇਂ ਬਣਾਇਆ ਜਾਵੇ ਜੋ ਖਿਡਾਰੀਆਂ ਨੂੰ ਬਟਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਵੱਖ-ਵੱਖ ਟਾਈਮਰ ਸੈਟਿੰਗਾਂ ਵਿਚਕਾਰ ਚੋਣ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ। ਉਦਾਹਰਨ ਲਈ, ਇੱਕ '30s' ਬਟਨ ਨੂੰ ਚੁਣਨ ਨਾਲ ਟਾਈਮਰ ਨੂੰ 30 ਸਕਿੰਟਾਂ ਵਿੱਚ ਵਿਵਸਥਿਤ ਕੀਤਾ ਜਾਵੇਗਾ, ਜਦੋਂ ਕਿ ਇੱਕ '60s' ਬਟਨ ਨੂੰ ਦਬਾਉਣ ਨਾਲ ਇਸਨੂੰ 60 ਸਕਿੰਟਾਂ ਵਿੱਚ ਬਦਲ ਦਿੱਤਾ ਜਾਵੇਗਾ।

JavaScript ਫੰਕਸ਼ਨ ਕਲਿੱਕ ਕੀਤੇ ਬਟਨ ਤੋਂ ਮੁੱਲ ਲਵੇਗਾ ਅਤੇ ਟਾਈਮਰ ਅਤੇ ਗੇਮ ਦੇ ਸਿਰਲੇਖ ਦੋਵਾਂ ਨੂੰ ਗਤੀਸ਼ੀਲ ਤੌਰ 'ਤੇ ਅਪਡੇਟ ਕਰੇਗਾ। ਇਸ ਕਿਸਮ ਦੀ ਲਚਕਤਾ ਉਪਭੋਗਤਾ ਅਨੁਭਵ ਨੂੰ ਵਧਾ ਸਕਦੀ ਹੈ, ਖੇਡ ਨੂੰ ਵੱਖ-ਵੱਖ ਹੁਨਰ ਪੱਧਰਾਂ ਲਈ ਵਧੇਰੇ ਅਨੁਕੂਲਿਤ ਅਤੇ ਅਨੰਦਦਾਇਕ ਬਣਾ ਸਕਦੀ ਹੈ।

ਇਸ ਗਾਈਡ ਦੇ ਅੰਤ ਤੱਕ, ਤੁਹਾਡੇ ਕੋਲ HTML ਅਤੇ JavaScript ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਇੱਕ ਪੂਰੀ ਤਰ੍ਹਾਂ ਕਾਰਜਸ਼ੀਲ ਟਾਈਮਰ ਐਡਜਸਟਮੈਂਟ ਵਿਸ਼ੇਸ਼ਤਾ ਹੋਵੇਗੀ। ਅਸੀਂ ਇਹ ਵੀ ਕਵਰ ਕਰਾਂਗੇ ਕਿ ਚੁਣੇ ਹੋਏ ਟਾਈਮਰ ਦੀ ਮਿਆਦ ਨੂੰ ਦਰਸਾਉਣ ਲਈ ਪੰਨੇ ਦੇ ਸਿਰਲੇਖ 'ਤੇ ਪ੍ਰਦਰਸ਼ਿਤ ਟਾਈਮਰ ਮੁੱਲ ਨੂੰ ਕਿਵੇਂ ਅਪਡੇਟ ਕਰਨਾ ਹੈ।

ਹੁਕਮ	ਵਰਤੋਂ ਦੀ ਉਦਾਹਰਨ
document.querySelector()	ਬ੍ਰਾਊਜ਼ਰ ਟੈਬ ਦੇ ਸਿਰਲੇਖ ਨੂੰ ਗਤੀਸ਼ੀਲ ਤੌਰ 'ਤੇ ਅੱਪਡੇਟ ਕਰਨ ਲਈ HTML
addEventListener()	ਇੱਕ ਖਾਸ ਇਵੈਂਟ (ਉਦਾਹਰਨ ਲਈ, ਕਲਿੱਕ) ਨੂੰ ਇੱਕ ਬਟਨ ਤੱਤ ਨਾਲ ਜੋੜਦਾ ਹੈ। ਇਸ ਸੰਦਰਭ ਵਿੱਚ, ਇਸਦੀ ਵਰਤੋਂ changeTimer() ਫੰਕਸ਼ਨ ਨੂੰ ਟਰਿੱਗਰ ਕਰਨ ਲਈ ਕੀਤੀ ਜਾਂਦੀ ਹੈ ਜਦੋਂ ਇੱਕ ਉਪਭੋਗਤਾ ਇੱਕ ਬਟਨ ਤੇ ਕਲਿਕ ਕਰਦਾ ਹੈ, ਜਿਸ ਨਾਲ ਟਾਈਮਰ ਸੈਟਿੰਗਾਂ ਨਾਲ ਗਤੀਸ਼ੀਲ ਇੰਟਰੈਕਸ਼ਨ ਦੀ ਆਗਿਆ ਮਿਲਦੀ ਹੈ।
innerText	ਇਹ ਵਿਸ਼ੇਸ਼ਤਾ ਇੱਕ HTML ਤੱਤ ਦੇ ਅੰਦਰ ਦਿਖਣਯੋਗ ਟੈਕਸਟ ਨੂੰ ਸੋਧਣ ਦੀ ਆਗਿਆ ਦਿੰਦੀ ਹੈ। ਇਸ ਹੱਲ ਵਿੱਚ, ਇਸਦੀ ਵਰਤੋਂ ਪੰਨੇ ਦੇ ਸਿਰਲੇਖ ਵਿੱਚ ਟਾਈਮਰ ਮੁੱਲ ਨੂੰ ਅਪਡੇਟ ਕਰਨ ਲਈ ਕੀਤੀ ਜਾਂਦੀ ਹੈ ਜਦੋਂ ਇੱਕ ਬਟਨ ਦਬਾਇਆ ਜਾਂਦਾ ਹੈ।
onClick	ਇੱਕ ਇਨਲਾਈਨ ਈਵੈਂਟ ਹੈਂਡਲਰ ਐਟਰੀਬਿਊਟ ਜੋ ਕਿ ਬਦਲਵੇਂ ਪਹੁੰਚ ਵਿੱਚ ਬਟਨ ਦੇ ਕਲਿੱਕ ਇਵੈਂਟ ਨਾਲ ਸਿੱਧਾ changeTimer() ਫੰਕਸ਼ਨ ਨੂੰ ਜੋੜਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ। ਇਹ ਟਾਈਮਰ ਨੂੰ ਗਤੀਸ਼ੀਲ ਰੂਪ ਵਿੱਚ ਅੱਪਡੇਟ ਕਰਨ ਦੇ ਇੱਕ ਸਰਲ, ਘੱਟ ਮਾਡਿਊਲਰ ਤਰੀਕੇ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ।
test()	ਇਹ ਵਿਧੀ ਜੇਸਟ ਨਾਲ ਯੂਨਿਟ ਟੈਸਟਿੰਗ ਵਿੱਚ ਵਰਤੀ ਜਾਂਦੀ ਹੈ। ਇਹ ਇੱਕ ਟੈਸਟ ਕੇਸ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ ਜਿੱਥੇ ਟੈਸਟ ਕੀਤੇ ਜਾ ਰਹੇ ਫੰਕਸ਼ਨ (ਉਦਾਹਰਨ ਲਈ, changeTimer()) ਦਾ ਮੁਲਾਂਕਣ ਕੀਤਾ ਜਾਂਦਾ ਹੈ ਤਾਂ ਜੋ ਇਹ ਯਕੀਨੀ ਬਣਾਇਆ ਜਾ ਸਕੇ ਕਿ ਟਾਈਮਰ ਅੱਪਡੇਟ ਸਹੀ ਢੰਗ ਨਾਲ ਹੋਵੇ। ਇਹ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਕਿ ਕੋਡ ਵੱਖ-ਵੱਖ ਸਥਿਤੀਆਂ ਵਿੱਚ ਉਮੀਦ ਅਨੁਸਾਰ ਵਿਹਾਰ ਕਰਦਾ ਹੈ।
expect()	ਇੱਕ ਜੈਸਟ ਕਮਾਂਡ ਜੋ ਜਾਂਚ ਕਰਦੀ ਹੈ ਕਿ ਕੀ ਅਸਲ ਮੁੱਲ (ਜਿਵੇਂ ਅੱਪਡੇਟ ਕੀਤਾ ਟਾਈਮਰ) ਅਨੁਮਾਨਿਤ ਮੁੱਲ ਨਾਲ ਮੇਲ ਖਾਂਦਾ ਹੈ। ਇਹ ਪੁਸ਼ਟੀ ਕਰਨ ਲਈ ਯੂਨਿਟ ਟੈਸਟਾਂ ਵਿੱਚ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ ਕਿ ਇੱਕ ਬਟਨ ਕਲਿੱਕ ਕਰਨ ਤੋਂ ਬਾਅਦ gameTime ਅਤੇ document.title ਸਹੀ ਢੰਗ ਨਾਲ ਅੱਪਡੇਟ ਕੀਤੇ ਗਏ ਹਨ।
toBe()	ਇੱਕ ਹੋਰ ਜੈਸਟ ਕਮਾਂਡ ਜੋ ਸਖਤ ਸਮਾਨਤਾ ਦੀ ਜਾਂਚ ਕਰਦੀ ਹੈ। ਇਹ ਸੁਨਿਸ਼ਚਿਤ ਕਰਦਾ ਹੈ ਕਿ changeTimer() ਨੂੰ ਕਾਲ ਕਰਨ ਤੋਂ ਬਾਅਦ, ਗੇਮ ਦਾ ਸਮਾਂ ਬਿਲਕੁਲ ਉਹੀ ਹੈ ਜਿਸਦੀ ਉਮੀਦ ਕੀਤੀ ਜਾਂਦੀ ਹੈ (ਉਦਾਹਰਨ ਲਈ, 30 ਸਕਿੰਟਾਂ ਲਈ 30,000 ms)।
getElementById()	ਉਹਨਾਂ ਦੀ ਆਈਡੀ ਦੁਆਰਾ ਖਾਸ ਬਟਨਾਂ ਨੂੰ ਚੁਣਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ (ਉਦਾਹਰਨ ਲਈ, 'ਤੀਹ', 'ਸੱਠ')। ਇਹ ਵਿਧੀ ਇਵੈਂਟ ਸਰੋਤਿਆਂ ਨੂੰ ਬਟਨਾਂ ਨਾਲ ਜੋੜਨ ਅਤੇ ਉਪਭੋਗਤਾ ਦੀ ਗੱਲਬਾਤ ਦੇ ਜਵਾਬ ਵਿੱਚ ਟਾਈਮਰ ਦੀ ਗਤੀਸ਼ੀਲ ਤਬਦੀਲੀ ਨੂੰ ਚਾਲੂ ਕਰਨ ਲਈ ਮਹੱਤਵਪੂਰਨ ਹੈ।

JavaScript ਅਤੇ HTML ਬਟਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਡਾਇਨਾਮਿਕ ਟਾਈਮਰ ਬਣਾਉਣਾ

ਉੱਪਰ ਪ੍ਰਦਾਨ ਕੀਤੀਆਂ ਸਕ੍ਰਿਪਟਾਂ ਨੂੰ ਇੱਕ ਉਪਭੋਗਤਾ ਨੂੰ HTML ਬਟਨਾਂ 'ਤੇ ਕਲਿੱਕ ਕਰਕੇ ਇੱਕ ਟਾਈਪਿੰਗ ਗੇਮ ਵਿੱਚ ਗੇਮ ਟਾਈਮਰ ਨੂੰ ਗਤੀਸ਼ੀਲ ਰੂਪ ਵਿੱਚ ਵਿਵਸਥਿਤ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦੇਣ ਲਈ ਤਿਆਰ ਕੀਤਾ ਗਿਆ ਹੈ। ਸ਼ੁਰੂ ਵਿੱਚ, ਅਸੀਂ ਇੱਕ ਵੇਰੀਏਬਲ ਘੋਸ਼ਿਤ ਕਰਦੇ ਹਾਂ , ਜੋ ਮਿਲੀਸਕਿੰਟ ਵਿੱਚ ਸਮਾਂ ਰੱਖਦਾ ਹੈ (ਮੂਲ ਸਕਿੰਟ ਵਿੱਚ 30 ਸਕਿੰਟ, ਮਿਲੀਸਕਿੰਟ ਵਿੱਚ ਬਦਲਣ ਲਈ 1000 ਨਾਲ ਗੁਣਾ)। ਮੁੱਖ ਕਾਰਜਕੁਸ਼ਲਤਾ ਵਿੱਚ ਹੈ ਫੰਕਸ਼ਨ, ਜੋ ਕਿ ਕਲਿੱਕ ਕੀਤੇ ਬਟਨ ਦੇ ਆਧਾਰ 'ਤੇ ਟਾਈਮਰ ਮੁੱਲ ਨੂੰ ਅੱਪਡੇਟ ਕਰਦਾ ਹੈ। ਇਹ ਵਿਧੀ ਬਟਨ ਦਾ ਮੁੱਲ ਪ੍ਰਾਪਤ ਕਰਦੀ ਹੈ (ਉਦਾ., 30, 60, ਜਾਂ 90) ਅਤੇ ਅੱਪਡੇਟ ਕਰਦੀ ਹੈ ਖੇਡ ਦਾ ਸਮਾਂ ਅਨੁਸਾਰ ਵੇਰੀਏਬਲ. ਇਸ ਤੋਂ ਇਲਾਵਾ, ਸਕ੍ਰਿਪਟ ਚੁਣੇ ਗਏ ਟਾਈਮਰ ਦੀ ਮਿਆਦ ਨੂੰ ਦਰਸਾਉਣ ਲਈ ਪੰਨੇ ਦੇ ਸਿਰਲੇਖ ਨੂੰ ਅਪਡੇਟ ਕਰਦੀ ਹੈ, ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਇਹ ਸਪੱਸ਼ਟ ਕਰਦੀ ਹੈ ਕਿ ਉਹਨਾਂ ਕੋਲ ਕਿੰਨਾ ਸਮਾਂ ਹੈ।

ਗਤੀਸ਼ੀਲ ਵਿਵਹਾਰ ਲਈ, ਅਸੀਂ ਇਵੈਂਟ ਸਰੋਤਿਆਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ, ਖਾਸ ਤੌਰ 'ਤੇ ਹੁਕਮ. ਇਹ ਸਕ੍ਰਿਪਟ ਨੂੰ ਪ੍ਰਤੀਕਿਰਿਆ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ ਜਦੋਂ ਉਪਭੋਗਤਾ ਕਿਸੇ ਵੀ ਬਟਨ ਨੂੰ ਕਲਿਕ ਕਰਦਾ ਹੈ। ਹਰੇਕ ਬਟਨ ਨੂੰ ਇੱਕ ID ਨਿਰਧਾਰਤ ਕੀਤਾ ਜਾਂਦਾ ਹੈ ਅਤੇ, ਜਦੋਂ ਕਲਿੱਕ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਇਸਨੂੰ ਚਾਲੂ ਕਰਦਾ ਹੈ ਫੰਕਸ਼ਨ, ਅਨੁਸਾਰੀ ਸਮਾਂ ਮੁੱਲ ਪਾਸ ਕਰਨਾ। ਇਹ ਪਹੁੰਚ HTML ਢਾਂਚੇ ਵਿੱਚ ਦੁਹਰਾਉਣ ਵਾਲੀ ਇਨਲਾਈਨ JavaScript ਦੀ ਲੋੜ ਤੋਂ ਬਿਨਾਂ ਕਈ ਬਟਨਾਂ ਨੂੰ ਕੁਸ਼ਲਤਾ ਨਾਲ ਸੰਭਾਲਣ ਲਈ ਉਪਯੋਗੀ ਹੈ। ਸਕ੍ਰਿਪਟ ਵਿੱਚ ਇੱਕ ਫਾਲਬੈਕ ਵਿਕਲਪ ਵੀ ਸ਼ਾਮਲ ਹੈ ਜਿੱਥੇ ਤੁਸੀਂ ਇਨਲਾਈਨ ਈਵੈਂਟ ਹੈਂਡਲਰ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ ਜੇਕਰ ਸਾਦਗੀ ਨੂੰ ਮਾਡਿਊਲਰਿਟੀ ਨਾਲੋਂ ਤਰਜੀਹ ਦਿੱਤੀ ਜਾਂਦੀ ਹੈ।

ਵਿਕਲਪਕ ਹੱਲ ਵਿੱਚ, ਅਸੀਂ ਸਿੱਧੇ ਬੰਨ੍ਹਦੇ ਹਾਂ ਬਟਨ ਨੂੰ ਘਟਨਾ. ਇਹ ਵਿਧੀ ਨੂੰ ਚਲਾਉਂਦੀ ਹੈ ਫੰਕਸ਼ਨ ਸਿੱਧੇ ਬਟਨ 'ਤੇ ਕਲਿੱਕ ਕੀਤਾ ਜਾ ਰਿਹਾ ਹੈ. ਇਹ ਇੱਕ ਸਿੱਧੀ ਪਹੁੰਚ ਹੈ ਪਰ ਇਵੈਂਟ ਲਿਸਨਰ ਵਿਧੀ ਦੀ ਲਚਕਤਾ ਦੀ ਘਾਟ ਹੈ। ਇਸ ਵਿਧੀ ਦੀ ਸਰਲਤਾ ਛੋਟੀਆਂ, ਘੱਟ ਗੁੰਝਲਦਾਰ ਐਪਲੀਕੇਸ਼ਨਾਂ ਲਈ ਲਾਭਦਾਇਕ ਹੈ। ਹਾਲਾਂਕਿ, ਵਧੇਰੇ ਸਕੇਲੇਬਲ ਕੋਡ ਲਈ, ਇਵੈਂਟ ਸੁਣਨ ਵਾਲੇ ਵਧੇਰੇ ਲਚਕਤਾ ਦੀ ਪੇਸ਼ਕਸ਼ ਕਰਦੇ ਹਨ ਅਤੇ HTML ਢਾਂਚੇ ਨੂੰ ਸਿੱਧੇ ਤੌਰ 'ਤੇ ਸੋਧੇ ਬਿਨਾਂ ਸਕ੍ਰਿਪਟ ਨੂੰ ਆਸਾਨ ਅੱਪਡੇਟ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦੇ ਹਨ। ਦੋਵੇਂ ਤਰੀਕਿਆਂ ਦਾ ਉਦੇਸ਼ ਇੱਕੋ ਸਮੱਸਿਆ ਨੂੰ ਹੱਲ ਕਰਨਾ ਹੈ, ਜੋ ਕਿ ਟਾਈਮਰ ਨੂੰ ਵਿਵਸਥਿਤ ਕਰਨਾ ਅਤੇ ਉਪਭੋਗਤਾ ਦੀ ਚੋਣ ਦੇ ਆਧਾਰ 'ਤੇ ਗਤੀਸ਼ੀਲ ਤੌਰ 'ਤੇ ਸਿਰਲੇਖ ਨੂੰ ਅਪਡੇਟ ਕਰਨਾ ਹੈ।

ਅੰਤ ਵਿੱਚ, ਅਸੀਂ ਜੈਸਟ, ਇੱਕ JavaScript ਟੈਸਟਿੰਗ ਫਰੇਮਵਰਕ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਯੂਨਿਟ ਟੈਸਟਾਂ ਨੂੰ ਲਾਗੂ ਕਰਦੇ ਹਾਂ। ਦ ਇਹ ਪ੍ਰਮਾਣਿਤ ਕਰਨ ਲਈ ਫੰਕਸ਼ਨ ਮਹੱਤਵਪੂਰਨ ਹਨ ਕਿ ਟਾਈਮਰ ਸਹੀ ਢੰਗ ਨਾਲ ਅੱਪਡੇਟ ਹੁੰਦਾ ਹੈ। ਕਈ ਦ੍ਰਿਸ਼ਾਂ ਦੀ ਜਾਂਚ ਕਰਕੇ, ਜਿਵੇਂ ਕਿ ਕੀ ਟਾਈਮਰ 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 ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ ਫੰਕਸ਼ਨ. ਟਾਈਮਰ ਸੈੱਟ ਹੋਣ ਤੋਂ ਬਾਅਦ, setInterval ਇੱਕ ਕਾਉਂਟਡਾਉਨ ਬਣਾਉਣ ਲਈ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ ਜੋ ਹਰ ਸਕਿੰਟ ਟਾਈਮਰ ਮੁੱਲ ਨੂੰ ਘਟਾਉਂਦਾ ਹੈ। ਜਦੋਂ ਟਾਈਮਰ ਜ਼ੀਰੋ 'ਤੇ ਪਹੁੰਚਦਾ ਹੈ, ਤਾਂ ਫੰਕਸ਼ਨ ਜਾਂ ਤਾਂ ਗੇਮ ਨੂੰ ਰੋਕ ਸਕਦਾ ਹੈ ਜਾਂ ਉਪਭੋਗਤਾ ਨੂੰ ਚੇਤਾਵਨੀ ਦੇ ਸਕਦਾ ਹੈ ਕਿ ਸਮਾਂ ਪੂਰਾ ਹੋ ਗਿਆ ਹੈ। ਇਹ ਕਾਰਜਕੁਸ਼ਲਤਾ, ਬਟਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਟਾਈਮਰ ਨੂੰ ਗਤੀਸ਼ੀਲ ਤੌਰ 'ਤੇ ਬਦਲਣ ਦੀ ਯੋਗਤਾ ਦੇ ਨਾਲ ਜੋੜ ਕੇ, ਗੇਮਪਲੇ ਦੇ ਤਜ਼ਰਬੇ ਨੂੰ ਮਹੱਤਵਪੂਰਨ ਤੌਰ 'ਤੇ ਵਧਾਉਂਦੀ ਹੈ। ਇੱਕ ਜਵਾਬਦੇਹ ਇੰਟਰਫੇਸ ਖਿਡਾਰੀਆਂ ਨੂੰ ਰੁਝੇ ਰੱਖਣ ਲਈ ਕੁੰਜੀ ਹੈ, ਅਤੇ ਰੀਅਲ-ਟਾਈਮ ਫੀਡਬੈਕ ਇਸ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰਨ ਦਾ ਇੱਕ ਤਰੀਕਾ ਹੈ।

ਇਸ ਤੋਂ ਇਲਾਵਾ, ਗਲਤੀ ਨਾਲ ਨਜਿੱਠਣ 'ਤੇ ਵਿਚਾਰ ਕੀਤਾ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ. ਉਦਾਹਰਨ ਲਈ, ਜੇਕਰ ਕੋਈ ਉਪਭੋਗਤਾ ਟਾਈਮਰ ਸੈਟ ਕੀਤੇ ਬਿਨਾਂ ਗੇਮ ਸ਼ੁਰੂ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦਾ ਹੈ, ਤਾਂ ਤੁਸੀਂ ਉਹਨਾਂ ਨੂੰ ਇੱਕ ਵੈਧ ਸਮਾਂ ਚੁਣਨ ਲਈ ਇੱਕ ਸੰਦੇਸ਼ ਦੇ ਨਾਲ ਪੁੱਛ ਸਕਦੇ ਹੋ। ਪ੍ਰਮਾਣਿਕਤਾ ਵਿਧੀਆਂ ਨੂੰ ਸ਼ਾਮਲ ਕਰਕੇ, ਤੁਸੀਂ ਯਕੀਨੀ ਬਣਾਉਂਦੇ ਹੋ ਕਿ ਗੇਮ ਸੁਚਾਰੂ ਢੰਗ ਨਾਲ ਚੱਲਦੀ ਹੈ ਅਤੇ ਸੰਭਾਵੀ ਮੁੱਦਿਆਂ ਨੂੰ ਘਟਾਉਂਦੀ ਹੈ। ਇਸ ਕਿਸਮ ਦੀ ਪ੍ਰਮਾਣਿਕਤਾ ਨਾ ਸਿਰਫ਼ ਉਪਭੋਗਤਾ ਅਨੁਭਵ ਨੂੰ ਬਿਹਤਰ ਬਣਾਉਂਦੀ ਹੈ ਬਲਕਿ ਤੁਹਾਡੀ ਗੇਮ ਦੀ ਭਰੋਸੇਯੋਗਤਾ ਵਿੱਚ ਵੀ ਯੋਗਦਾਨ ਪਾਉਂਦੀ ਹੈ, ਇਹ ਸੁਨਿਸ਼ਚਿਤ ਕਰਦੇ ਹੋਏ ਕਿ ਖਿਡਾਰੀਆਂ ਨੂੰ ਬੇਲੋੜੀ ਉਲਝਣ ਦਾ ਸਾਹਮਣਾ ਨਾ ਕਰਨਾ ਪਵੇ।

1. ਮੈਂ ਕਿਵੇਂ ਵਰਤਾਂ ਇੱਕ ਕਾਉਂਟਡਾਊਨ ਬਣਾਉਣ ਲਈ?
2. ਤੁਸੀਂ ਵਰਤ ਸਕਦੇ ਹੋ ਹਰ 1000 ਮਿਲੀਸਕਿੰਟ (1 ਸਕਿੰਟ) ਨੂੰ ਚਲਾਉਣ ਲਈ ਸੈੱਟ ਕਰਕੇ ਅਤੇ ਹਰ ਵਾਰ ਟਾਈਮਰ ਮੁੱਲ ਨੂੰ ਘਟਾ ਕੇ। ਜਦੋਂ ਮੁੱਲ ਜ਼ੀਰੋ ਤੱਕ ਪਹੁੰਚ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਤੁਸੀਂ ਇਸਦੀ ਵਰਤੋਂ ਕਰਕੇ ਕਾਉਂਟਡਾਊਨ ਨੂੰ ਰੋਕ ਸਕਦੇ ਹੋ .
3. ਦਾ ਮਕਸਦ ਕੀ ਹੈ ?
4. ਕਾਊਂਟਡਾਊਨ ਜਾਂ ਕਿਸੇ ਹੋਰ ਆਵਰਤੀ ਕਾਰਵਾਈ ਨੂੰ ਰੋਕਣ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ . ਇਹ ਯਕੀਨੀ ਬਣਾਉਣਾ ਮਹੱਤਵਪੂਰਨ ਹੈ ਕਿ ਕਾਊਂਟਡਾਊਨ ਰੁਕ ਜਾਵੇ ਜਦੋਂ ਇਹ ਸਿਫ਼ਰ 'ਤੇ ਪਹੁੰਚ ਜਾਵੇ।
5. ਮੈਂ HTML ਸਿਰਲੇਖ ਨੂੰ ਗਤੀਸ਼ੀਲ ਰੂਪ ਵਿੱਚ ਕਿਵੇਂ ਅਪਡੇਟ ਕਰ ਸਕਦਾ ਹਾਂ?
6. ਵਰਤੋ ਪੰਨੇ ਦੇ ਸਿਰਲੇਖ ਦੇ ਪਾਠ ਨੂੰ ਸੈੱਟ ਕਰਨ ਲਈ. ਇਸ ਨੂੰ ਤੁਹਾਡੇ ਅੰਦਰ ਅੱਪਡੇਟ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ ਚੁਣੇ ਗਏ ਸਮੇਂ ਦੇ ਮੁੱਲ 'ਤੇ ਆਧਾਰਿਤ ਫੰਕਸ਼ਨ।
7. ਕੀ ਮੈਂ ਟਾਈਮਰ ਦੀ ਚੋਣ ਕਰਦੇ ਸਮੇਂ ਉਪਭੋਗਤਾ ਦੀਆਂ ਗਲਤੀਆਂ ਨੂੰ ਸੰਭਾਲ ਸਕਦਾ ਹਾਂ?
8. ਹਾਂ, ਤੁਸੀਂ ਕਾਊਂਟਡਾਊਨ ਸ਼ੁਰੂ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਇਹ ਜਾਂਚ ਕੇ ਪ੍ਰਮਾਣਿਕਤਾ ਜੋੜ ਸਕਦੇ ਹੋ ਕਿ ਕੀ ਇੱਕ ਵੈਧ ਟਾਈਮਰ ਵਿਕਲਪ ਚੁਣਿਆ ਗਿਆ ਹੈ। ਜੇਕਰ ਕੋਈ ਵੈਧ ਸਮਾਂ ਨਹੀਂ ਚੁਣਿਆ ਗਿਆ ਹੈ, ਤਾਂ ਤੁਸੀਂ ਇੱਕ ਚੇਤਾਵਨੀ ਜਾਂ ਪ੍ਰੋਂਪਟ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰ ਸਕਦੇ ਹੋ।
9. ਜਦੋਂ ਇੱਕ ਬਟਨ ਦਬਾਇਆ ਜਾਂਦਾ ਹੈ ਤਾਂ ਮੈਂ ਇੱਕ ਫੰਕਸ਼ਨ ਨੂੰ ਕਿਵੇਂ ਚਾਲੂ ਕਰਾਂ?
10. ਤੁਸੀਂ ਵਰਤ ਕੇ ਇੱਕ ਬਟਨ ਨਾਲ ਇੱਕ ਫੰਕਸ਼ਨ ਜੋੜ ਸਕਦੇ ਹੋ ਜਾਂ ਸਿੱਧੇ ਵਰਤ ਕੇ ਬਟਨ ਦੇ HTML ਤੱਤ ਵਿੱਚ।

ਟਾਈਪਿੰਗ ਗੇਮ ਵਿੱਚ ਡਾਇਨਾਮਿਕ ਟਾਈਮਰ ਐਡਜਸਟਮੈਂਟਸ ਨੂੰ ਸ਼ਾਮਲ ਕਰਨਾ ਖਿਡਾਰੀ ਦੇ ਅਨੁਭਵ ਵਿੱਚ ਮਹੱਤਵਪੂਰਨ ਸੁਧਾਰ ਕਰਦਾ ਹੈ। ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਸਧਾਰਨ HTML ਬਟਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਟਾਈਮਰ ਨੂੰ ਬਦਲਣ ਅਤੇ ਰੀਅਲ-ਟਾਈਮ ਵਿੱਚ ਗੇਮ ਦੇ ਇੰਟਰਫੇਸ ਨੂੰ ਅੱਪਡੇਟ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦੇ ਕੇ, ਡਿਵੈਲਪਰ ਆਪਣੀਆਂ ਗੇਮਾਂ ਨੂੰ ਵਧੇਰੇ ਇੰਟਰਐਕਟਿਵ ਅਤੇ ਲਚਕਦਾਰ ਬਣਾ ਸਕਦੇ ਹਨ। ਇਸ ਕਿਸਮ ਦਾ ਨਿਯੰਤਰਣ ਵੱਖ-ਵੱਖ ਹੁਨਰ ਪੱਧਰਾਂ ਨੂੰ ਅਨੁਕੂਲ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰਦਾ ਹੈ।

ਸਭ ਤੋਂ ਵਧੀਆ ਅਭਿਆਸਾਂ ਜਿਵੇਂ ਕਿ ਇਵੈਂਟ ਸੁਣਨ ਵਾਲੇ, ਗਲਤੀ ਨੂੰ ਸੰਭਾਲਣਾ, ਅਤੇ ਯੂਨਿਟ ਟੈਸਟਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਕਿ ਗੇਮ ਸੁਚਾਰੂ ਢੰਗ ਨਾਲ ਚੱਲਦੀ ਹੈ ਅਤੇ ਇੱਕ ਭਰੋਸੇਯੋਗ ਉਪਭੋਗਤਾ ਅਨੁਭਵ ਪ੍ਰਦਾਨ ਕਰਦੀ ਹੈ। ਇਹਨਾਂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨੂੰ ਲਾਗੂ ਕਰਨਾ ਨਾ ਸਿਰਫ਼ ਗੇਮ ਦੀ ਕਾਰਜਕੁਸ਼ਲਤਾ ਨੂੰ ਵਧਾਏਗਾ ਬਲਕਿ ਖਿਡਾਰੀਆਂ ਨੂੰ ਜਵਾਬਦੇਹ, ਉਪਭੋਗਤਾ-ਅਨੁਕੂਲ ਮਕੈਨਿਕਸ ਨਾਲ ਵਧੇਰੇ ਰੁਝੇਵੇਂ ਰੱਖੇਗਾ।