23 KiB

Raw Blame History

ਸਪੇਸ ਗੇਮ ਬਣਾਓ ਭਾਗ 6: ਅੰਤ ਅਤੇ ਮੁੜ ਸ਼ੁਰੂ

ਹਰ ਵਧੀਆ ਗੇਮ ਵਿੱਚ ਸਪਸ਼ਟ ਅੰਤ ਦੀਆਂ ਸ਼ਰਤਾਂ ਅਤੇ ਇੱਕ ਸੁਗਮ ਮੁੜ ਸ਼ੁਰੂ ਕਰਨ ਦੀ ਵਿਵਸਥਾ ਹੋਣੀ ਚਾਹੀਦੀ ਹੈ। ਤੁਸੀਂ ਇੱਕ ਸ਼ਾਨਦਾਰ ਸਪੇਸ ਗੇਮ ਬਣਾਈ ਹੈ ਜਿਸ ਵਿੱਚ ਮੂਵਮੈਂਟ, ਲੜਾਈ ਅਤੇ ਸਕੋਰਿੰਗ ਹੈ - ਹੁਣ ਸਮਾਂ ਹੈ ਇਸਨੂੰ ਪੂਰਾ ਮਹਿਸੂਸ ਕਰਨ ਲਈ ਆਖਰੀ ਹਿੱਸੇ ਜੋੜਨ ਦਾ।

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

ਅੱਜ, ਅਸੀਂ ਜਿੱਤ/ਹਾਰ ਦੀਆਂ ਸ਼ਰਤਾਂ ਅਤੇ ਇੱਕ ਮੁੜ ਸ਼ੁਰੂ ਕਰਨ ਦੀ ਪ੍ਰਣਾਲੀ ਲਾਗੂ ਕਰਾਂਗੇ। ਇਸ ਪਾਠ ਦੇ ਅੰਤ ਤੱਕ, ਤੁਹਾਡੇ ਕੋਲ ਇੱਕ ਪਾਲਿਸ਼ ਕੀਤੀ ਗੇਮ ਹੋਵੇਗੀ ਜਿਸਨੂੰ ਖਿਡਾਰੀ ਪੂਰਾ ਕਰ ਸਕਦੇ ਹਨ ਅਤੇ ਮੁੜ ਖੇਡ ਸਕਦੇ ਹਨ, ਬਿਲਕੁਲ ਉਹਨਾਂ ਕਲਾਸਿਕ ਆਰਕੇਡ ਗੇਮਾਂ ਦੀ ਤਰ੍ਹਾਂ ਜਿਨ੍ਹਾਂ ਨੇ ਮੀਡੀਆਮ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕੀਤਾ।

ਪਾਠ ਤੋਂ ਪਹਿਲਾਂ ਕਵਿਜ਼

ਗੇਮ ਦੇ ਅੰਤ ਦੀਆਂ ਸ਼ਰਤਾਂ ਨੂੰ ਸਮਝਣਾ

ਤੁਹਾਡੀ ਗੇਮ ਕਦੋਂ ਖਤਮ ਹੋਣੀ ਚਾਹੀਦੀ ਹੈ? ਇਹ ਮੂਲ ਸਵਾਲ ਆਰਕੇਡ ਦੇ ਸ਼ੁਰੂਆਤੀ ਯੁੱਗ ਤੋਂ ਗੇਮ ਡਿਜ਼ਾਈਨ ਨੂੰ ਆਕਾਰ ਦੇ ਰਿਹਾ ਹੈ। Pac-Man ਵਿੱਚ ਗੇਮ ਉਸ ਸਮੇਂ ਖਤਮ ਹੁੰਦੀ ਹੈ ਜਦੋਂ ਤੁਸੀਂ ਭੂਤਾਂ ਦੁਆਰਾ ਫੜੇ ਜਾਂਦੇ ਹੋ ਜਾਂ ਸਾਰੇ ਡਾਟਸ ਸਾਫ ਕਰ ਲੈਂਦੇ ਹੋ, ਜਦੋਂ ਕਿ Space Invaders ਵਿੱਚ ਗੇਮ ਉਸ ਸਮੇਂ ਖਤਮ ਹੁੰਦੀ ਹੈ ਜਦੋਂ ਐਲੀਅਨ ਹੇਠਾਂ ਪਹੁੰਚ ਜਾਂਦੇ ਹਨ ਜਾਂ ਤੁਸੀਂ ਉਹਨਾਂ ਨੂੰ ਸਾਰੇ ਨਸ਼ਟ ਕਰ ਦਿੰਦੇ ਹੋ।

ਗੇਮ ਬਣਾਉਣ ਵਾਲੇ ਦੇ ਤੌਰ ਤੇ, ਤੁਸੀਂ ਜਿੱਤ ਅਤੇ ਹਾਰ ਦੀਆਂ ਸ਼ਰਤਾਂ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦੇ ਹੋ। ਸਾਡੀ ਸਪੇਸ ਗੇਮ ਲਈ, ਇੱਥੇ ਕੁਝ ਸਾਬਤ ਕੀਤੇ ਗਏ ਤਰੀਕੇ ਹਨ ਜੋ ਰੋਮਾਂਚਕ ਗੇਮਪਲੇ ਬਣਾਉਂਦੇ ਹਨ:

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

ਗੇਮ ਮੁੜ ਸ਼ੁਰੂ ਕਰਨ ਦੀ ਵਿਵਸਥਾ ਲਾਗੂ ਕਰਨਾ

ਵਧੀਆ ਗੇਮਾਂ ਸੁਗਮ ਮੁੜ ਸ਼ੁਰੂ ਕਰਨ ਦੀ ਪ੍ਰਣਾਲੀ ਰਾਹੀਂ ਮੁੜ ਖੇਡਣ ਦੀ ਪ੍ਰੇਰਨਾ ਦਿੰਦੇ ਹਨ। ਜਦੋਂ ਖਿਡਾਰੀ ਗੇਮ ਪੂਰੀ ਕਰਦੇ ਹਨ (ਜਾਂ ਹਾਰ ਜਾਂਦੇ ਹਨ), ਉਹ ਅਕਸਰ ਤੁਰੰਤ ਮੁੜ ਸ਼ੁਰੂ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹਨ - ਚਾਹੇ ਆਪਣਾ ਸਕੋਰ ਪਿਛਲੇ ਤੋਂ ਵਧੀਆ ਕਰਨ ਲਈ ਜਾਂ ਆਪਣੀ ਪ੍ਰਦਰਸ਼ਨਸ਼ੀਲਤਾ ਵਿੱਚ ਸੁਧਾਰ ਕਰਨ ਲਈ।

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

✅ ਚਿੰਤਨ: ਉਹ ਗੇਮਾਂ ਬਾਰੇ ਸੋਚੋ ਜੋ ਤੁਸੀਂ ਖੇਡੀ ਹਨ। ਉਹ ਕਿਹੜੀਆਂ ਸ਼ਰਤਾਂ 'ਤੇ ਖਤਮ ਹੁੰਦੀਆਂ ਹਨ, ਅਤੇ ਤੁਹਾਨੂੰ ਮੁੜ ਸ਼ੁਰੂ ਕਰਨ ਲਈ ਕਿਵੇਂ ਪ੍ਰੇਰਿਤ ਕੀਤਾ ਜਾਂਦਾ ਹੈ? ਇੱਕ ਮੁੜ ਸ਼ੁਰੂ ਕਰਨ ਦਾ ਅਨੁਭਵ ਸੁਗਮ ਬਨਾਮ ਨਿਰਾਸ਼ਜਨਕ ਕਿਵੇਂ ਮਹਿਸੂਸ ਹੁੰਦਾ ਹੈ?

ਤੁਸੀਂ ਕੀ ਬਣਾਉਂਗੇ

ਤੁਸੀਂ ਆਖਰੀ ਫੀਚਰ ਲਾਗੂ ਕਰੋਗੇ ਜੋ ਤੁਹਾਡੇ ਪ੍ਰੋਜੈਕਟ ਨੂੰ ਇੱਕ ਪੂਰੀ ਗੇਮ ਅਨੁਭਵ ਵਿੱਚ ਬਦਲ ਦਿੰਦੇ ਹਨ। ਇਹ ਤੱਤ ਪਾਲਿਸ਼ ਕੀਤੀਆਂ ਗੇਮਾਂ ਨੂੰ ਬੁਨਿਆਦੀ ਪ੍ਰੋਟੋਟਾਈਪ ਤੋਂ ਵੱਖ ਕਰਦੇ ਹਨ।

ਅੱਜ ਅਸੀਂ ਕੀ ਜੋੜ ਰਹੇ ਹਾਂ:

ਜਿੱਤ ਦੀ ਸ਼ਰਤ: ਸਾਰੇ ਦੁਸ਼ਮਨਾਂ ਨੂੰ ਨਸ਼ਟ ਕਰੋ ਅਤੇ ਇੱਕ ਸਹੀ ਜਸ਼ਨ ਪ੍ਰਾਪਤ ਕਰੋ (ਤੁਸੀਂ ਇਸਨੂੰ ਕਮਾਇਆ ਹੈ!)
ਹਾਰ ਦੀ ਸ਼ਰਤ: ਜ਼ਿੰਦਗੀਆਂ ਖਤਮ ਹੋਣ 'ਤੇ ਹਾਰ ਸਕਰੀਨ ਦਾ ਸਾਹਮਣਾ ਕਰੋ
ਮੁੜ ਸ਼ੁਰੂ ਕਰਨ ਦੀ ਪ੍ਰਣਾਲੀ: ਮੁੜ ਸ਼ੁਰੂ ਕਰਨ ਲਈ Enter ਦਬਾਓ - ਕਿਉਂਕਿ ਇੱਕ ਗੇਮ ਕਦੇ ਵੀ ਕਾਫ਼ੀ ਨਹੀਂ ਹੁੰਦੀ
ਸਥਿਤੀ ਪ੍ਰਬੰਧਨ: ਹਰ ਵਾਰ ਸਾਫ਼ ਸ਼ੁਰੂ - ਪਿਛਲੀ ਗੇਮ ਤੋਂ ਕੋਈ ਬਚੇ ਹੋਏ ਦੁਸ਼ਮਨ ਜਾਂ ਅਜੀਬ ਗਲਤੀਆਂ ਨਹੀਂ

ਸ਼ੁਰੂਆਤ ਕਰਨਾ

ਆਪਣੇ ਵਿਕਾਸ ਦੇ ਮਾਹੌਲ ਦੀ ਤਿਆਰੀ ਕਰੋ। ਤੁਹਾਡੇ ਕੋਲ ਪਿਛਲੇ ਪਾਠਾਂ ਤੋਂ ਸਾਰੇ ਸਪੇਸ ਗੇਮ ਫਾਈਲਾਂ ਤਿਆਰ ਹੋਣੀਆਂ ਚਾਹੀਦੀਆਂ ਹਨ।

ਤੁਹਾਡਾ ਪ੍ਰੋਜੈਕਟ ਕੁਝ ਇਸ ਤਰ੍ਹਾਂ ਦਿਖਾਈ ਦੇਣਾ ਚਾਹੀਦਾ ਹੈ:

-| assets
  -| enemyShip.png
  -| player.png
  -| laserRed.png
  -| life.png
-| index.html
-| app.js
-| package.json

ਆਪਣਾ ਵਿਕਾਸ ਸਰਵਰ ਸ਼ੁਰੂ ਕਰੋ:

cd your-work
npm start

ਇਹ ਕਮਾਂਡ:

ਇੱਕ ਸਥਾਨਕ ਸਰਵਰ http://localhost:5000 'ਤੇ ਚਲਾਉਂਦੀ ਹੈ
ਤੁਹਾਡੀਆਂ ਫਾਈਲਾਂ ਨੂੰ ਠੀਕ ਤਰੀਕੇ ਨਾਲ ਸਰਵ ਕਰਦੀ ਹੈ
ਜਦੋਂ ਤੁਸੀਂ ਬਦਲਾਅ ਕਰਦੇ ਹੋ ਤਾਂ ਆਪਣੇ ਆਪ ਰੀਫ੍ਰੈਸ਼ ਹੁੰਦੀ ਹੈ

http://localhost:5000 ਨੂੰ ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਖੋਲ੍ਹੋ ਅਤੇ ਪੁਸ਼ਟੀ ਕਰੋ ਕਿ ਤੁਹਾਡੀ ਗੇਮ ਚੱਲ ਰਹੀ ਹੈ। ਤੁਹਾਨੂੰ ਮੂਵ, ਸ਼ੂਟ ਅਤੇ ਦੁਸ਼ਮਨਾਂ ਨਾਲ ਇੰਟਰੈਕਟ ਕਰਨ ਦੇ ਯੋਗ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ। ਇੱਕ ਵਾਰ ਪੁਸ਼ਟੀ ਹੋਣ 'ਤੇ, ਅਸੀਂ ਲਾਗੂ ਕਰਨ ਦੀ ਪ੍ਰਕਿਰਿਆ ਜਾਰੀ ਰੱਖ ਸਕਦੇ ਹਾਂ।

💡 ਪ੍ਰੋ ਟਿਪ: Visual Studio Code ਵਿੱਚ ਚੇਤਾਵਨੀ ਤੋਂ ਬਚਣ ਲਈ, gameLoopId ਨੂੰ ਆਪਣੇ ਫਾਈਲ ਦੇ ਸ਼ੁਰੂ 'ਤੇ let gameLoopId; ਵਜੋਂ ਘੋਸ਼ਿਤ ਕਰੋ ਬਜਾਏ ਇਸਨੂੰ window.onload ਫੰਕਸ਼ਨ ਦੇ ਅੰਦਰ ਘੋਸ਼ਿਤ ਕਰਨ ਦੇ। ਇਹ ਆਧੁਨਿਕ JavaScript ਵੈਰੀਏਬਲ ਘੋਸ਼ਣਾ ਦੇ ਸ੍ਰੇਸ਼ਠ ਤਰੀਕਿਆਂ ਦੀ ਪਾਲਣਾ ਕਰਦਾ ਹੈ।

ਲਾਗੂ ਕਰਨ ਦੇ ਕਦਮ

ਕਦਮ 1: ਅੰਤ ਦੀਆਂ ਸ਼ਰਤਾਂ ਨੂੰ ਟ੍ਰੈਕ ਕਰਨ ਵਾਲੇ ਫੰਕਸ਼ਨ ਬਣਾਓ

ਸਾਨੂੰ ਫੰਕਸ਼ਨਾਂ ਦੀ ਲੋੜ ਹੈ ਜੋ ਗੇਮ ਕਦੋਂ ਖਤਮ ਹੋਣੀ ਚਾਹੀਦੀ ਹੈ ਇਸਨੂੰ ਨਿਗਰਾਨੀ ਕਰਦੇ ਹਨ। ਜਿਵੇਂ ਕਿ International Space Station ਦੇ ਸੈਂਸਰ ਜੋ ਨਿਰੰਤਰ ਮਹੱਤਵਪੂਰਨ ਸਿਸਟਮਾਂ ਦੀ ਨਿਗਰਾਨੀ ਕਰਦੇ ਹਨ, ਇਹ ਫੰਕਸ਼ਨ ਗੇਮ ਦੀ ਸਥਿਤੀ ਨੂੰ ਲਗਾਤਾਰ ਜਾਂਚਣਗੇ।

function isHeroDead() {
  return hero.life <= 0;
}

function isEnemiesDead() {
  const enemies = gameObjects.filter((go) => go.type === "Enemy" && !go.dead);
  return enemies.length === 0;
}

ਇੱਥੇ ਕੀ ਹੋ ਰਿਹਾ ਹੈ:

ਜਾਂਚਦਾ ਹੈ ਕਿ ਸਾਡਾ ਹੀਰੋ ਜ਼ਿੰਦਗੀ ਤੋਂ ਬਾਹਰ ਹੈ ਜਾਂ ਨਹੀਂ (ਅਫ਼ਸੋਸ!)
ਗਿਣਦਾ ਹੈ ਕਿ ਕਿੰਨੇ ਦੁਸ਼ਮਨ ਅਜੇ ਵੀ ਜ਼ਿੰਦਾ ਹਨ
ਸੱਚ/ਝੂਠ ਲਾਜ਼ਮੀ ਤਰੀਕੇ ਨਾਲ ਸਿੱਧਾ ਰੱਖਣ ਲਈ ਵਰਤਦਾ ਹੈ
ਬਚੇ ਹੋਏ ਦੁਸ਼ਮਨਾਂ ਨੂੰ ਲੱਭਣ ਲਈ ਸਾਰੇ ਗੇਮ ਆਬਜੈਕਟਾਂ ਨੂੰ ਫਿਲਟਰ ਕਰਦਾ ਹੈ

ਕਦਮ 2: ਅੰਤ ਦੀਆਂ ਸ਼ਰਤਾਂ ਲਈ ਇਵੈਂਟ ਹੈਂਡਲਰ ਅਪਡੇਟ ਕਰੋ

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

eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
    first.dead = true;
    second.dead = true;
    hero.incrementPoints();

    if (isEnemiesDead()) {
      eventEmitter.emit(Messages.GAME_END_WIN);
    }
});

eventEmitter.on(Messages.COLLISION_ENEMY_HERO, (_, { enemy }) => {
    enemy.dead = true;
    hero.decrementLife();
    if (isHeroDead())  {
      eventEmitter.emit(Messages.GAME_END_LOSS);
      return; // loss before victory
    }
    if (isEnemiesDead()) {
      eventEmitter.emit(Messages.GAME_END_WIN);
    }
});

eventEmitter.on(Messages.GAME_END_WIN, () => {
    endGame(true);
});
  
eventEmitter.on(Messages.GAME_END_LOSS, () => {
  endGame(false);
});

ਇੱਥੇ ਕੀ ਹੋ ਰਿਹਾ ਹੈ:

ਲੇਜ਼ਰ ਦੁਸ਼ਮਨ ਨੂੰ ਮਾਰਦਾ ਹੈ: ਦੋਵੇਂ ਗਾਇਬ ਹੋ ਜਾਂਦੇ ਹਨ, ਤੁਹਾਨੂੰ ਪਾਇੰਟ ਮਿਲਦੇ ਹਨ, ਅਤੇ ਅਸੀਂ ਜਾਂਚਦੇ ਹਾਂ ਕਿ ਤੁਸੀਂ ਜਿੱਤ ਗਏ ਹੋ
ਦੁਸ਼ਮਨ ਤੁਹਾਨੂੰ ਮਾਰਦਾ ਹੈ: ਤੁਸੀਂ ਇੱਕ ਜ਼ਿੰਦਗੀ ਗੁਆਦੇ ਹੋ, ਅਤੇ ਅਸੀਂ ਜਾਂਚਦੇ ਹਾਂ ਕਿ ਤੁਸੀਂ ਅਜੇ ਵੀ ਜ਼ਿੰਦਾ ਹੋ
ਸਮਾਰਟ ਕ੍ਰਮ: ਅਸੀਂ ਪਹਿਲਾਂ ਹਾਰ ਦੀ ਜਾਂਚ ਕਰਦੇ ਹਾਂ (ਕੋਈ ਵੀ ਇੱਕ ਸਮੇਂ ਵਿੱਚ ਜਿੱਤਣਾ ਅਤੇ ਹਾਰਣਾ ਨਹੀਂ ਚਾਹੁੰਦਾ!)
ਤੁਰੰਤ ਪ੍ਰਤੀਕ੍ਰਿਆ: ਜਿਵੇਂ ਹੀ ਕੁਝ ਮਹੱਤਵਪੂਰਨ ਹੁੰਦਾ ਹੈ, ਗੇਮ ਨੂੰ ਇਸ ਬਾਰੇ ਪਤਾ ਹੁੰਦਾ ਹੈ

ਕਦਮ 3: ਨਵੇਂ ਸੁਨੇਹੇ Constants ਸ਼ਾਮਲ ਕਰੋ

ਤੁਹਾਨੂੰ ਆਪਣੇ Messages constant object ਵਿੱਚ ਨਵੇਂ ਸੁਨੇਹੇ ਦੀਆਂ ਕਿਸਮਾਂ ਸ਼ਾਮਲ ਕਰਨ ਦੀ ਲੋੜ ਹੋਵੇਗੀ। ਇਹ constants ਸਥਿਰਤਾ ਬਣਾਉਣ ਵਿੱਚ ਮਦਦ ਕਰਦੇ ਹਨ ਅਤੇ ਤੁਹਾਡੇ ਇਵੈਂਟ ਸਿਸਟਮ ਵਿੱਚ ਟਾਈਪੋਜ਼ ਨੂੰ ਰੋਕਦੇ ਹਨ।

GAME_END_LOSS: "GAME_END_LOSS",
GAME_END_WIN: "GAME_END_WIN",

ਉਪਰੋਕਤ ਵਿੱਚ, ਅਸੀਂ:

ਸੁਨੇਹੇ ਦੀਆਂ ਸ਼ਰਤਾਂ ਲਈ constants ਸ਼ਾਮਲ ਕੀਤੇ ਸਥਿਰਤਾ ਬਣਾਉਣ ਲਈ
ਵਰਤੇ ਵਰਣਨਾਤਮਕ ਨਾਮ ਜੋ ਸਪਸ਼ਟ ਤੌਰ 'ਤੇ ਇਵੈਂਟ ਦੇ ਉਦੇਸ਼ ਨੂੰ ਦਰਸਾਉਂਦੇ ਹਨ
ਮੌਜੂਦਾ ਨਾਮਕਰਨ ਰੀਤੀ ਦੀ ਪਾਲਣਾ ਕੀਤੀ ਸੁਨੇਹੇ ਦੀਆਂ ਕਿਸਮਾਂ ਲਈ

ਕਦਮ 4: ਮੁੜ ਸ਼ੁਰੂ ਕਰਨ ਦੇ ਕੰਟਰੋਲ ਲਾਗੂ ਕਰੋ

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

ਆਪਣੇ ਮੌਜੂਦਾ keydown ਇਵੈਂਟ ਸੁਣਨ ਵਾਲੇ ਵਿੱਚ Enter ਕੁੰਜੀ ਦੀ ਪਛਾਣ ਸ਼ਾਮਲ ਕਰੋ:

else if(evt.key === "Enter") {
   eventEmitter.emit(Messages.KEY_EVENT_ENTER);
}

ਨਵਾਂ ਸੁਨੇਹਾ constant ਸ਼ਾਮਲ ਕਰੋ:

KEY_EVENT_ENTER: "KEY_EVENT_ENTER",

ਤੁਹਾਨੂੰ ਕੀ ਜਾਣਨ ਦੀ ਲੋੜ ਹੈ:

ਤੁਹਾਡੇ ਮੌਜੂਦਾ ਕੀਬੋਰਡ ਇਵੈਂਟ ਹੈਂਡਲਿੰਗ ਸਿਸਟਮ ਨੂੰ ਵਧਾਉਂਦਾ ਹੈ
Enter ਕੁੰਜੀ ਨੂੰ ਮੁੜ ਸ਼ੁਰੂ ਕਰਨ ਦੇ ਟ੍ਰਿਗਰ ਵਜੋਂ ਵਰਤਦਾ ਹੈ ਸਹਜ ਯੂਜ਼ਰ ਅਨੁਭਵ ਲਈ
ਇੱਕ ਕਸਟਮ ਇਵੈਂਟ ਨੂੰ ਜਾਰੀ ਕਰਦਾ ਹੈ ਜਿਸਨੂੰ ਤੁਹਾਡੀ ਗੇਮ ਦੇ ਹੋਰ ਹਿੱਸੇ ਸੁਣ ਸਕਦੇ ਹਨ
ਤੁਹਾਡੇ ਹੋਰ ਕੀਬੋਰਡ ਕੰਟਰੋਲਾਂ ਦੇ ਸਮਾਨ ਪੈਟਰਨ ਨੂੰ ਬਣਾਈ ਰੱਖਦਾ ਹੈ

ਕਦਮ 5: ਸੁਨੇਹਾ ਡਿਸਪਲੇ ਸਿਸਟਮ ਬਣਾਓ

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

displayMessage() ਫੰਕਸ਼ਨ ਬਣਾਓ:

function displayMessage(message, color = "red") {
  ctx.font = "30px Arial";
  ctx.fillStyle = color;
  ctx.textAlign = "center";
  ctx.fillText(message, canvas.width / 2, canvas.height / 2);
}

ਕਦਮ-ਦਰ-ਕਦਮ, ਇੱਥੇ ਕੀ ਹੋ ਰਿਹਾ ਹੈ:

ਫੋਂਟ ਸਾਈਜ਼ ਅਤੇ ਫੋਂਟ ਫੈਮਿਲੀ ਸੈਟ ਕਰਦਾ ਹੈ ਸਪਸ਼ਟ, ਪੜ੍ਹਨਯੋਗ ਟੈਕਸਟ ਲਈ
ਰੰਗ ਪੈਰਾਮੀਟਰ ਲਾਗੂ ਕਰਦਾ ਹੈ "ਲਾਲ" ਨੂੰ ਚੇਤਾਵਨੀ ਲਈ ਡਿਫਾਲਟ ਵਜੋਂ
ਟੈਕਸਟ ਨੂੰ ਕੈਨਵਸ 'ਤੇ ਖੜ੍ਹੇ ਅਤੇ ਲੰਬੇ ਤੌਰ 'ਤੇ ਕੇਂਦਰਿਤ ਕਰਦਾ ਹੈ
ਮੋਡਰਨ JavaScript ਡਿਫਾਲਟ ਪੈਰਾਮੀਟਰ ਵਰਤਦਾ ਹੈ ਲਚੀਲੇ ਰੰਗ ਵਿਕਲਪਾਂ ਲਈ
ਕੈਨਵਸ 2D ਸੰਦਰਭ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ ਸਿੱਧੇ ਟੈਕਸਟ ਰੇਂਡਰਿੰਗ ਲਈ

endGame() ਫੰਕਸ਼ਨ ਬਣਾਓ:

function endGame(win) {
  clearInterval(gameLoopId);

  // Set a delay to ensure any pending renders complete
  setTimeout(() => {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = "black";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    if (win) {
      displayMessage(
        "Victory!!! Pew Pew... - Press [Enter] to start a new game Captain Pew Pew",
        "green"
      );
    } else {
      displayMessage(
        "You died !!! Press [Enter] to start a new game Captain Pew Pew"
      );
    }
  }, 200)  
}

ਇਹ ਫੰਕਸ਼ਨ ਕੀ ਕਰਦਾ ਹੈ:

ਸਭ ਕੁਝ ਜਮਾਉਂਦਾ ਹੈ - ਹੋਰ ਜਹਾਜ਼ ਜਾਂ ਲੇਜ਼ਰ ਨਹੀਂ ਹਿਲਦੇ
ਇੱਕ ਛੋਟਾ ਰੁਕਾਅ ਲੈਂਦਾ ਹੈ (200ms) ਆਖਰੀ ਫਰੇਮ ਨੂੰ ਖਿੱਚਣ ਦੇਣ ਲਈ
ਸਕਰੀਨ ਨੂੰ ਸਾਫ਼ ਕਰਦਾ ਹੈ ਅਤੇ ਇਸਨੂੰ ਡਰਾਮੇਟਿਕ ਪ੍ਰਭਾਵ ਲਈ ਕਾਲਾ ਪੇਂਟ ਕਰਦਾ ਹੈ
ਜਿੱਤਣ ਵਾਲਿਆਂ ਅਤੇ ਹਾਰਨ ਵਾਲਿਆਂ ਲਈ ਵੱਖ-ਵੱਖ ਸੁਨੇਹੇ ਦਿਖਾਉਂਦਾ ਹੈ
ਖਿਡਾਰੀਆਂ ਨੂੰ ਸਪਸ਼ਟ ਤੌਰ 'ਤੇ ਦੱਸਦਾ ਹੈ ਕਿ ਮੁੜ ਸ਼ੁਰੂ ਕਰਨ ਲਈ ਕੀ ਕਰਨਾ ਹੈ

ਅਸਵੀਕਰਤਾ:
ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ Co-op Translator ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਹਾਲਾਂਕਿ ਅਸੀਂ ਸਹੀ ਹੋਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁੱਤੀਆਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਇਸਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।

23 KiB Raw Blame History