ਜਦੋਂ ਤੁਸੀਂ ਇੱਕ ਕੰਟਰੋਲਰ ਨੂੰ ਪਲੱਗ ਇਨ ਕਰਦੇ ਹੋ, ਤੁਸੀਂ ਬਟਨਾਂ ਨੂੰ ਮੈਸ਼ ਕਰਦੇ ਹੋ, ਸਟਿਕਸ ਨੂੰ ਹਿਲਾਉਂਦੇ ਹੋ, ਟਰਿਗਰਸ ਨੂੰ ਖਿੱਚਦੇ ਹੋ... ਅਤੇ ਇੱਕ ਡਿਵੈਲਪਰ ਦੇ ਰੂਪ ਵਿੱਚ, ਤੁਸੀਂ ਇਸ ਵਿੱਚੋਂ ਕੁਝ ਨਹੀਂ ਦੇਖਦੇ ਹੋ। ਬ੍ਰਾਊਜ਼ਰ ਇਸਨੂੰ ਚੁੱਕ ਰਿਹਾ ਹੈ, ਯਕੀਨੀ ਤੌਰ 'ਤੇ, ਪਰ ਜਦੋਂ ਤੱਕ ਤੁਸੀਂ ਕੰਸੋਲ ਵਿੱਚ ਨੰਬਰ ਲੌਗ ਨਹੀਂ ਕਰ ਰਹੇ ਹੋ, ਇਹ ਅਦਿੱਖ ਹੈ। ਇਹ ਗੇਮਪੈਡ API ਨਾਲ ਸਿਰ ਦਰਦ ਹੈ. ਇਹ ਕਈ ਸਾਲਾਂ ਤੋਂ ਚੱਲ ਰਿਹਾ ਹੈ, ਅਤੇ ਇਹ ਅਸਲ ਵਿੱਚ ਬਹੁਤ ਸ਼ਕਤੀਸ਼ਾਲੀ ਹੈ। ਤੁਸੀਂ ਬਟਨ, ਸਟਿਕਸ, ਟਰਿਗਰ, ਕੰਮ ਪੜ੍ਹ ਸਕਦੇ ਹੋ। ਪਰ ਜ਼ਿਆਦਾਤਰ ਲੋਕ ਇਸ ਨੂੰ ਛੂਹਦੇ ਨਹੀਂ ਹਨ। ਕਿਉਂ? ਕਿਉਂਕਿ ਕੋਈ ਫੀਡਬੈਕ ਨਹੀਂ ਹੈ। ਡਿਵੈਲਪਰ ਟੂਲਸ ਵਿੱਚ ਕੋਈ ਪੈਨਲ ਨਹੀਂ ਹੈ। ਇਹ ਜਾਣਨ ਦਾ ਕੋਈ ਸਪਸ਼ਟ ਤਰੀਕਾ ਨਹੀਂ ਹੈ ਕਿ ਕੀ ਕੰਟਰੋਲਰ ਵੀ ਉਹ ਕਰ ਰਿਹਾ ਹੈ ਜੋ ਤੁਸੀਂ ਸੋਚਦੇ ਹੋ। ਇਹ ਅੰਨ੍ਹੇ ਉੱਡਣ ਵਾਂਗ ਮਹਿਸੂਸ ਕਰਦਾ ਹੈ. ਇਸਨੇ ਮੈਨੂੰ ਇੱਕ ਛੋਟਾ ਜਿਹਾ ਟੂਲ ਬਣਾਉਣ ਲਈ ਕਾਫ਼ੀ ਬੱਗ ਕੀਤਾ: ਗੇਮਪੈਡ ਕੈਸਕੇਡ ਡੀਬਗਰ। ਕੰਸੋਲ ਆਉਟਪੁੱਟ ਨੂੰ ਦੇਖਣ ਦੀ ਬਜਾਏ, ਤੁਹਾਨੂੰ ਕੰਟਰੋਲਰ ਦਾ ਇੱਕ ਲਾਈਵ, ਇੰਟਰਐਕਟਿਵ ਦ੍ਰਿਸ਼ ਮਿਲਦਾ ਹੈ। ਕੁਝ ਦਬਾਓ ਅਤੇ ਇਹ ਸਕ੍ਰੀਨ 'ਤੇ ਪ੍ਰਤੀਕਿਰਿਆ ਕਰਦਾ ਹੈ। ਅਤੇ CSS ਕੈਸਕੇਡ ਲੇਅਰਾਂ ਦੇ ਨਾਲ, ਸਟਾਈਲ ਸੰਗਠਿਤ ਰਹਿੰਦੀਆਂ ਹਨ, ਇਸਲਈ ਇਹ ਡੀਬੱਗ ਕਰਨ ਲਈ ਸਾਫ਼ ਹੈ। ਇਸ ਪੋਸਟ ਵਿੱਚ, ਮੈਂ ਤੁਹਾਨੂੰ ਦਿਖਾਵਾਂਗਾ ਕਿ ਡੀਬੱਗਿੰਗ ਕੰਟਰੋਲਰ ਇੰਨੀ ਦਰਦ ਕਿਉਂ ਹੈ, ਕਿਵੇਂ CSS ਇਸਨੂੰ ਸਾਫ਼ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰਦਾ ਹੈ, ਅਤੇ ਤੁਸੀਂ ਆਪਣੇ ਖੁਦ ਦੇ ਪ੍ਰੋਜੈਕਟਾਂ ਲਈ ਇੱਕ ਮੁੜ ਵਰਤੋਂ ਯੋਗ ਵਿਜ਼ੂਅਲ ਡੀਬੱਗਰ ਕਿਵੇਂ ਬਣਾ ਸਕਦੇ ਹੋ।
ਭਾਵੇਂ ਤੁਸੀਂ ਉਹਨਾਂ ਸਾਰਿਆਂ ਨੂੰ ਲੌਗ ਕਰਨ ਦੇ ਯੋਗ ਹੋ, ਤੁਸੀਂ ਜਲਦੀ ਹੀ ਨਾ-ਪੜ੍ਹਨਯੋਗ ਕੰਸੋਲ ਸਪੈਮ ਨਾਲ ਖਤਮ ਹੋ ਜਾਵੋਗੇ। ਉਦਾਹਰਨ ਲਈ: [0,0,1,0,0,0.5,0,...] [0,0,0,0,1,0,0,...] [0,0,1,0,0,0,0,...]
ਕੀ ਤੁਸੀਂ ਦੱਸ ਸਕਦੇ ਹੋ ਕਿ ਕਿਹੜਾ ਬਟਨ ਦਬਾਇਆ ਗਿਆ ਸੀ? ਹੋ ਸਕਦਾ ਹੈ, ਪਰ ਸਿਰਫ ਤੁਹਾਡੀਆਂ ਅੱਖਾਂ ਨੂੰ ਦਬਾਉਣ ਅਤੇ ਕੁਝ ਇੰਪੁੱਟ ਗੁਆਉਣ ਤੋਂ ਬਾਅਦ. ਇਸ ਲਈ, ਨਹੀਂ, ਜਦੋਂ ਇਨਪੁਟਸ ਪੜ੍ਹਨ ਦੀ ਗੱਲ ਆਉਂਦੀ ਹੈ ਤਾਂ ਡੀਬੱਗਿੰਗ ਆਸਾਨੀ ਨਾਲ ਨਹੀਂ ਆਉਂਦੀ। ਸਮੱਸਿਆ 3: ਢਾਂਚੇ ਦੀ ਘਾਟ ਭਾਵੇਂ ਤੁਸੀਂ ਇੱਕ ਤੇਜ਼ ਵਿਜ਼ੂਅਲਾਈਜ਼ਰ ਨੂੰ ਇਕੱਠਾ ਕਰਦੇ ਹੋ, ਸਟਾਈਲ ਤੇਜ਼ੀ ਨਾਲ ਗੜਬੜ ਹੋ ਸਕਦੀ ਹੈ। ਪੂਰਵ-ਨਿਰਧਾਰਤ, ਕਿਰਿਆਸ਼ੀਲ, ਅਤੇ ਡੀਬੱਗ ਸਥਿਤੀਆਂ ਓਵਰਲੈਪ ਹੋ ਸਕਦੀਆਂ ਹਨ, ਅਤੇ ਸਪਸ਼ਟ ਢਾਂਚੇ ਦੇ ਬਿਨਾਂ, ਤੁਹਾਡਾ CSS ਭੁਰਭੁਰਾ ਅਤੇ ਵਧਾਉਣਾ ਔਖਾ ਹੋ ਜਾਂਦਾ ਹੈ। CSS ਕੈਸਕੇਡ ਲੇਅਰਸ ਮਦਦ ਕਰ ਸਕਦੀਆਂ ਹਨ। ਉਹ ਸ਼ੈਲੀਆਂ ਨੂੰ "ਪਰਤਾਂ" ਵਿੱਚ ਸਮੂਹ ਕਰਦੇ ਹਨ ਜੋ ਤਰਜੀਹ ਦੇ ਅਨੁਸਾਰ ਕ੍ਰਮਬੱਧ ਕੀਤੇ ਜਾਂਦੇ ਹਨ, ਤਾਂ ਜੋ ਤੁਸੀਂ ਵਿਸ਼ੇਸ਼ਤਾ ਨਾਲ ਲੜਨਾ ਬੰਦ ਕਰ ਦਿਓ ਅਤੇ ਅੰਦਾਜ਼ਾ ਲਗਾਓ, "ਮੇਰੀ ਡੀਬੱਗ ਸ਼ੈਲੀ ਕਿਉਂ ਨਹੀਂ ਦਿਖਾਈ ਦੇ ਰਹੀ?" ਇਸਦੀ ਬਜਾਏ, ਤੁਸੀਂ ਵੱਖਰੀਆਂ ਚਿੰਤਾਵਾਂ ਬਣਾਈ ਰੱਖਦੇ ਹੋ:
ਅਧਾਰ: ਕੰਟਰੋਲਰ ਦਾ ਮਿਆਰੀ, ਸ਼ੁਰੂਆਤੀ ਦਿੱਖ। ਕਿਰਿਆਸ਼ੀਲ: ਦਬਾਏ ਗਏ ਬਟਨਾਂ ਅਤੇ ਮੂਵਡ ਸਟਿਕਸ ਲਈ ਹਾਈਲਾਈਟਸ। ਡੀਬੱਗ: ਡਿਵੈਲਪਰਾਂ ਲਈ ਓਵਰਲੇਅ (ਉਦਾਹਰਨ ਲਈ, ਸੰਖਿਆਤਮਕ ਰੀਡਆਊਟ, ਗਾਈਡ, ਅਤੇ ਹੋਰ)।
ਜੇ ਅਸੀਂ ਇਸ ਅਨੁਸਾਰ CSS ਵਿੱਚ ਲੇਅਰਾਂ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨਾ ਸੀ, ਤਾਂ ਸਾਡੇ ਕੋਲ ਇਹ ਹੋਵੇਗਾ: /* ਸਭ ਤੋਂ ਘੱਟ ਤੋਂ ਉੱਚਤਮ ਤਰਜੀਹ */ @layer ਬੇਸ, ਕਿਰਿਆਸ਼ੀਲ, ਡੀਬੱਗ;
@ਪਰਤ ਅਧਾਰ { /* ... */ }
@ਪਰਤ ਕਿਰਿਆਸ਼ੀਲ { /* ... */ }
@layer ਡੀਬੱਗ { /* ... */ }
ਕਿਉਂਕਿ ਹਰੇਕ ਪਰਤ ਅਨੁਮਾਨਤ ਤੌਰ 'ਤੇ ਸਟੈਕ ਕਰਦੀ ਹੈ, ਤੁਸੀਂ ਹਮੇਸ਼ਾਂ ਜਾਣਦੇ ਹੋ ਕਿ ਕਿਹੜੇ ਨਿਯਮ ਜਿੱਤਦੇ ਹਨ। ਇਹ ਪੂਰਵ ਅਨੁਮਾਨ ਡੀਬੱਗਿੰਗ ਨੂੰ ਨਾ ਸਿਰਫ਼ ਆਸਾਨ ਬਣਾਉਂਦਾ ਹੈ, ਸਗੋਂ ਅਸਲ ਵਿੱਚ ਪ੍ਰਬੰਧਨਯੋਗ ਬਣਾਉਂਦਾ ਹੈ। ਅਸੀਂ ਸਮੱਸਿਆ (ਅਦਿੱਖ, ਗੜਬੜ ਇਨਪੁਟ) ਅਤੇ ਪਹੁੰਚ (ਕੈਸਕੇਡ ਲੇਅਰਾਂ ਨਾਲ ਬਣਿਆ ਇੱਕ ਵਿਜ਼ੂਅਲ ਡੀਬਗਰ) ਨੂੰ ਕਵਰ ਕੀਤਾ ਹੈ। ਹੁਣ ਅਸੀਂ ਡੀਬੱਗਰ ਨੂੰ ਬਣਾਉਣ ਲਈ ਕਦਮ-ਦਰ-ਕਦਮ ਪ੍ਰਕਿਰਿਆ ਵਿੱਚੋਂ ਲੰਘਾਂਗੇ। ਡੀਬੱਗਰ ਸੰਕਲਪ ਲੁਕੇ ਹੋਏ ਇਨਪੁਟ ਨੂੰ ਦ੍ਰਿਸ਼ਮਾਨ ਬਣਾਉਣ ਦਾ ਸਭ ਤੋਂ ਆਸਾਨ ਤਰੀਕਾ ਹੈ ਇਸਨੂੰ ਸਕ੍ਰੀਨ 'ਤੇ ਖਿੱਚਣਾ। ਇਹ ਉਹੀ ਹੈ ਜੋ ਇਹ ਡੀਬਗਰ ਕਰਦਾ ਹੈ। ਬਟਨ, ਟਰਿਗਰਸ, ਅਤੇ ਜਾਏਸਟਿੱਕਸ ਸਭ ਇੱਕ ਵਿਜ਼ੂਅਲ ਪ੍ਰਾਪਤ ਕਰਦੇ ਹਨ।
A ਦਬਾਓ: ਇੱਕ ਚੱਕਰ ਚਮਕਦਾ ਹੈ। ਸਟਿੱਕ ਨੂੰ ਹਿਲਾਓ: ਚੱਕਰ ਦੁਆਲੇ ਸਲਾਈਡ ਕਰਦਾ ਹੈ। ਇੱਕ ਟਰਿੱਗਰ ਅੱਧੇ ਪਾਸੇ ਖਿੱਚੋ: ਇੱਕ ਬਾਰ ਅੱਧਾ ਭਰਦਾ ਹੈ।
ਹੁਣ ਤੁਸੀਂ 0 ਅਤੇ 1 ਸਕਿੰਟ 'ਤੇ ਨਹੀਂ ਦੇਖ ਰਹੇ ਹੋ, ਪਰ ਅਸਲ ਵਿੱਚ ਕੰਟਰੋਲਰ ਦੀ ਲਾਈਵ ਪ੍ਰਤੀਕਿਰਿਆ ਦੇਖ ਰਹੇ ਹੋ। ਬੇਸ਼ੱਕ, ਇੱਕ ਵਾਰ ਜਦੋਂ ਤੁਸੀਂ ਡਿਫੌਲਟ, ਦਬਾਇਆ, ਡੀਬੱਗ ਜਾਣਕਾਰੀ, ਸ਼ਾਇਦ ਇੱਕ ਰਿਕਾਰਡਿੰਗ ਮੋਡ ਵਰਗੀਆਂ ਸਥਿਤੀਆਂ 'ਤੇ ਪਾਇਲ ਕਰਨਾ ਸ਼ੁਰੂ ਕਰ ਦਿੰਦੇ ਹੋ, ਤਾਂ CSS ਵੱਡਾ ਅਤੇ ਵਧੇਰੇ ਗੁੰਝਲਦਾਰ ਹੋਣਾ ਸ਼ੁਰੂ ਹੋ ਜਾਂਦਾ ਹੈ। ਇਹ ਉਹ ਥਾਂ ਹੈ ਜਿੱਥੇ ਕੈਸਕੇਡ ਲੇਅਰਾਂ ਕੰਮ ਆਉਂਦੀਆਂ ਹਨ। ਇੱਥੇ ਇੱਕ ਸਟਰਿੱਪ-ਡਾਊਨ ਉਦਾਹਰਨ ਹੈ: @ਪਰਤ ਅਧਾਰ { .ਬਟਨ { ਪਿਛੋਕੜ: #222; ਬਾਰਡਰ-ਰੇਡੀਅਸ: 50%; ਚੌੜਾਈ: 40px; ਉਚਾਈ: 40px; } }
@ਪਰਤ ਕਿਰਿਆਸ਼ੀਲ { .button.pressed { ਪਿਛੋਕੜ: #0f0; /* ਚਮਕਦਾਰ ਹਰਾ */ } }
@layer ਡੀਬੱਗ { .button:: after { ਸਮੱਗਰੀ: attr (ਡਾਟਾ-ਮੁੱਲ); ਫੌਂਟ-ਸਾਈਜ਼: 12px; ਰੰਗ: #fff; } }
ਲੇਅਰ ਆਰਡਰ ਮਹੱਤਵਪੂਰਨ ਹੈ: ਅਧਾਰ → ਕਿਰਿਆਸ਼ੀਲ → ਡੀਬੱਗ।
ਬੇਸ ਕੰਟਰੋਲਰ ਖਿੱਚਦਾ ਹੈ। ਸਰਗਰਮ ਹੈਂਡਲ ਦਬਾਈਆਂ ਸਥਿਤੀਆਂ। ਓਵਰਲੇਅ 'ਤੇ ਡੀਬੱਗ ਸੁੱਟਦਾ ਹੈ।
ਇਸ ਨੂੰ ਇਸ ਤਰ੍ਹਾਂ ਤੋੜਨ ਦਾ ਮਤਲਬ ਹੈ ਕਿ ਤੁਸੀਂ ਅਜੀਬ ਵਿਸ਼ੇਸ਼ਤਾ ਯੁੱਧ ਨਹੀਂ ਲੜ ਰਹੇ ਹੋ। ਹਰ ਪਰਤ ਦਾ ਆਪਣਾ ਸਥਾਨ ਹੁੰਦਾ ਹੈ, ਅਤੇ ਤੁਸੀਂ ਹਮੇਸ਼ਾਂ ਜਾਣਦੇ ਹੋ ਕਿ ਕੀ ਜਿੱਤਦਾ ਹੈ. ਇਸ ਨੂੰ ਬਾਹਰ ਦਾ ਨਿਰਮਾਣ ਆਓ ਪਹਿਲਾਂ ਸਕ੍ਰੀਨ 'ਤੇ ਕੁਝ ਪ੍ਰਾਪਤ ਕਰੀਏ। ਇਸ ਨੂੰ ਵਧੀਆ ਦਿਖਣ ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ - ਸਿਰਫ਼ ਮੌਜੂਦ ਹੋਣ ਦੀ ਲੋੜ ਹੈ ਇਸ ਲਈ ਸਾਡੇ ਕੋਲ ਕੰਮ ਕਰਨ ਲਈ ਕੁਝ ਹੈ।
ਗੇਮਪੈਡ ਕੈਸਕੇਡ ਡੀਬੱਗਰ
ਇਹ ਸ਼ਾਬਦਿਕ ਤੌਰ 'ਤੇ ਸਿਰਫ਼ ਬਕਸੇ ਹਨ. ਅਜੇ ਤੱਕ ਦਿਲਚਸਪ ਨਹੀਂ ਹੈ, ਪਰ ਇਹ ਸਾਨੂੰ CSS ਅਤੇ JavaScript ਨਾਲ ਬਾਅਦ ਵਿੱਚ ਫੜਨ ਲਈ ਹੈਂਡਲ ਦਿੰਦਾ ਹੈ। ਠੀਕ ਹੈ, ਮੈਂ ਇੱਥੇ ਕੈਸਕੇਡ ਲੇਅਰਾਂ ਦੀ ਵਰਤੋਂ ਕਰ ਰਿਹਾ ਹਾਂ ਕਿਉਂਕਿ ਇਹ ਤੁਹਾਡੇ ਦੁਆਰਾ ਹੋਰ ਰਾਜਾਂ ਨੂੰ ਜੋੜਨ ਤੋਂ ਬਾਅਦ ਸਮੱਗਰੀ ਨੂੰ ਵਿਵਸਥਿਤ ਰੱਖਦਾ ਹੈ। ਇੱਥੇ ਇੱਕ ਮੋਟਾ ਪਾਸ ਹੈ:
/* ================================= ਕੈਸਕੇਡ ਲੇਅਰਸ ਸੈੱਟਅੱਪ ਆਰਡਰ ਦੇ ਮਾਮਲੇ: ਅਧਾਰ → ਕਿਰਿਆਸ਼ੀਲ → ਡੀਬੱਗ =====================================*/
/* ਲੇਅਰ ਆਰਡਰ ਨੂੰ ਪ੍ਰਭਾਸ਼ਿਤ ਕਰੋ */ @layer ਬੇਸ, ਕਿਰਿਆਸ਼ੀਲ, ਡੀਬੱਗ;
/* ਲੇਅਰ 1: ਬੇਸ ਸਟਾਈਲ - ਡਿਫੌਲਟ ਦਿੱਖ */ @ਪਰਤ ਅਧਾਰ { .ਬਟਨ { ਪਿਛੋਕੜ: #333; ਬਾਰਡਰ-ਰੇਡੀਅਸ: 50%; ਚੌੜਾਈ: 70px; ਉਚਾਈ: 70px; ਡਿਸਪਲੇ: flex; justify-content: ਕੇਂਦਰ; ਅਲਾਈਨ-ਆਈਟਮਾਂ: ਕੇਂਦਰ; }
.pause { ਚੌੜਾਈ: 20px; ਉਚਾਈ: 70px; ਪਿਛੋਕੜ: #333; ਡਿਸਪਲੇ: ਇਨਲਾਈਨ-ਬਲਾਕ; } }
/* ਲੇਅਰ 2: ਐਕਟਿਵ ਸਟੇਟਸ - ਦਬਾਏ ਬਟਨਾਂ ਨੂੰ ਹੈਂਡਲ ਕਰਦਾ ਹੈ */ @ਪਰਤ ਕਿਰਿਆਸ਼ੀਲ { .button.active { ਪਿਛੋਕੜ: #0f0; /* ਦਬਾਉਣ 'ਤੇ ਚਮਕਦਾਰ ਹਰਾ */ ਪਰਿਵਰਤਨ: ਸਕੇਲ(1.1); /* ਬਟਨ ਨੂੰ ਥੋੜ੍ਹਾ ਵੱਡਾ ਕਰਦਾ ਹੈ */ }
.pause.active { ਪਿਛੋਕੜ: #0f0; ਪਰਿਵਰਤਨ: ਸਕੇਲਵਾਈ(1.1); /* ਦਬਾਏ ਜਾਣ 'ਤੇ ਲੰਬਕਾਰੀ ਖਿੱਚਿਆ ਜਾਂਦਾ ਹੈ */ } }
/* ਲੇਅਰ 3: ਡੀਬੱਗ ਓਵਰਲੇ - ਡਿਵੈਲਪਰ ਜਾਣਕਾਰੀ */ @layer ਡੀਬੱਗ { .button:: after { ਸਮੱਗਰੀ: attr (ਡਾਟਾ-ਮੁੱਲ); /* ਸੰਖਿਆਤਮਕ ਮੁੱਲ ਦਿਖਾਉਂਦਾ ਹੈ */ ਫੌਂਟ-ਸਾਈਜ਼: 12px; ਰੰਗ: #fff; } }
ਇਸ ਪਹੁੰਚ ਦੀ ਸੁੰਦਰਤਾ ਇਹ ਹੈ ਕਿ ਹਰੇਕ ਪਰਤ ਦਾ ਇੱਕ ਸਪਸ਼ਟ ਉਦੇਸ਼ ਹੈ. ਬੇਸ ਲੇਅਰ ਕਦੇ ਵੀ ਐਕਟਿਵ ਨੂੰ ਓਵਰਰਾਈਡ ਨਹੀਂ ਕਰ ਸਕਦੀ ਹੈ, ਅਤੇ ਐਕਟਿਵ ਕਦੇ ਵੀ ਡੀਬੱਗ ਨੂੰ ਓਵਰਰਾਈਡ ਨਹੀਂ ਕਰ ਸਕਦਾ ਹੈ, ਭਾਵੇਂ ਕੋਈ ਵੀ ਵਿਸ਼ੇਸ਼ਤਾ ਹੋਵੇ। ਇਹ CSS ਵਿਸ਼ੇਸ਼ਤਾ ਯੁੱਧਾਂ ਨੂੰ ਖਤਮ ਕਰਦਾ ਹੈ ਜੋ ਆਮ ਤੌਰ 'ਤੇ ਡੀਬਗਿੰਗ ਟੂਲਸ ਨੂੰ ਪਲੇਗ ਕਰਦੇ ਹਨ। ਹੁਣ ਇੰਝ ਜਾਪਦਾ ਹੈ ਕਿ ਕੁਝ ਕਲੱਸਟਰ ਹਨੇਰੇ ਦੀ ਪਿੱਠਭੂਮੀ 'ਤੇ ਬੈਠੇ ਹਨ। ਇਮਾਨਦਾਰੀ ਨਾਲ, ਬਹੁਤ ਬੁਰਾ ਨਹੀਂ.
JavaScript ਨੂੰ ਜੋੜਨਾ JavaScript ਸਮਾਂ। ਇਹ ਉਹ ਥਾਂ ਹੈ ਜਿੱਥੇ ਕੰਟਰੋਲਰ ਅਸਲ ਵਿੱਚ ਕੁਝ ਕਰਦਾ ਹੈ। ਅਸੀਂ ਇਸ ਨੂੰ ਕਦਮ ਦਰ ਕਦਮ ਬਣਾਵਾਂਗੇ। ਕਦਮ 1: ਰਾਜ ਪ੍ਰਬੰਧਨ ਸਥਾਪਤ ਕਰੋ ਪਹਿਲਾਂ, ਸਾਨੂੰ ਡੀਬੱਗਰ ਦੀ ਸਥਿਤੀ ਨੂੰ ਟਰੈਕ ਕਰਨ ਲਈ ਵੇਰੀਏਬਲ ਦੀ ਲੋੜ ਹੈ: // ================================ // ਰਾਜ ਪ੍ਰਬੰਧਨ // ================================
let run = ਗਲਤ; // ਟਰੈਕ ਕਰਦਾ ਹੈ ਕਿ ਕੀ ਡੀਬਗਰ ਕਿਰਿਆਸ਼ੀਲ ਹੈ rafId ਦਿਓ; // ਰੱਦ ਕਰਨ ਲਈ requestAnimationFrame ID ਨੂੰ ਸਟੋਰ ਕਰਦਾ ਹੈ
ਇਹ ਵੇਰੀਏਬਲ ਐਨੀਮੇਸ਼ਨ ਲੂਪ ਨੂੰ ਨਿਯੰਤਰਿਤ ਕਰਦੇ ਹਨ ਜੋ ਗੇਮਪੈਡ ਇਨਪੁਟ ਨੂੰ ਲਗਾਤਾਰ ਪੜ੍ਹਦਾ ਹੈ। ਕਦਮ 2: DOM ਹਵਾਲੇ ਪ੍ਰਾਪਤ ਕਰੋ ਅੱਗੇ, ਸਾਨੂੰ ਉਹਨਾਂ ਸਾਰੇ HTML ਤੱਤਾਂ ਦਾ ਹਵਾਲਾ ਮਿਲਦਾ ਹੈ ਜੋ ਅਸੀਂ ਅਪਡੇਟ ਕਰਾਂਗੇ: // ================================ // ਡੋਮ ਐਲੀਮੈਂਟ ਰੈਫਰੈਂਸ // ================================
const btnA = document.getElementById("btn-a"); const btnB = document.getElementById("btn-b"); const btnX = document.getElementById("btn-x"); const pause1 = document.getElementById("pause1"); const pause2 = document.getElementById("pause2"); const ਸਥਿਤੀ = document.getElementById("status");
ਇਹਨਾਂ ਹਵਾਲਿਆਂ ਨੂੰ ਅੱਗੇ ਸਟੋਰ ਕਰਨਾ DOM ਨੂੰ ਵਾਰ-ਵਾਰ ਪੁੱਛਗਿੱਛ ਕਰਨ ਨਾਲੋਂ ਵਧੇਰੇ ਕੁਸ਼ਲ ਹੈ। ਕਦਮ 3: ਕੀਬੋਰਡ ਫਾਲਬੈਕ ਸ਼ਾਮਲ ਕਰੋ ਭੌਤਿਕ ਕੰਟਰੋਲਰ ਤੋਂ ਬਿਨਾਂ ਜਾਂਚ ਲਈ, ਅਸੀਂ ਬਟਨਾਂ ਨਾਲ ਕੀਬੋਰਡ ਕੁੰਜੀਆਂ ਦਾ ਨਕਸ਼ਾ ਬਣਾਵਾਂਗੇ: // ================================ // ਕੀਬੋਰਡ ਫਾਲਬੈਕ (ਬਿਨਾਂ ਕੰਟਰੋਲਰ ਦੇ ਟੈਸਟ ਕਰਨ ਲਈ) // ================================
const keyMap = { "a": btnA, "ਬੀ": btnB, "x": btnX, "p": [pause1, pause2] // 'p' ਕੁੰਜੀ ਦੋਵੇਂ ਵਿਰਾਮ ਬਾਰਾਂ ਨੂੰ ਕੰਟਰੋਲ ਕਰਦੀ ਹੈ };
ਇਹ ਸਾਨੂੰ ਕੀਬੋਰਡ 'ਤੇ ਕੁੰਜੀਆਂ ਦਬਾ ਕੇ UI ਦੀ ਜਾਂਚ ਕਰਨ ਦਿੰਦਾ ਹੈ। ਕਦਮ 4: ਮੁੱਖ ਅੱਪਡੇਟ ਲੂਪ ਬਣਾਓ ਇਹ ਉਹ ਥਾਂ ਹੈ ਜਿੱਥੇ ਜਾਦੂ ਹੁੰਦਾ ਹੈ। ਇਹ ਫੰਕਸ਼ਨ ਲਗਾਤਾਰ ਚੱਲਦਾ ਹੈ ਅਤੇ ਗੇਮਪੈਡ ਸਥਿਤੀ ਪੜ੍ਹਦਾ ਹੈ: // ================================ // ਮੁੱਖ ਗੇਮਪੈਡ ਅੱਪਡੇਟ ਲੂਪ // ================================
ਫੰਕਸ਼ਨ ਅੱਪਡੇਟ ਗੇਮਪੈਡ() { // ਸਾਰੇ ਜੁੜੇ ਹੋਏ ਗੇਮਪੈਡ ਪ੍ਰਾਪਤ ਕਰੋ const gamepads = navigator.getGamepads(); ਜੇਕਰ (!ਗੇਮਪੈਡ) ਵਾਪਸ ਆਉਂਦੇ ਹਨ;
// ਪਹਿਲੇ ਕਨੈਕਟ ਕੀਤੇ ਗੇਮਪੈਡ ਦੀ ਵਰਤੋਂ ਕਰੋ const gp = ਗੇਮਪੈਡ[0];
ਜੇਕਰ (ਜੀਪੀ) { // "ਸਰਗਰਮ" ਕਲਾਸ ਨੂੰ ਟੌਗਲ ਕਰਕੇ ਅੱਪਡੇਟ ਬਟਨ ਸਟੇਟਸ btnA.classList.toggle("active", gp.buttons[0].pressed); btnB.classList.toggle("ਐਕਟਿਵ", gp.buttons[1].ਦਬਾਇਆ); btnX.classList.toggle("active", gp.buttons[2].pressed);
// ਰੋਕੋ ਬਟਨ ਨੂੰ ਹੈਂਡਲ ਕਰੋ (ਜ਼ਿਆਦਾਤਰ ਕੰਟਰੋਲਰਾਂ 'ਤੇ ਬਟਨ ਇੰਡੈਕਸ 9) const pausePressed = gp.buttons[9].pressed; pause1.classList.toggle("active", pausePpressed); pause2.classList.toggle("ਐਕਟਿਵ", pausePpressed);
// ਸਥਿਤੀ ਡਿਸਪਲੇ ਲਈ ਵਰਤਮਾਨ ਵਿੱਚ ਦਬਾਏ ਗਏ ਬਟਨਾਂ ਦੀ ਇੱਕ ਸੂਚੀ ਬਣਾਓ let pressed = []; gp.buttons.forEach((btn, i) => { ਜੇਕਰ (btn. ਦਬਾਇਆ ਗਿਆ)pressed.push("ਬਟਨ" + i); });
// ਜੇਕਰ ਕੋਈ ਬਟਨ ਦਬਾਇਆ ਜਾਂਦਾ ਹੈ ਤਾਂ ਸਥਿਤੀ ਟੈਕਸਟ ਨੂੰ ਅਪਡੇਟ ਕਰੋ ਜੇਕਰ (ਦਬਾਇਆ. ਲੰਬਾਈ > 0) { status.textContent = "ਦਬਾਇਆ: " + pressed.join(", "); } }
// ਜੇਕਰ ਡੀਬਗਰ ਚੱਲ ਰਿਹਾ ਹੈ ਤਾਂ ਲੂਪ ਜਾਰੀ ਰੱਖੋ ਜੇਕਰ (ਚੱਲ ਰਿਹਾ) { rafId = requestAnimationFrame(updateGamepad); } }
classList.toggle() ਵਿਧੀ ਇਸ ਅਧਾਰ 'ਤੇ ਕਿਰਿਆਸ਼ੀਲ ਕਲਾਸ ਨੂੰ ਜੋੜਦੀ ਜਾਂ ਹਟਾਉਂਦੀ ਹੈ ਕਿ ਕੀ ਬਟਨ ਦਬਾਇਆ ਗਿਆ ਹੈ, ਜੋ ਸਾਡੀ CSS ਲੇਅਰ ਸਟਾਈਲ ਨੂੰ ਚਾਲੂ ਕਰਦਾ ਹੈ। ਕਦਮ 5: ਕੀਬੋਰਡ ਇਵੈਂਟਸ ਨੂੰ ਸੰਭਾਲੋ ਇਹ ਇਵੈਂਟ ਸੁਣਨ ਵਾਲੇ ਕੀਬੋਰਡ ਫਾਲਬੈਕ ਕੰਮ ਕਰਦੇ ਹਨ: // ================================ // ਕੀਬੋਰਡ ਇਵੈਂਟ ਹੈਂਡਲਰ // ================================
document.addEventListener("keydown", (e) => { if (keyMap[e.key]) { // ਸਿੰਗਲ ਜਾਂ ਮਲਟੀਪਲ ਐਲੀਮੈਂਟਸ ਨੂੰ ਹੈਂਡਲ ਕਰੋ ਜੇਕਰ (Array.isArray(keyMap[e.key])) { keyMap[e.key].forEach(el => el.classList.add("active")); } ਹੋਰ { keyMap[e.key].classList.add("active"); } status.textContent = "ਕੁੰਜੀ ਦਬਾਈ ਗਈ: " + e.key.toUpperCase(); } });
document.addEventListener("keyup", (e) => { if (keyMap[e.key]) { // ਜਦੋਂ ਕੁੰਜੀ ਜਾਰੀ ਕੀਤੀ ਜਾਂਦੀ ਹੈ ਤਾਂ ਕਿਰਿਆਸ਼ੀਲ ਸਥਿਤੀ ਨੂੰ ਹਟਾਓ ਜੇਕਰ (Array.isArray(keyMap[e.key])) { keyMap[e.key].forEach(el => el.classList.remove("active")); } ਹੋਰ { keyMap[e.key].classList.remove("active"); } status.textContent = "ਕੁੰਜੀ ਜਾਰੀ ਕੀਤੀ ਗਈ: " + e.key.toUpperCase(); } });
ਕਦਮ 6: ਸਟਾਰਟ/ਸਟਾਪ ਕੰਟਰੋਲ ਸ਼ਾਮਲ ਕਰੋ ਅੰਤ ਵਿੱਚ, ਸਾਨੂੰ ਡੀਬੱਗਰ ਨੂੰ ਚਾਲੂ ਅਤੇ ਬੰਦ ਕਰਨ ਲਈ ਇੱਕ ਤਰੀਕੇ ਦੀ ਲੋੜ ਹੈ: // ================================ // ਟੌਗਲ ਡੀਬੱਗਰ ਚਾਲੂ/ਬੰਦ ਕਰੋ // ================================
document.getElementById("toggle").addEventListener("ਕਲਿੱਕ", () => { ਦੌੜਨਾ = !ਦੌੜਨਾ; // ਚੱਲ ਰਹੀ ਸਥਿਤੀ ਨੂੰ ਫਲਿੱਪ ਕਰੋ
ਜੇਕਰ (ਚੱਲ ਰਿਹਾ) { status.textContent = "ਡੀਬਗਰ ਚੱਲ ਰਿਹਾ ਹੈ..."; updateGamepad(); // ਅੱਪਡੇਟ ਲੂਪ ਸ਼ੁਰੂ ਕਰੋ } ਹੋਰ { status.textContent = "ਡੀਬੱਗਰ ਅਕਿਰਿਆਸ਼ੀਲ"; ਐਨੀਮੇਸ਼ਨ ਫਰੇਮ (rafId) ਨੂੰ ਰੱਦ ਕਰੋ; // ਲੂਪ ਨੂੰ ਰੋਕੋ } });
ਤਾਂ ਹਾਂ, ਇੱਕ ਬਟਨ ਦਬਾਓ ਅਤੇ ਇਹ ਚਮਕਦਾ ਹੈ। ਸੋਟੀ ਨੂੰ ਧੱਕੋ ਅਤੇ ਇਹ ਚਲਦਾ ਹੈ. ਇਹ ਹੀ ਗੱਲ ਹੈ. ਇੱਕ ਹੋਰ ਚੀਜ਼: ਕੱਚੇ ਮੁੱਲ. ਕਈ ਵਾਰ ਤੁਸੀਂ ਸਿਰਫ ਨੰਬਰ ਦੇਖਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਲਾਈਟਾਂ ਨਹੀਂ।
ਇਸ ਪੜਾਅ 'ਤੇ, ਤੁਹਾਨੂੰ ਇਹ ਦੇਖਣਾ ਚਾਹੀਦਾ ਹੈ:
ਇੱਕ ਸਧਾਰਨ ਆਨ-ਸਕ੍ਰੀਨ ਕੰਟਰੋਲਰ, ਬਟਨ ਜੋ ਪ੍ਰਤੀਕਿਰਿਆ ਕਰਦੇ ਹਨ ਜਿਵੇਂ ਤੁਸੀਂ ਉਹਨਾਂ ਨਾਲ ਗੱਲਬਾਤ ਕਰਦੇ ਹੋ, ਅਤੇ ਇੱਕ ਵਿਕਲਪਿਕ ਡੀਬੱਗ ਰੀਡਆਊਟ ਦਬਾਇਆ ਬਟਨ ਸੂਚਕਾਂਕ ਦਿਖਾ ਰਿਹਾ ਹੈ।
ਇਸ ਨੂੰ ਘੱਟ ਸੰਖੇਪ ਬਣਾਉਣ ਲਈ, ਇੱਥੇ ਅਸਲ ਸਮੇਂ ਵਿੱਚ ਪ੍ਰਤੀਕਿਰਿਆ ਕਰਨ ਵਾਲੇ ਔਨ-ਸਕ੍ਰੀਨ ਕੰਟਰੋਲਰ ਦਾ ਇੱਕ ਤੇਜ਼ ਡੈਮੋ ਹੈ:
ਹੁਣ, ਸਟਾਰਟ ਰਿਕਾਰਡਿੰਗ ਨੂੰ ਦਬਾਉਣ ਨਾਲ ਸਭ ਕੁਝ ਉਦੋਂ ਤੱਕ ਲੌਗ ਹੋ ਜਾਂਦਾ ਹੈ ਜਦੋਂ ਤੱਕ ਤੁਸੀਂ ਰਿਕਾਰਡਿੰਗ ਬੰਦ ਨਹੀਂ ਕਰਦੇ। 2. CSV/JSON ਵਿੱਚ ਡੇਟਾ ਨਿਰਯਾਤ ਕਰਨਾ ਇੱਕ ਵਾਰ ਜਦੋਂ ਸਾਡੇ ਕੋਲ ਲੌਗ ਹੋ ਜਾਂਦਾ ਹੈ, ਅਸੀਂ ਇਸਨੂੰ ਸੁਰੱਖਿਅਤ ਕਰਨਾ ਚਾਹਾਂਗੇ।
ਕਦਮ 1: ਡਾਊਨਲੋਡ ਸਹਾਇਕ ਬਣਾਓ ਪਹਿਲਾਂ, ਸਾਨੂੰ ਇੱਕ ਸਹਾਇਕ ਫੰਕਸ਼ਨ ਦੀ ਲੋੜ ਹੈ ਜੋ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਫਾਈਲ ਡਾਊਨਲੋਡਾਂ ਨੂੰ ਸੰਭਾਲਦਾ ਹੈ: // ================================ // ਫਾਈਲ ਡਾਉਨਲੋਡ ਹੈਲਪਰ // ================================
ਫੰਕਸ਼ਨ ਡਾਉਨਲੋਡ ਫਾਈਲ (ਫਾਇਲ ਨਾਮ, ਸਮੱਗਰੀ, ਕਿਸਮ = "ਟੈਕਸਟ/ਪਲੇਨ") { // ਸਮੱਗਰੀ ਤੋਂ ਇੱਕ ਬਲੌਬ ਬਣਾਓ const blob = ਨਵਾਂ ਬਲੌਬ([ਸਮੱਗਰੀ], { ਕਿਸਮ }); const url = URL.createObjectURL(blob);
// ਇੱਕ ਅਸਥਾਈ ਡਾਊਨਲੋਡ ਲਿੰਕ ਬਣਾਓ ਅਤੇ ਇਸ 'ਤੇ ਕਲਿੱਕ ਕਰੋ const a = document.createElement("a"); a.href = url; a.download = ਫਾਈਲ ਦਾ ਨਾਮ; a.click();
// ਡਾਊਨਲੋਡ ਕਰਨ ਤੋਂ ਬਾਅਦ ਆਬਜੈਕਟ URL ਨੂੰ ਸਾਫ਼ ਕਰੋ setTimeout(() => URL.revokeObjectURL(url), 100); }
ਇਹ ਫੰਕਸ਼ਨ ਤੁਹਾਡੇ ਡੇਟਾ ਤੋਂ ਇੱਕ ਬਲੌਬ (ਬਾਈਨਰੀ ਵੱਡੀ ਵਸਤੂ) ਬਣਾ ਕੇ, ਇਸਦੇ ਲਈ ਇੱਕ ਅਸਥਾਈ URL ਤਿਆਰ ਕਰਕੇ, ਅਤੇ ਪ੍ਰੋਗਰਾਮੇਟਿਕ ਤੌਰ 'ਤੇ ਇੱਕ ਡਾਉਨਲੋਡ ਲਿੰਕ 'ਤੇ ਕਲਿੱਕ ਕਰਕੇ ਕੰਮ ਕਰਦਾ ਹੈ। ਸਫਾਈ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਕਿ ਅਸੀਂ ਮੈਮੋਰੀ ਨੂੰ ਲੀਕ ਨਹੀਂ ਕਰਦੇ ਹਾਂ। ਕਦਮ 2: JSON ਐਕਸਪੋਰਟ ਨੂੰ ਹੈਂਡਲ ਕਰੋ JSON ਸੰਪੂਰਨ ਡੇਟਾ ਢਾਂਚੇ ਨੂੰ ਸੁਰੱਖਿਅਤ ਰੱਖਣ ਲਈ ਸੰਪੂਰਨ ਹੈ:
// ================================ // JSON ਦੇ ਰੂਪ ਵਿੱਚ ਨਿਰਯਾਤ ਕਰੋ // ================================
document.getElementById("export-json").addEventListener("ਕਲਿੱਕ", () => { // ਜਾਂਚ ਕਰੋ ਕਿ ਕੀ ਨਿਰਯਾਤ ਕਰਨ ਲਈ ਕੁਝ ਹੈ ਜੇਕਰ (!frames.length) { console.warn("ਨਿਰਯਾਤ ਕਰਨ ਲਈ ਕੋਈ ਰਿਕਾਰਡਿੰਗ ਉਪਲਬਧ ਨਹੀਂ ਹੈ।"); ਵਾਪਸੀ; }
// ਮੈਟਾਡੇਟਾ ਅਤੇ ਫਰੇਮਾਂ ਨਾਲ ਇੱਕ ਪੇਲੋਡ ਬਣਾਓ const ਪੇਲੋਡ = { ਇਸ ਸਮੇਂ ਬਣਾਇਆ ਗਿਆ: ਨਵੀਂ ਮਿਤੀ().toISOSstring(), ਫਰੇਮ };
// ਫਾਰਮੈਟ ਕੀਤੇ JSON ਦੇ ਰੂਪ ਵਿੱਚ ਡਾਊਨਲੋਡ ਕਰੋ ਡਾਊਨਲੋਡ ਫਾਈਲ( "gamepad-log.json", JSON.stringify(ਪੇਲੋਡ, ਨਲ, 2), "ਐਪਲੀਕੇਸ਼ਨ/ਜੇਸਨ" ); });
JSON ਫਾਰਮੈਟ ਹਰ ਚੀਜ਼ ਨੂੰ ਢਾਂਚਾਗਤ ਅਤੇ ਆਸਾਨੀ ਨਾਲ ਪਾਰਸ ਕਰਨ ਯੋਗ ਰੱਖਦਾ ਹੈ, ਇਸਨੂੰ dev ਟੂਲਸ ਵਿੱਚ ਵਾਪਸ ਲੋਡ ਕਰਨ ਜਾਂ ਟੀਮ ਦੇ ਸਾਥੀਆਂ ਨਾਲ ਸਾਂਝਾ ਕਰਨ ਲਈ ਆਦਰਸ਼ ਬਣਾਉਂਦਾ ਹੈ। ਕਦਮ 3: CSV ਨਿਰਯਾਤ ਨੂੰ ਸੰਭਾਲੋ CSV ਨਿਰਯਾਤ ਲਈ, ਸਾਨੂੰ ਲੜੀਵਾਰ ਡੇਟਾ ਨੂੰ ਕਤਾਰਾਂ ਅਤੇ ਕਾਲਮਾਂ ਵਿੱਚ ਸਮਤਲ ਕਰਨ ਦੀ ਲੋੜ ਹੈ:
//============================== // CSV ਦੇ ਰੂਪ ਵਿੱਚ ਨਿਰਯਾਤ ਕਰੋ // ================================
document.getElementById("export-csv").addEventListener("ਕਲਿੱਕ", () => { // ਜਾਂਚ ਕਰੋ ਕਿ ਕੀ ਨਿਰਯਾਤ ਕਰਨ ਲਈ ਕੁਝ ਹੈ ਜੇਕਰ (!frames.length) { console.warn("ਨਿਰਯਾਤ ਕਰਨ ਲਈ ਕੋਈ ਰਿਕਾਰਡਿੰਗ ਉਪਲਬਧ ਨਹੀਂ ਹੈ।"); ਵਾਪਸੀ; }
// CSV ਸਿਰਲੇਖ ਕਤਾਰ ਬਣਾਓ (ਟਾਈਮਸਟੈਂਪ ਲਈ ਕਾਲਮ, ਸਾਰੇ ਬਟਨ, ਸਾਰੇ ਧੁਰੇ) const headerButtons = frames[0].buttons.map((_, i) => btn${i}); const headerAxes = frames[0].axes.map((_, i) => axis${i}); const header = ["t", ...headerButtons, ...headerAxes].join(",") + "\n";
// CSV ਡਾਟਾ ਕਤਾਰਾਂ ਬਣਾਓ const rows = frames.map(f => { const btnVals = f.buttons.map(b => b.value); ਵਾਪਸੀ [f.t, ...btnVals, ...f.axes].join(","); }).ਸ਼ਾਮਲ ("\n");
// CSV ਵਜੋਂ ਡਾਊਨਲੋਡ ਕਰੋ ਡਾਊਨਲੋਡ ਫਾਈਲ("gamepad-log.csv", ਸਿਰਲੇਖ + ਕਤਾਰਾਂ, "text/csv"); });
CSV ਡੇਟਾ ਵਿਸ਼ਲੇਸ਼ਣ ਲਈ ਸ਼ਾਨਦਾਰ ਹੈ ਕਿਉਂਕਿ ਇਹ ਸਿੱਧੇ ਐਕਸਲ ਜਾਂ Google ਸ਼ੀਟਾਂ ਵਿੱਚ ਖੁੱਲ੍ਹਦਾ ਹੈ, ਜਿਸ ਨਾਲ ਤੁਸੀਂ ਚਾਰਟ, ਫਿਲਟਰ ਡੇਟਾ, ਜਾਂ ਸਪਾਟ ਪੈਟਰਨ ਵਿਜ਼ੂਲੀ ਬਣਾ ਸਕਦੇ ਹੋ। ਹੁਣ ਜਦੋਂ ਐਕਸਪੋਰਟ ਬਟਨ ਆ ਗਏ ਹਨ, ਤੁਸੀਂ ਪੈਨਲ 'ਤੇ ਦੋ ਨਵੇਂ ਵਿਕਲਪ ਦੇਖੋਗੇ: JSON ਨੂੰ ਐਕਸਪੋਰਟ ਕਰੋ ਅਤੇ CSV ਐਕਸਪੋਰਟ ਕਰੋ। JSON ਵਧੀਆ ਹੈ ਜੇਕਰ ਤੁਸੀਂ ਕੱਚੇ ਲੌਗ ਨੂੰ ਆਪਣੇ dev ਟੂਲਸ ਵਿੱਚ ਵਾਪਸ ਸੁੱਟਣਾ ਚਾਹੁੰਦੇ ਹੋ ਜਾਂ ਢਾਂਚੇ ਦੇ ਆਲੇ ਦੁਆਲੇ ਪੋਕ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ। CSV, ਦੂਜੇ ਪਾਸੇ, ਸਿੱਧੇ ਐਕਸਲ ਜਾਂ ਗੂਗਲ ਸ਼ੀਟਾਂ ਵਿੱਚ ਖੁੱਲ੍ਹਦਾ ਹੈ ਤਾਂ ਜੋ ਤੁਸੀਂ ਇਨਪੁਟਸ ਨੂੰ ਚਾਰਟ, ਫਿਲਟਰ ਜਾਂ ਤੁਲਨਾ ਕਰ ਸਕੋ। ਹੇਠਾਂ ਦਿੱਤਾ ਚਿੱਤਰ ਦਿਖਾਉਂਦਾ ਹੈ ਕਿ ਉਹਨਾਂ ਵਾਧੂ ਨਿਯੰਤਰਣਾਂ ਨਾਲ ਪੈਨਲ ਕਿਹੋ ਜਿਹਾ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ।
3. ਸਨੈਪਸ਼ਾਟ ਸਿਸਟਮ ਕਈ ਵਾਰ ਤੁਹਾਨੂੰ ਪੂਰੀ ਰਿਕਾਰਡਿੰਗ ਦੀ ਲੋੜ ਨਹੀਂ ਹੁੰਦੀ, ਸਿਰਫ਼ ਇਨਪੁਟ ਸਥਿਤੀਆਂ ਦਾ ਇੱਕ ਤੇਜ਼ "ਸਕ੍ਰੀਨਸ਼ਾਟ"। ਇਹ ਉਹ ਥਾਂ ਹੈ ਜਿੱਥੇ ਇੱਕ ਟੇਕ ਸਨੈਪਸ਼ਾਟ ਬਟਨ ਮਦਦ ਕਰਦਾ ਹੈ।
ਅਤੇ JavaScript:
// ================================ // ਸਨੈਪਸ਼ਾਟ ਲਓ // ================================
document.getElementById("snapshot").addEventListener("ਕਲਿੱਕ", () => { // ਸਾਰੇ ਜੁੜੇ ਹੋਏ ਗੇਮਪੈਡ ਪ੍ਰਾਪਤ ਕਰੋ const pads = navigator.getGamepads(); const activePads = [];
// ਲੂਪ ਕਰੋ ਅਤੇ ਹਰੇਕ ਜੁੜੇ ਹੋਏ ਗੇਮਪੈਡ ਦੀ ਸਥਿਤੀ ਨੂੰ ਕੈਪਚਰ ਕਰੋ (ਪੈਡਾਂ ਦੀ ਕੰਸਟ ਜੀਪੀ) ਲਈ { ਜੇਕਰ (!gp) ਜਾਰੀ ਰੱਖੋ; // ਖਾਲੀ ਸਲਾਟ ਛੱਡੋ
ActivePads.push({ id: gp.id, // ਕੰਟਰੋਲਰ ਨਾਮ/ਮਾਡਲ ਟਾਈਮਸਟੈਂਪ: performance.now(), ਬਟਨ: gp.buttons.map(b => ({ ਦਬਾਇਆ: b.pressed, ਮੁੱਲ: b.value })), axes: [...gp.axes] }); }
// ਜਾਂਚ ਕਰੋ ਕਿ ਕੀ ਕੋਈ ਗੇਮਪੈਡ ਮਿਲੇ ਹਨ ਜੇਕਰ (!activePads.length) { console.warn("ਸਨੈਪਸ਼ਾਟ ਲਈ ਕੋਈ ਗੇਮਪੈਡ ਜੁੜਿਆ ਨਹੀਂ ਹੈ।"); ਚੇਤਾਵਨੀ ("ਕੋਈ ਕੰਟਰੋਲਰ ਨਹੀਂ ਮਿਲਿਆ!"); ਵਾਪਸੀ; }
// ਲੌਗ ਕਰੋ ਅਤੇ ਉਪਭੋਗਤਾ ਨੂੰ ਸੂਚਿਤ ਕਰੋ console.log("ਸਨੈਪਸ਼ਾਟ:", ਐਕਟਿਵਪੈਡ); ਚੇਤਾਵਨੀ(ਸਨੈਪਸ਼ਾਟ ਲਿਆ ਗਿਆ! ${activePads.length} ਕੰਟਰੋਲਰ(s) ਕੈਪਚਰ ਕੀਤਾ ਗਿਆ।); });
ਸਨੈਪਸ਼ਾਟ ਸਮੇਂ ਵਿੱਚ ਇੱਕ ਪਲ ਵਿੱਚ ਤੁਹਾਡੇ ਕੰਟਰੋਲਰ ਦੀ ਸਹੀ ਸਥਿਤੀ ਨੂੰ ਫ੍ਰੀਜ਼ ਕਰ ਦਿੰਦੇ ਹਨ। 4. ਗੋਸਟ ਇਨਪੁਟ ਰੀਪਲੇਅ ਹੁਣ ਇੱਕ ਮਜ਼ੇਦਾਰ ਲਈ: ਭੂਤ ਇਨਪੁਟ ਰੀਪਲੇਅ। ਇਹ ਇੱਕ ਲੌਗ ਲੈਂਦਾ ਹੈ ਅਤੇ ਇਸਨੂੰ ਵਿਜ਼ੂਲੀ ਤੌਰ 'ਤੇ ਵਾਪਸ ਚਲਾਉਂਦਾ ਹੈ ਜਿਵੇਂ ਕਿ ਕੋਈ ਫੈਂਟਮ ਪਲੇਅਰ ਕੰਟਰੋਲਰ ਦੀ ਵਰਤੋਂ ਕਰ ਰਿਹਾ ਸੀ।
ਰੀਪਲੇਅ ਲਈ JavaScript: // ================================ // ਗੋਸਟ ਰੀਪਲੇਅ // ================================
document.getElementById("replay").addEventListener("ਕਲਿੱਕ", () => { // ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਸਾਡੇ ਕੋਲ ਰੀਪਲੇਅ ਕਰਨ ਲਈ ਇੱਕ ਰਿਕਾਰਡਿੰਗ ਹੈ ਜੇਕਰ (!frames.length) { ਚੇਤਾਵਨੀ ("ਦੁਬਾਰਾ ਚਲਾਉਣ ਲਈ ਕੋਈ ਰਿਕਾਰਡਿੰਗ ਨਹੀਂ!"); ਵਾਪਸੀ; }
console.log("ਭੂਤ ਰੀਪਲੇਅ ਸ਼ੁਰੂ ਕਰ ਰਿਹਾ ਹੈ...");
// ਸਿੰਕ ਕੀਤੇ ਪਲੇਬੈਕ ਲਈ ਟ੍ਰੈਕ ਟਾਈਮਿੰਗ let startTime = performance.now(); let frameIndex = 0;
// ਐਨੀਮੇਸ਼ਨ ਲੂਪ ਨੂੰ ਦੁਬਾਰਾ ਚਲਾਓ ਫੰਕਸ਼ਨ ਸਟੈਪ() { const now = performance.now(); const elapsed = ਹੁਣ - ਸ਼ੁਰੂਆਤੀ ਸਮਾਂ;
// ਉਹਨਾਂ ਸਾਰੇ ਫਰੇਮਾਂ ਦੀ ਪ੍ਰਕਿਰਿਆ ਕਰੋ ਜੋ ਹੁਣ ਤੱਕ ਹੋਣੀਆਂ ਚਾਹੀਦੀਆਂ ਸਨ
ਜਦਕਿ (frameIndex // ਰਿਕਾਰਡ ਕੀਤੇ ਬਟਨ ਸਟੇਟਸ ਦੇ ਨਾਲ UI ਨੂੰ ਅਪਡੇਟ ਕਰੋ
btnA.classList.toggle("active", frame.buttons[0].pressed);
btnB.classList.toggle("active", frame.buttons[1].pressed);
btnX.classList.toggle("active", frame.buttons[2].pressed); // ਅੱਪਡੇਟ ਸਥਿਤੀ ਡਿਸਪਲੇ
let pressed = [];
frame.buttons.forEach((btn, i) => {
if (btn.pressed) pressed.push("ਬਟਨ" + i);
});
ਜੇਕਰ (ਦਬਾਇਆ. ਲੰਬਾਈ > 0) {
status.textContent = "ਭੂਤ: " + pressed.join(", ");
} frameIndex++;
} // ਲੂਪ ਜਾਰੀ ਰੱਖੋ ਜੇਕਰ ਹੋਰ ਫਰੇਮ ਹਨ
ਜੇਕਰ (frameIndex // ਰੀਪਲੇਅ ਸ਼ੁਰੂ ਕਰੋ
ਕਦਮ();
}); ਡੀਬੱਗਿੰਗ ਨੂੰ ਥੋੜਾ ਹੋਰ ਹੈਂਡ-ਆਨ ਬਣਾਉਣ ਲਈ, ਮੈਂ ਇੱਕ ਭੂਤ ਰੀਪਲੇਅ ਸ਼ਾਮਲ ਕੀਤਾ। ਇੱਕ ਵਾਰ ਜਦੋਂ ਤੁਸੀਂ ਇੱਕ ਸੈਸ਼ਨ ਰਿਕਾਰਡ ਕਰ ਲੈਂਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਰੀਪਲੇਅ ਨੂੰ ਹਿੱਟ ਕਰ ਸਕਦੇ ਹੋ ਅਤੇ UI ਨੂੰ ਇਸ ਨੂੰ ਪੂਰਾ ਕਰਦੇ ਹੋਏ ਦੇਖ ਸਕਦੇ ਹੋ, ਲਗਭਗ ਜਿਵੇਂ ਇੱਕ ਫੈਂਟਮ ਪਲੇਅਰ ਪੈਡ ਚਲਾ ਰਿਹਾ ਹੈ। ਇਸਦੇ ਲਈ ਪੈਨਲ ਵਿੱਚ ਇੱਕ ਨਵਾਂ ਰੀਪਲੇ ਗੋਸਟ ਬਟਨ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ। ਰਿਕਾਰਡ ਨੂੰ ਹਿੱਟ ਕਰੋ, ਕੰਟਰੋਲਰ ਨਾਲ ਥੋੜਾ ਜਿਹਾ ਗੜਬੜ ਕਰੋ, ਰੁਕੋ, ਫਿਰ ਦੁਬਾਰਾ ਚਲਾਓ। UI ਤੁਹਾਡੇ ਦੁਆਰਾ ਕੀਤੀ ਗਈ ਹਰ ਚੀਜ਼ ਨੂੰ ਗੂੰਜਦਾ ਹੈ, ਜਿਵੇਂ ਕਿ ਤੁਹਾਡੇ ਇਨਪੁਟਸ ਦਾ ਅਨੁਸਰਣ ਕਰਨ ਵਾਲਾ ਭੂਤ।
ਇਨ੍ਹਾਂ ਵਾਧੂ ਚੀਜ਼ਾਂ ਨਾਲ ਕਿਉਂ ਪਰੇਸ਼ਾਨ ਹੋ? ਰਿਕਾਰਡਿੰਗ/ਨਿਰਯਾਤ ਟੈਸਟਰਾਂ ਲਈ ਇਹ ਦਿਖਾਉਣਾ ਆਸਾਨ ਬਣਾਉਂਦਾ ਹੈ ਕਿ ਕੀ ਹੋਇਆ ਹੈ।
ਸਨੈਪਸ਼ਾਟ ਸਮੇਂ ਵਿੱਚ ਇੱਕ ਪਲ ਫ੍ਰੀਜ਼ ਹੋ ਜਾਂਦੇ ਹਨ, ਜਦੋਂ ਤੁਸੀਂ ਅਜੀਬ ਬੱਗਾਂ ਦਾ ਪਿੱਛਾ ਕਰਦੇ ਹੋ ਤਾਂ ਬਹੁਤ ਉਪਯੋਗੀ ਹੁੰਦਾ ਹੈ।
ਗੋਸਟ ਰੀਪਲੇਅ ਟਿਊਟੋਰਿਯਲ, ਪਹੁੰਚਯੋਗਤਾ ਜਾਂਚਾਂ, ਜਾਂ ਨਿਯੰਤਰਣ ਸੈਟਅਪ ਦੀ ਨਾਲ-ਨਾਲ ਤੁਲਨਾ ਕਰਨ ਲਈ ਬਹੁਤ ਵਧੀਆ ਹੈ। ਇਸ ਸਮੇਂ, ਇਹ ਹੁਣ ਸਿਰਫ਼ ਇੱਕ ਸਾਫ਼-ਸੁਥਰਾ ਡੈਮੋ ਨਹੀਂ ਹੈ, ਪਰ ਕੁਝ ਅਜਿਹਾ ਹੈ ਜੋ ਤੁਸੀਂ ਅਸਲ ਵਿੱਚ ਕੰਮ ਕਰ ਸਕਦੇ ਹੋ।
ਅਸਲ-ਵਿਸ਼ਵ ਵਰਤੋਂ ਦੇ ਕੇਸ
ਹੁਣ ਸਾਡੇ ਕੋਲ ਇਹ ਡੀਬਗਰ ਹੈ ਜੋ ਬਹੁਤ ਕੁਝ ਕਰ ਸਕਦਾ ਹੈ। ਇਹ ਲਾਈਵ ਇਨਪੁਟ ਦਿਖਾਉਂਦਾ ਹੈ, ਲੌਗਸ ਨੂੰ ਰਿਕਾਰਡ ਕਰਦਾ ਹੈ, ਉਹਨਾਂ ਨੂੰ ਨਿਰਯਾਤ ਕਰਦਾ ਹੈ, ਅਤੇ ਸਮਗਰੀ ਨੂੰ ਵੀ ਰੀਪਲੇਅ ਕਰਦਾ ਹੈ। ਪਰ ਅਸਲ ਸਵਾਲ ਇਹ ਹੈ: ਕੌਣ ਅਸਲ ਵਿੱਚ ਪਰਵਾਹ ਕਰਦਾ ਹੈ? ਇਹ ਕਿਸ ਲਈ ਲਾਭਦਾਇਕ ਹੈ?
ਗੇਮ ਡਿਵੈਲਪਰ
ਕੰਟਰੋਲਰ ਨੌਕਰੀ ਦਾ ਹਿੱਸਾ ਹਨ, ਪਰ ਉਹਨਾਂ ਨੂੰ ਡੀਬੱਗ ਕਰਨਾ? ਆਮ ਤੌਰ 'ਤੇ ਇੱਕ ਦਰਦ. ਕਲਪਨਾ ਕਰੋ ਕਿ ਤੁਸੀਂ ਫਾਈਟਿੰਗ ਗੇਮ ਕੰਬੋ ਦੀ ਜਾਂਚ ਕਰ ਰਹੇ ਹੋ, ਜਿਵੇਂ ↓ → + ਪੰਚ। ਪ੍ਰਾਰਥਨਾ ਕਰਨ ਦੀ ਬਜਾਏ, ਤੁਸੀਂ ਇਸਨੂੰ ਦੋ ਵਾਰ ਉਸੇ ਤਰ੍ਹਾਂ ਦਬਾਇਆ, ਤੁਸੀਂ ਇਸਨੂੰ ਇੱਕ ਵਾਰ ਰਿਕਾਰਡ ਕਰੋ, ਅਤੇ ਇਸਨੂੰ ਦੁਬਾਰਾ ਚਲਾਓ. ਹੋ ਗਿਆ। ਜਾਂ ਤੁਸੀਂ ਇਹ ਜਾਂਚ ਕਰਨ ਲਈ ਕਿ ਕੀ ਤੁਹਾਡਾ ਮਲਟੀਪਲੇਅਰ ਕੋਡ ਉਹਨਾਂ ਦੀ ਮਸ਼ੀਨ 'ਤੇ ਉਹੀ ਪ੍ਰਤੀਕਿਰਿਆ ਕਰਦਾ ਹੈ, ਟੀਮ ਦੇ ਸਾਥੀ ਨਾਲ JSON ਲੌਗਸ ਨੂੰ ਸਵੈਪ ਕਰਦੇ ਹੋ। ਇਹ ਬਹੁਤ ਵੱਡਾ ਹੈ।
ਪਹੁੰਚਯੋਗਤਾ ਪ੍ਰੈਕਟੀਸ਼ਨਰ
ਇਹ ਮੇਰੇ ਦਿਲ ਦੇ ਕਰੀਬ ਹੈ। ਹਰ ਕੋਈ "ਸਟੈਂਡਰਡ" ਕੰਟਰੋਲਰ ਨਾਲ ਨਹੀਂ ਖੇਡਦਾ। ਅਨੁਕੂਲ ਕੰਟਰੋਲਰ ਕਈ ਵਾਰ ਅਜੀਬ ਸਿਗਨਲ ਸੁੱਟ ਦਿੰਦੇ ਹਨ। ਇਸ ਟੂਲ ਨਾਲ, ਤੁਸੀਂ ਬਿਲਕੁਲ ਦੇਖ ਸਕਦੇ ਹੋ ਕਿ ਕੀ ਹੋ ਰਿਹਾ ਹੈ। ਅਧਿਆਪਕ, ਖੋਜਕਰਤਾ, ਜੋ ਵੀ। ਉਹ ਲੌਗਸ ਨੂੰ ਫੜ ਸਕਦੇ ਹਨ, ਉਹਨਾਂ ਦੀ ਤੁਲਨਾ ਕਰ ਸਕਦੇ ਹਨ, ਜਾਂ ਇਨਪੁਟਸ ਨੂੰ ਨਾਲ-ਨਾਲ ਦੁਬਾਰਾ ਚਲਾ ਸਕਦੇ ਹਨ। ਅਚਾਨਕ, ਅਦਿੱਖ ਚੀਜ਼ਾਂ ਸਪੱਸ਼ਟ ਹੋ ਜਾਂਦੀਆਂ ਹਨ.
ਗੁਣਵੱਤਾ ਭਰੋਸਾ ਟੈਸਟਿੰਗ
ਟੈਸਟਰ ਆਮ ਤੌਰ 'ਤੇ ਨੋਟ ਲਿਖਦੇ ਹਨ ਜਿਵੇਂ ਕਿ "ਮੈਂ ਇੱਥੇ ਬਟਨਾਂ ਨੂੰ ਮੈਸ਼ ਕੀਤਾ ਅਤੇ ਇਹ ਟੁੱਟ ਗਿਆ।" ਬਹੁਤ ਮਦਦਗਾਰ ਨਹੀਂ। ਹੁਣ? ਉਹ ਸਹੀ ਪ੍ਰੈਸਾਂ ਨੂੰ ਹਾਸਲ ਕਰ ਸਕਦੇ ਹਨ, ਲੌਗ ਨੂੰ ਨਿਰਯਾਤ ਕਰ ਸਕਦੇ ਹਨ, ਅਤੇ ਇਸਨੂੰ ਭੇਜ ਸਕਦੇ ਹਨ। ਕੋਈ ਅੰਦਾਜ਼ਾ ਨਹੀਂ।
ਸਿੱਖਿਅਕ
ਜੇਕਰ ਤੁਸੀਂ ਟਿਊਟੋਰਿਅਲ ਜਾਂ ਯੂਟਿਊਬ ਵਿਡੀਓ ਬਣਾ ਰਹੇ ਹੋ, ਤਾਂ ਭੂਤ ਰੀਪਲੇਅ ਸੋਨਾ ਹੈ। ਤੁਸੀਂ ਸ਼ਾਬਦਿਕ ਤੌਰ 'ਤੇ ਕਹਿ ਸਕਦੇ ਹੋ, "ਇੱਥੇ ਮੈਂ ਕੰਟਰੋਲਰ ਨਾਲ ਕੀ ਕੀਤਾ," ਜਦੋਂ ਕਿ UI ਇਹ ਹੋ ਰਿਹਾ ਦਿਖਾਉਂਦਾ ਹੈ। ਵਿਆਖਿਆਵਾਂ ਨੂੰ ਹੋਰ ਸਪੱਸ਼ਟ ਕਰਦਾ ਹੈ।
ਖੇਡਾਂ ਤੋਂ ਪਰੇ
ਅਤੇ ਹਾਂ, ਇਹ ਸਿਰਫ ਖੇਡਾਂ ਬਾਰੇ ਨਹੀਂ ਹੈ. ਲੋਕਾਂ ਨੇ ਰੋਬੋਟ, ਕਲਾ ਪ੍ਰੋਜੈਕਟਾਂ ਅਤੇ ਪਹੁੰਚਯੋਗਤਾ ਇੰਟਰਫੇਸ ਲਈ ਕੰਟਰੋਲਰਾਂ ਦੀ ਵਰਤੋਂ ਕੀਤੀ ਹੈ। ਹਰ ਵਾਰ ਇੱਕੋ ਮੁੱਦਾ: ਬ੍ਰਾਊਜ਼ਰ ਅਸਲ ਵਿੱਚ ਕੀ ਦੇਖ ਰਿਹਾ ਹੈ? ਇਸਦੇ ਨਾਲ, ਤੁਹਾਨੂੰ ਅੰਦਾਜ਼ਾ ਲਗਾਉਣ ਦੀ ਜ਼ਰੂਰਤ ਨਹੀਂ ਹੈ.
ਸਿੱਟਾ
ਇੱਕ ਕੰਟਰੋਲਰ ਇਨਪੁਟ ਨੂੰ ਡੀਬੱਗ ਕਰਨਾ ਹਮੇਸ਼ਾ ਅੰਨ੍ਹੇ ਉੱਡਣ ਵਾਂਗ ਮਹਿਸੂਸ ਹੁੰਦਾ ਹੈ। DOM ਜਾਂ CSS ਦੇ ਉਲਟ, ਗੇਮਪੈਡਾਂ ਲਈ ਕੋਈ ਬਿਲਟ-ਇਨ ਇੰਸਪੈਕਟਰ ਨਹੀਂ ਹੈ; ਇਹ ਕੰਸੋਲ ਵਿੱਚ ਸਿਰਫ਼ ਕੱਚੇ ਨੰਬਰ ਹਨ, ਰੌਲੇ ਵਿੱਚ ਆਸਾਨੀ ਨਾਲ ਗੁਆਚ ਜਾਂਦੇ ਹਨ।
HTML, CSS, ਅਤੇ JavaScript ਦੀਆਂ ਕੁਝ ਸੌ ਲਾਈਨਾਂ ਦੇ ਨਾਲ, ਅਸੀਂ ਕੁਝ ਵੱਖਰਾ ਬਣਾਇਆ ਹੈ: ਇੱਕ ਵਿਜ਼ੂਅਲ ਡੀਬੱਗਰ ਜੋ ਅਦਿੱਖ ਇਨਪੁਟਸ ਨੂੰ ਦ੍ਰਿਸ਼ਮਾਨ ਬਣਾਉਂਦਾ ਹੈ।
ਇੱਕ ਲੇਅਰਡ CSS ਸਿਸਟਮ ਜੋ UI ਨੂੰ ਸਾਫ਼ ਅਤੇ ਡੀਬੱਗ ਕਰਨ ਯੋਗ ਰੱਖਦਾ ਹੈ।
ਸੁਧਾਰਾਂ ਦਾ ਇੱਕ ਸਮੂਹ (ਰਿਕਾਰਡਿੰਗ, ਨਿਰਯਾਤ, ਸਨੈਪਸ਼ਾਟ, ਭੂਤ ਰੀਪਲੇਅ) ਜੋ ਇਸਨੂੰ ਡੈਮੋ ਤੋਂ ਡਿਵੈਲਪਰ ਟੂਲ ਤੱਕ ਉੱਚਾ ਕਰਦਾ ਹੈ। ਇਹ ਪ੍ਰੋਜੈਕਟ ਦਿਖਾਉਂਦਾ ਹੈ ਕਿ ਤੁਸੀਂ CSS ਕੈਸਕੇਡ ਲੇਅਰਾਂ ਵਿੱਚ ਥੋੜੀ ਰਚਨਾਤਮਕਤਾ ਨਾਲ ਵੈੱਬ ਪਲੇਟਫਾਰਮ ਦੀ ਸ਼ਕਤੀ ਨੂੰ ਮਿਲਾ ਕੇ ਕਿੰਨੀ ਦੂਰ ਜਾ ਸਕਦੇ ਹੋ।
ਟੂਲ ਜਿਸਦੀ ਮੈਂ ਹੁਣੇ ਵਿਆਖਿਆ ਕੀਤੀ ਹੈ ਉਹ ਓਪਨ-ਸੋਰਸ ਹੈ. ਤੁਸੀਂ GitHub ਰੈਪੋ ਨੂੰ ਕਲੋਨ ਕਰ ਸਕਦੇ ਹੋ ਅਤੇ ਇਸਨੂੰ ਆਪਣੇ ਲਈ ਅਜ਼ਮਾ ਸਕਦੇ ਹੋ।
ਪਰ ਸਭ ਤੋਂ ਮਹੱਤਵਪੂਰਨ, ਤੁਸੀਂ ਇਸਨੂੰ ਆਪਣਾ ਬਣਾ ਸਕਦੇ ਹੋ। ਆਪਣੀਆਂ ਖੁਦ ਦੀਆਂ ਪਰਤਾਂ ਸ਼ਾਮਲ ਕਰੋ। ਆਪਣਾ ਰੀਪਲੇਅ ਤਰਕ ਬਣਾਓ। ਇਸਨੂੰ ਆਪਣੇ ਗੇਮ ਪ੍ਰੋਟੋਟਾਈਪ ਨਾਲ ਜੋੜੋ। ਜਾਂ ਇੱਥੋਂ ਤੱਕ ਕਿ ਇਸਦੀ ਵਰਤੋਂ ਉਹਨਾਂ ਤਰੀਕਿਆਂ ਨਾਲ ਕਰੋ ਜਿਨ੍ਹਾਂ ਦੀ ਮੈਂ ਕਲਪਨਾ ਨਹੀਂ ਕੀਤੀ ਹੈ. ਸਿੱਖਿਆ, ਪਹੁੰਚਯੋਗਤਾ, ਜਾਂ ਡੇਟਾ ਵਿਸ਼ਲੇਸ਼ਣ ਲਈ।
ਦਿਨ ਦੇ ਅੰਤ ਵਿੱਚ, ਇਹ ਸਿਰਫ ਗੇਮਪੈਡਾਂ ਨੂੰ ਡੀਬੱਗ ਕਰਨ ਬਾਰੇ ਨਹੀਂ ਹੈ. ਇਹ ਲੁਕਵੇਂ ਇਨਪੁਟਸ 'ਤੇ ਰੋਸ਼ਨੀ ਚਮਕਾਉਣ ਅਤੇ ਡਿਵੈਲਪਰਾਂ ਨੂੰ ਹਾਰਡਵੇਅਰ ਨਾਲ ਕੰਮ ਕਰਨ ਦਾ ਭਰੋਸਾ ਦੇਣ ਬਾਰੇ ਹੈ ਜਿਸ ਨੂੰ ਵੈੱਬ ਅਜੇ ਵੀ ਪੂਰੀ ਤਰ੍ਹਾਂ ਗ੍ਰਹਿਣ ਨਹੀਂ ਕਰਦਾ ਹੈ।
ਇਸ ਲਈ, ਆਪਣੇ ਕੰਟਰੋਲਰ ਨੂੰ ਪਲੱਗ ਇਨ ਕਰੋ, ਆਪਣਾ ਸੰਪਾਦਕ ਖੋਲ੍ਹੋ, ਅਤੇ ਪ੍ਰਯੋਗ ਕਰਨਾ ਸ਼ੁਰੂ ਕਰੋ। ਤੁਸੀਂ ਹੈਰਾਨ ਹੋ ਸਕਦੇ ਹੋ ਕਿ ਤੁਹਾਡਾ ਬ੍ਰਾਊਜ਼ਰ ਅਤੇ ਤੁਹਾਡਾ CSS ਅਸਲ ਵਿੱਚ ਕੀ ਕਰ ਸਕਦਾ ਹੈ।
