31 KiB

Raw Blame History Unescape Escape

ਸਪੇਸ ਗੇਮ ਬਣਾਓ ਭਾਗ 3: ਮੋਸ਼ਨ ਸ਼ਾਮਲ ਕਰਨਾ

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

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

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

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

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

ਗੇਮ ਮੋਸ਼ਨ ਨੂੰ ਸਮਝਣਾ

ਗੇਮਾਂ ਜੀਵੰਤ ਹੁੰਦੀਆਂ ਹਨ ਜਦੋਂ ਚੀਜ਼ਾਂ ਹਿਲਣ ਲੱਗਦੀਆਂ ਹਨ, ਅਤੇ ਮੁਢਲੀ ਤੌਰ 'ਤੇ ਇਹ ਦੋ ਤਰੀਕਿਆਂ ਨਾਲ ਹੁੰਦਾ ਹੈ:

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

ਕੰਪਿਊਟਰ ਸਕ੍ਰੀਨ 'ਤੇ ਚੀਜ਼ਾਂ ਨੂੰ ਹਿਲਾਉਣਾ ਤੁਹਾਡੇ ਸੋਚਣ ਤੋਂ ਸੌਖਾ ਹੈ। ਮੈਥ ਕਲਾਸ ਤੋਂ ਉਹ x ਅਤੇ y ਕੋਆਰਡੀਨੇਟ ਯਾਦ ਹਨ? ਇਹੀ ਹੈ ਜੋ ਅਸੀਂ ਇੱਥੇ ਕਰ ਰਹੇ ਹਾਂ। ਜਦੋਂ ਗੈਲੀਲੀਓ ਨੇ 1610 ਵਿੱਚ ਜੂਪੀਟਰ ਦੇ ਚੰਦਾਂ ਨੂੰ ਟ੍ਰੈਕ ਕੀਤਾ, ਉਹ ਅਸਲ ਵਿੱਚ ਇਹੀ ਕਰ ਰਿਹਾ ਸੀ - ਮੋਸ਼ਨ ਪੈਟਰਨ ਨੂੰ ਸਮਝਣ ਲਈ ਸਮੇਂ ਦੇ ਨਾਲ ਸਥਿਤੀਆਂ ਨੂੰ ਪਲਾਟ ਕਰਨਾ।

ਸਕ੍ਰੀਨ 'ਤੇ ਚੀਜ਼ਾਂ ਨੂੰ ਹਿਲਾਉਣਾ ਫਲਿੱਪਬੁੱਕ ਐਨੀਮੇਸ਼ਨ ਬਣਾਉਣ ਵਾਂਗ ਹੈ - ਤੁਹਾਨੂੰ ਇਹ ਤਿੰਨ ਸੌਖੇ ਕਦਮਾਂ ਦੀ ਪਾਲਣਾ ਕਰਨ ਦੀ ਲੋੜ ਹੈ:

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

ਇਹ ਕਾਫ਼ੀ ਤੇਜ਼ੀ ਨਾਲ ਕਰੋ, ਅਤੇ ਬਸ! ਤੁਹਾਡੇ ਕੋਲ ਹੌਲੀ ਹੌਲੀ ਮੋਸ਼ਨ ਹੈ ਜੋ ਖਿਡਾਰੀਆਂ ਨੂੰ ਕੁਦਰਤੀ ਮਹਿਸੂਸ ਹੁੰਦਾ ਹੈ।

ਇਹ ਕੋਡ ਵਿੱਚ ਇਸ ਤਰ੍ਹਾਂ ਦਿਖਾਈ ਦੇ ਸਕਦਾ ਹੈ:

// Set the hero's location
hero.x += 5;
// Clear the rectangle that hosts the hero
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Redraw the game background and hero
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "black";
ctx.drawImage(heroImg, hero.x, hero.y);

ਇਹ ਕੋਡ ਕੀ ਕਰਦਾ ਹੈ:

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

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

ਕੀਬੋਰਡ ਇਵੈਂਟਸ ਨੂੰ ਸੰਭਾਲਣਾ

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

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

ਇਹ ਮੈਨੂੰ ਯਾਦ ਦਿਵਾਉਂਦਾ ਹੈ ਕਿ 1800 ਦੇ ਦਹਾਕੇ ਵਿੱਚ ਟੈਲੀਗ੍ਰਾਫ ਓਪਰੇਟਰਾਂ ਨੂੰ ਮੋਰਸ ਕੋਡ ਇਨਪੁਟ ਨੂੰ ਅਰਥਪੂਰਨ ਸੁਨੇਹਿਆਂ ਵਿੱਚ ਤਬਦੀਲ ਕਰਨਾ ਪੈਂਦਾ ਸੀ - ਅਸੀਂ ਕੁਝ ਇਸੇ ਤਰ੍ਹਾਂ ਕਰ ਰਹੇ ਹਾਂ, ਕੁੰਜੀ ਦਬਾਅ ਨੂੰ ਗੇਮ ਹੁਕਮਾਂ ਵਿੱਚ ਤਬਦੀਲ ਕਰ ਰਹੇ ਹਾਂ।

ਇੱਕ ਇਵੈਂਟ ਨੂੰ ਸੰਭਾਲਣ ਲਈ ਤੁਹਾਨੂੰ ਵਿੰਡੋ ਦੇ addEventListener() ਮੈਥਡ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੀ ਲੋੜ ਹੈ ਅਤੇ ਇਸ ਨੂੰ ਦੋ ਇਨਪੁਟ ਪੈਰਾਮੀਟਰ ਪ੍ਰਦਾਨ ਕਰਨ ਦੀ ਲੋੜ ਹੈ। ਪਹਿਲਾ ਪੈਰਾਮੀਟਰ ਇਵੈਂਟ ਦਾ ਨਾਮ ਹੈ, ਉਦਾਹਰਣ ਲਈ keyup। ਦੂਜਾ ਪੈਰਾਮੀਟਰ ਉਹ ਫੰਕਸ਼ਨ ਹੈ ਜੋ ਇਵੈਂਟ ਹੋਣ ਦੇ ਨਤੀਜੇ ਵਜੋਂ ਚਲਾਇਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ।

ਇਹ ਇੱਕ ਉਦਾਹਰਣ ਹੈ:

window.addEventListener('keyup', (evt) => {
  // evt.key = string representation of the key
  if (evt.key === 'ArrowUp') {
    // do something
  }
});

ਇੱਥੇ ਕੀ ਹੁੰਦਾ ਹੈ ਇਸਨੂੰ ਵੰਡ ਕੇ ਸਮਝਦੇ ਹਾਂ:

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

ਕੀ ਇਵੈਂਟਸ ਲਈ ਇਵੈਂਟ 'ਤੇ ਦੋ ਗੁਣ ਹੁੰਦੇ ਹਨ ਜੋ ਤੁਸੀਂ ਵਰਤ ਸਕਦੇ ਹੋ ਇਹ ਦੇਖਣ ਲਈ ਕਿ ਕਿਹੜੀ ਕੁੰਜੀ ਦਬਾਈ ਗਈ ਸੀ:

key - ਇਹ ਦਬਾਈ ਗਈ ਕੁੰਜੀ ਦਾ ਸਤਰ ਪ੍ਰਤੀਨਿਧੀ ਹੈ, ਉਦਾਹਰਣ ਲਈ 'ArrowUp'
keyCode - ਇਹ ਇੱਕ ਨੰਬਰ ਪ੍ਰਤੀਨਿਧੀ ਹੈ, ਉਦਾਹਰਣ ਲਈ 37, ਜੋ ArrowLeft ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ

✅ ਕੀ ਇਵੈਂਟ ਮੈਨਿਪੂਲੇਸ਼ਨ ਗੇਮ ਡਿਵੈਲਪਮੈਂਟ ਤੋਂ ਬਾਹਰ ਵੀ ਲਾਭਦਾਇਕ ਹੈ। ਇਸ ਤਕਨੀਕ ਲਈ ਹੋਰ ਕੀ ਉਪਯੋਗਤਾਵਾਂ ਤੁਸੀਂ ਸੋਚ ਸਕਦੇ ਹੋ?

ਖਾਸ ਕੁੰਜੀਆਂ: ਇੱਕ ਚੇਤਾਵਨੀ!

ਕੁਝ ਕੁੰਜੀਆਂ ਵਿੱਚ ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਅੰਦਰ ਬਣੇ ਹੋਏ ਵਿਹਾਰ ਹੁੰਦੇ ਹਨ ਜੋ ਤੁਹਾਡੀ ਗੇਮ ਵਿੱਚ ਰੁਕਾਵਟ ਪੈਦਾ ਕਰ ਸਕਦੇ ਹਨ। ਐਰੋ ਕੁੰਜੀਆਂ ਪੰਨਾ ਸਕ੍ਰੋਲ ਕਰਦੀਆਂ ਹਨ ਅਤੇ ਸਪੇਸਬਾਰ ਹੇਠਾਂ ਜੰਪ ਕਰਦਾ ਹੈ - ਵਿਹਾਰ ਜੋ ਤੁਸੀਂ ਨਹੀਂ ਚਾਹੁੰਦੇ ਜਦੋਂ ਕੋਈ ਆਪਣਾ ਸਪੇਸਸ਼ਿਪ ਚਲਾਉਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰ ਰਿਹਾ ਹੈ।

ਅਸੀਂ ਇਹ ਡਿਫਾਲਟ ਵਿਹਾਰ ਰੋਕ ਸਕਦੇ ਹਾਂ ਅਤੇ ਆਪਣੀ ਗੇਮ ਨੂੰ ਇਸ ਇਨਪੁਟ ਨੂੰ ਸੰਭਾਲਣ ਦੇ ਸਕਦੇ ਹਾਂ। ਇਹ ਉਸ ਤਰ੍ਹਾਂ ਹੀ ਹੈ ਜਿਵੇਂ ਕਿ ਸ਼ੁਰੂਆਤੀ ਕੰਪਿਊਟਰ ਪ੍ਰੋਗਰਾਮਰਾਂ ਨੂੰ ਕਸਟਮ ਵਿਹਾਰ ਬਣਾਉਣ ਲਈ ਸਿਸਟਮ ਇੰਟਰਪਟਸ ਨੂੰ ਓਵਰਰਾਈਡ ਕਰਨਾ ਪੈਂਦਾ ਸੀ - ਅਸੀਂ ਸਿਰਫ਼ ਇਸਨੂੰ ਬ੍ਰਾਊਜ਼ਰ ਪੱਧਰ 'ਤੇ ਕਰ ਰਹੇ ਹਾਂ। ਇਹ ਹੈ ਕਿ ਕਿਵੇਂ:

const onKeyDown = function (e) {
  console.log(e.keyCode);
  switch (e.keyCode) {
    case 37:
    case 39:
    case 38:
    case 40: // Arrow keys
    case 32:
      e.preventDefault();
      break; // Space
    default:
      break; // do not block other keys
  }
};

window.addEventListener('keydown', onKeyDown);

ਇਸ ਰੋਕਥਾਮ ਕੋਡ ਨੂੰ ਸਮਝਣਾ:

ਖਾਸ ਕੁੰਜੀ ਕੋਡਾਂ ਲਈ ਜਾਂਚ ਕਰਦਾ ਹੈ ਜੋ ਅਣਚਾਹੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿਹਾਰ ਦਾ ਕਾਰਨ ਬਣ ਸਕਦੇ ਹਨ
ਡਿਫਾਲਟ ਬ੍ਰਾਊਜ਼ਰ ਕਾਰਵਾਈ ਨੂੰ ਰੋਕਦਾ ਹੈ ਐਰੋ ਕੁੰਜੀਆਂ ਅਤੇ ਸਪੇਸਬਾਰ ਲਈ
ਹੋਰ ਕੁੰਜੀਆਂ ਨੂੰ ਆਮ ਤੌਰ 'ਤੇ ਕੰਮ ਕਰਨ ਦਿੰਦਾ ਹੈ
e.preventDefault() ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਅੰਦਰ ਬਣੇ ਹੋਏ ਵਿਹਾਰ ਨੂੰ ਰੋਕਣ ਲਈ

ਗੇਮ ਦੁਆਰਾ ਪ੍ਰੇਰਿਤ ਮੋਸ਼ਨ

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

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

const id = setInterval(() => {
  // Move the enemy on the y axis
  enemy.y += 10;
}, 100);

ਇਹ ਮੋਸ਼ਨ ਕੋਡ ਕੀ ਕਰਦਾ ਹੈ:

ਟਾਈਮਰ ਬਣਾਉਂਦਾ ਹੈ ਜੋ ਹਰ 100 ਮਿਲੀਸੈਕੰਡ 'ਤੇ ਚਲਦਾ ਹੈ
ਦੁਸ਼ਮਣ ਦੇ y-ਕੋਆਰਡੀਨੇਟ ਨੂੰ 10 ਪਿਕਸਲਾਂ ਨਾਲ ਅਪਡੇਟ ਕਰਦਾ ਹੈ ਹਰ ਵਾਰ
ਇੰਟਰਵਲ ID ਨੂੰ ਸਟੋਰ ਕਰਦਾ ਹੈ ਤਾਂ ਕਿ ਅਸੀਂ ਇਸਨੂੰ ਬਾਅਦ ਵਿੱਚ ਰੋਕ ਸਕੀਏ
ਦੁਸ਼ਮਣ ਨੂੰ ਸਕ੍ਰੀਨ 'ਤੇ ਆਪਣੇ ਆਪ ਹੇਠਾਂ ਹਿਲਾਉਂਦਾ ਹੈ

ਗੇਮ ਲੂਪ

ਇਹ ਸੰਕਲਪ ਹੈ ਜੋ ਸਭ ਕੁਝ ਇਕੱਠਾ ਕਰਦਾ ਹੈ - ਗੇਮ ਲੂਪ। ਜੇ ਤੁਹਾਡੀ ਗੇਮ ਇੱਕ ਫਿਲਮ ਹੁੰਦੀ, ਤਾਂ ਗੇਮ ਲੂਪ ਫਿਲਮ ਪ੍ਰੋਜੈਕਟਰ ਹੁੰਦਾ, ਜੋ ਫਰੇਮ ਦੇ ਬਾਅਦ ਫਰੇਮ ਦਿਖਾਉਂਦਾ ਹੈ ਤਾਂ ਕਿ ਸਭ ਕੁਝ ਹੌਲੀ ਹੌਲੀ ਹਿਲਦਾ ਦਿਖਾਈ ਦੇਵੇ।

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

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

ਇਹ ਹੈ ਕਿ ਇੱਕ ਗੇਮ ਲੂਪ ਆਮ ਤੌਰ 'ਤੇ ਕਿਵੇਂ ਦਿਖਾਈ ਦੇ ਸਕਦਾ ਹੈ, ਕੋਡ ਵਿੱਚ ਪ੍ਰਗਟ ਕੀਤਾ:

const gameLoopId = setInterval(() => {
  function gameLoop() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = "black";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    drawHero();
    drawEnemies();
    drawStaticObjects();
  }
  gameLoop();
}, 200);

ਗੇਮ ਲੂਪ ਸਟ੍ਰਕਚਰ ਨੂੰ ਸਮਝਣਾ:

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

ਸਪੇਸ ਗੇਮ ਜਾਰੀ ਰੱਖਣਾ

ਹੁਣ ਅਸੀਂ ਮੋਸ਼ਨ ਨੂੰ ਸਥਿਰ ਦ੍ਰਿਸ਼ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰਾਂਗੇ ਜੋ ਤੁਸੀਂ ਪਹਿਲਾਂ ਬਣਾਇਆ ਸੀ। ਅਸੀਂ ਇਸਨੂੰ ਇੱਕ ਸਕ੍ਰੀਨਸ਼ਾਟ ਤੋਂ ਇੱਕ ਇੰਟਰੈਕਟਿਵ ਅਨੁਭਵ ਵਿੱਚ ਬਦਲਣ ਜਾ ਰਹੇ ਹਾਂ। ਅਸੀਂ ਇਸਨੂੰ ਕਦਮ-ਦਰ-ਕਦਮ ਕੰਮ ਕਰਕੇ ਕਰਾਂਗੇ ਤਾਂ ਕਿ ਹਰ ਹਿੱਸਾ ਪਿਛਲੇ 'ਤੇ ਬਣੇ।

ਪਿਛਲੇ ਪਾਠ ਵਿੱਚ ਜਿੱਥੇ ਅਸੀਂ ਛੱਡਿਆ ਸੀ ਉਸ ਕੋਡ ਨੂੰ ਪਕੜੋ (ਜਾਂ ਜੇ ਤੁਹਾਨੂੰ ਨਵੀਂ ਸ਼ੁਰੂਆਤ ਦੀ ਲੋੜ ਹੈ ਤਾਂ ਭਾਗ II- ਸ਼ੁਰੂਆਤੀ ਫੋਲਡਰ

ਬਣਾਉਂਦਾ ਹੈ nested loops ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਦੁਸ਼ਮਨਾਂ ਦੀ grid
ਦੁਸ਼ਮਨ ਦੀ ਚਿੱਤਰਕਲਾ ਹਰ ਦੁਸ਼ਮਨ object ਨੂੰ ਸੌਂਪਦਾ ਹੈ
ਹਰ ਦੁਸ਼ਮਨ ਨੂੰ global game objects array ਵਿੱਚ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ

ਅਤੇ ਇੱਕ createHero() ਫੰਕਸ਼ਨ ਸ਼ਾਮਲ ਕਰੋ ਜੋ ਹੀਰੋ ਲਈ ਇਸੇ ਤਰ੍ਹਾਂ ਦੀ ਪ੍ਰਕਿਰਿਆ ਕਰੇ।

```javascript
function createHero() {
  hero = new Hero(
    canvas.width / 2 - 45,
    canvas.height - canvas.height / 4
  );
  hero.img = heroImg;
  gameObjects.push(hero);
}
```

ਹੀਰੋ ਬਣਾਉਣ ਦਾ ਕੰਮ:

ਹੀਰੋ ਨੂੰ ਸਕ੍ਰੀਨ ਦੇ ਹੇਠਲੇ ਕੇਂਦਰ ਵਿੱਚ ਸਥਿਤ ਕਰਦਾ ਹੈ
ਹੀਰੋ ਦੀ ਚਿੱਤਰਕਲਾ ਹੀਰੋ object ਨੂੰ ਸੌਂਪਦਾ ਹੈ
ਹੀਰੋ ਨੂੰ rendering ਲਈ game objects array ਵਿੱਚ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ

ਅਤੇ ਅੰਤ ਵਿੱਚ, drawGameObjects() ਫੰਕਸ਼ਨ ਸ਼ੁਰੂ ਕਰਨ ਲਈ ਸ਼ਾਮਲ ਕਰੋ:

```javascript
function drawGameObjects(ctx) {
  gameObjects.forEach(go => go.draw(ctx));
}
```

ਡ੍ਰਾਇੰਗ ਫੰਕਸ਼ਨ ਨੂੰ ਸਮਝਣਾ:

game objects array ਵਿੱਚ ਸਾਰੇ objects ਨੂੰ iterate ਕਰਦਾ ਹੈ
ਹਰ object ਤੇ draw() ਮੈਥਡ ਨੂੰ ਕਾਲ ਕਰਦਾ ਹੈ
canvas context ਨੂੰ ਪਾਸ ਕਰਦਾ ਹੈ ਤਾਂ ਜੋ objects ਆਪਣੇ ਆਪ render ਕਰ ਸਕਣ

ਤੁਹਾਡੇ ਦੁਸ਼ਮਨ ਤੁਹਾਡੇ ਹੀਰੋ spaceship ਵੱਲ ਅੱਗੇ ਵਧਣੇ ਚਾਹੀਦੇ ਹਨ! } } ```

and add a `createHero()` function to do a similar process for the hero.

```javascript
function createHero() {
  hero = new Hero(
    canvas.width / 2 - 45,
    canvas.height - canvas.height / 4
  );
  hero.img = heroImg;
  gameObjects.push(hero);
}
```

ਅਤੇ ਅੰਤ ਵਿੱਚ, drawGameObjects() ਫੰਕਸ਼ਨ ਸ਼ੁਰੂ ਕਰਨ ਲਈ ਸ਼ਾਮਲ ਕਰੋ:

```javascript
function drawGameObjects(ctx) {
  gameObjects.forEach(go => go.draw(ctx));
}
```

ਤੁਹਾਡੇ ਦੁਸ਼ਮਨ ਤੁਹਾਡੇ ਹੀਰੋ spaceship ਵੱਲ ਅੱਗੇ ਵਧਣੇ ਚਾਹੀਦੇ ਹਨ!

GitHub Copilot Agent Challenge 🚀

ਇਹاں ਇੱਕ ਚੁਣੌਤੀ ਹੈ ਜੋ ਤੁਹਾਡੇ ਖੇਡ ਦੇ ਪੋਲਿਸ਼ ਨੂੰ ਬਿਹਤਰ ਕਰੇਗੀ: boundaries ਅਤੇ smooth controls ਸ਼ਾਮਲ ਕਰਨਾ। ਇਸ ਸਮੇਂ, ਤੁਹਾਡਾ ਹੀਰੋ ਸਕ੍ਰੀਨ ਤੋਂ ਬਾਹਰ ਉੱਡ ਸਕਦਾ ਹੈ, ਅਤੇ ਮੂਵਮੈਂਟ ਕੁਝ ਚੌਕਾ ਦੇਣ ਵਾਲੀ ਲੱਗ ਸਕਦੀ ਹੈ।

ਤੁਹਾਡਾ ਮਿਸ਼ਨ: ਤੁਹਾਡੇ spaceship ਨੂੰ ਜ਼ਿਆਦਾ ਹਕੀਕਤੀ ਬਣਾਉਣ ਲਈ boundaries ਅਤੇ fluid movement ਲਾਗੂ ਕਰੋ। ਇਹ NASA ਦੇ flight control systems ਵਰਗਾ ਹੈ ਜੋ spacecraft ਨੂੰ ਸੁਰੱਖਿਅਤ operational parameters ਤੋਂ ਵੱਧ ਜਾਣ ਤੋਂ ਰੋਕਦੇ ਹਨ।

ਇਹ ਬਣਾਉਣਾ ਹੈ: ਇੱਕ ਸਿਸਟਮ ਬਣਾਓ ਜੋ ਤੁਹਾਡੇ ਹੀਰੋ spaceship ਨੂੰ ਸਕ੍ਰੀਨ 'ਤੇ ਰੱਖੇ, ਅਤੇ controls ਨੂੰ smooth ਬਣਾਏ। ਜਦੋਂ ਖਿਡਾਰੀ arrow key ਦਬਾਉਂਦੇ ਹਨ, ਤਾਂ ਜਹਾਜ਼ ਨੂੰ discrete steps ਦੀ ਬਜਾਏ ਲਗਾਤਾਰ glide ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ। ਜਦੋਂ ਜਹਾਜ਼ ਸਕ੍ਰੀਨ boundaries 'ਤੇ ਪਹੁੰਚਦਾ ਹੈ, ਤਾਂ visual feedback ਸ਼ਾਮਲ ਕਰਨ ਬਾਰੇ ਸੋਚੋ – ਸ਼ਾਇਦ play area ਦੇ edge ਨੂੰ ਦਰਸਾਉਣ ਲਈ subtle effect।

agent mode ਬਾਰੇ ਹੋਰ ਜਾਣੋ।

🚀 Challenge

ਜਿਵੇਂ ਜਿਵੇਂ ਪ੍ਰੋਜੈਕਟ ਵਧਦੇ ਹਨ, code organization ਬਹੁਤ ਮਹੱਤਵਪੂਰਨ ਬਣ ਜਾਂਦੀ ਹੈ। ਤੁਸੀਂ ਸ਼ਾਇਦ ਧਿਆਨ ਦਿੱਤਾ ਹੋਵੇ ਕਿ ਤੁਹਾਡੀ ਫਾਈਲ functions, variables, ਅਤੇ classes ਦੇ ਨਾਲ ਭਰੀ ਹੋਈ ਹੈ। ਇਹ ਮੈਨੂੰ Apollo mission code ਦੇ ਇੰਜੀਨੀਅਰਾਂ ਦੀ ਯਾਦ ਦਿਵਾਉਂਦਾ ਹੈ ਜਿਨ੍ਹਾਂ ਨੂੰ ਸਪਸ਼ਟ, maintainable systems ਬਣਾਉਣੇ ਪਏ ਜੋ ਕਈ ਟੀਮਾਂ ਇੱਕੋ ਸਮੇਂ 'ਤੇ ਕੰਮ ਕਰ ਸਕਣ।

ਤੁਹਾਡਾ ਮਿਸ਼ਨ: Software architect ਵਾਂਗ ਸੋਚੋ। ਤੁਸੀਂ ਆਪਣੀ code ਨੂੰ ਕਿਵੇਂ organize ਕਰੋਗੇ ਤਾਂ ਕਿ ਛੇ ਮਹੀਨੇ ਬਾਅਦ, ਤੁਸੀਂ (ਜਾਂ ਤੁਹਾਡਾ ਸਾਥੀ) ਸਮਝ ਸਕੋ ਕਿ ਕੀ ਹੋ ਰਿਹਾ ਹੈ? ਭਾਵੇਂ ਸਾਰਾ ਕੁਝ ਇੱਕ ਫਾਈਲ ਵਿੱਚ ਰਹੇ, ਤੁਸੀਂ ਬਿਹਤਰ organization ਕਰ ਸਕਦੇ ਹੋ:

ਸੰਬੰਧਿਤ functions ਨੂੰ ਸਪਸ਼ਟ comment headers ਨਾਲ ਇਕੱਠਾ ਕਰਨਾ
ਅਲੱਗ-ਅਲੱਗ ਕੰਮ - game logic ਨੂੰ rendering ਤੋਂ ਵੱਖ ਰੱਖਣਾ
consistent naming conventions ਦੀ ਵਰਤੋਂ variables ਅਤੇ functions ਲਈ
modules ਜਾਂ namespaces ਬਣਾਉਣਾ ਖੇਡ ਦੇ ਵੱਖ-ਵੱਖ ਪਾਸਿਆਂ ਨੂੰ organize ਕਰਨ ਲਈ
documentation ਸ਼ਾਮਲ ਕਰਨਾ ਜੋ ਹਰ ਮਹੱਤਵਪੂਰਨ ਹਿੱਸੇ ਦਾ ਉਦੇਸ਼ ਸਮਝਾਉਂਦਾ ਹੈ

Reflection questions:

ਤੁਹਾਡੀ code ਦੇ ਕਿਹੜੇ ਹਿੱਸੇ ਸਭ ਤੋਂ ਮੁਸ਼ਕਲ ਹਨ ਜਦੋਂ ਤੁਸੀਂ ਉਨ੍ਹਾਂ ਨੂੰ ਵਾਪਸ ਵੇਖਦੇ ਹੋ?
ਤੁਸੀਂ ਆਪਣੀ code ਨੂੰ ਕਿਵੇਂ organize ਕਰ ਸਕਦੇ ਹੋ ਤਾਂ ਕਿ ਕੋਈ ਹੋਰ ਬੰਦਾ ਇਸ 'ਤੇ ਕੰਮ ਕਰ ਸਕੇ?
ਕੀ ਹੋਵੇਗਾ ਜੇ ਤੁਸੀਂ power-ups ਜਾਂ ਵੱਖ-ਵੱਖ enemy types ਵਰਗੀਆਂ ਨਵੀਆਂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਸ਼ਾਮਲ ਕਰਨੀ ਹੋਵੇ?

Post-Lecture Quiz

Post-lecture quiz

Review & Self Study

ਅਸੀਂ ਸਾਰਾ ਕੁਝ ਸ਼ੁਰੂ ਤੋਂ ਬਣਾਇਆ ਹੈ, ਜੋ ਸਿਖਣ ਲਈ ਸ਼ਾਨਦਾਰ ਹੈ, ਪਰ ਇੱਥੇ ਇੱਕ ਛੋਟਾ ਰਾਜ਼ ਹੈ – ਕੁਝ ਸ਼ਾਨਦਾਰ JavaScript frameworks ਹਨ ਜੋ ਤੁਹਾਡੇ ਲਈ ਬਹੁਤ ਸਾਰਾ ਕੰਮ ਕਰ ਸਕਦੇ ਹਨ। ਜਦੋਂ ਤੁਸੀਂ ਉਹ ਮੂਲ ਤੱਤ ਸਿੱਖ ਲੈਂਦੇ ਹੋ ਜੋ ਅਸੀਂ ਕਵਰ ਕੀਤੇ ਹਨ, ਤਾਂ ਇਹ ਉਪਲਬਧ ਚੀਜ਼ਾਂ ਦੀ ਖੋਜ ਕਰਨ ਵਾਲਾ ਹੈ।

Frameworks ਨੂੰ ਇੱਕ ਚੰਗੀ ਤਰ੍ਹਾਂ ਸਜਾਏ ਟੂਲਬਾਕਸ ਵਾਂਗ ਸੋਚੋ, ਬਜਾਏ ਹਰ ਟੂਲ ਨੂੰ ਆਪਣੇ ਆਪ ਬਣਾਉਣ ਦੇ। ਇਹ code organization ਦੀਆਂ ਬਹੁਤ ਸਾਰੀਆਂ ਚੁਣੌਤੀਆਂ ਦਾ ਹੱਲ ਕਰ ਸਕਦੇ ਹਨ, ਨਾਲ ਹੀ ਉਹ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਪੇਸ਼ ਕਰਦੇ ਹਨ ਜੋ ਤੁਹਾਨੂੰ ਆਪਣੇ ਆਪ ਬਣਾਉਣ ਵਿੱਚ ਹਫ਼ਤੇ ਲੱਗਣਗੇ।

ਖੋਜ ਕਰਨ ਵਾਲੀਆਂ ਚੀਜ਼ਾਂ:

Game engines code ਨੂੰ ਕਿਵੇਂ organize ਕਰਦੇ ਹਨ – ਤੁਸੀਂ clever patterns ਦੇਖ ਕੇ ਹੈਰਾਨ ਹੋ ਜਾਓਗੇ
Canvas games ਨੂੰ butter-smooth ਚਲਾਉਣ ਲਈ performance tricks
Modern JavaScript features ਜੋ ਤੁਹਾਡੀ code ਨੂੰ ਸਾਫ ਅਤੇ maintainable ਬਣਾ ਸਕਦੇ ਹਨ
Game objects ਅਤੇ ਉਨ੍ਹਾਂ ਦੇ relationships ਨੂੰ manage ਕਰਨ ਦੇ ਵੱਖ-ਵੱਖ ਤਰੀਕੇ

Assignment

Comment your code

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

31 KiB Raw Blame History Unescape Escape