22 KiB

Raw Blame History Unescape Escape

ਸਪੇਸ ਗੇਮ ਬਣਾਓ ਭਾਗ 2: ਹੀਰੋ ਅਤੇ ਮੋਨਸਟਰਜ਼ ਨੂੰ ਕੈਨਵਸ 'ਤੇ ਡਰਾਅ ਕਰੋ

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

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

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

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

ਕੈਨਵਸ

ਤਾਂ ਇਹ <canvas> ਐਲੀਮੈਂਟ ਅਸਲ ਵਿੱਚ ਹੈ ਕੀ? ਇਹ HTML5 ਦਾ ਹੱਲ ਹੈ ਜੋ ਵੈੱਬ ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿੱਚ ਗਤੀਸ਼ੀਲ ਗ੍ਰਾਫਿਕਸ ਅਤੇ ਐਨੀਮੇਸ਼ਨ ਬਣਾਉਣ ਲਈ ਹੈ। ਸਧਾਰਨ ਚਿੱਤਰਾਂ ਜਾਂ ਵੀਡੀਓਜ਼ ਦੇ ਵਿਰੁੱਧ, ਜੋ ਸਥਿਰ ਹੁੰਦੇ ਹਨ, ਕੈਨਵਸ ਤੁਹਾਨੂੰ ਸਕ੍ਰੀਨ 'ਤੇ ਦਿਖਾਈ ਦੇਣ ਵਾਲੀ ਹਰ ਚੀਜ਼ 'ਤੇ ਪਿਕਸਲ-ਸਤਰ ਦਾ ਕੰਟਰੋਲ ਦਿੰਦਾ ਹੈ। ਇਹ ਗੇਮਾਂ, ਡਾਟਾ ਵਿਜ਼ੁਅਲਾਈਜ਼ੇਸ਼ਨ, ਅਤੇ ਇੰਟਰਐਕਟਿਵ ਕਲਾ ਲਈ ਬਹੁਤ ਹੀ ਉਤਮ ਹੈ। ਇਸ ਨੂੰ ਇੱਕ ਪ੍ਰੋਗਰਾਮਿੰਗ ਡਰਾਇੰਗ ਸਤਹ ਵਜੋਂ ਸੋਚੋ ਜਿੱਥੇ ਜਾਵਾਸਕ੍ਰਿਪਟ ਤੁਹਾਡਾ ਪੇਂਟਬ੍ਰਸ਼ ਬਣ ਜਾਂਦਾ ਹੈ।

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

✅ ਕੈਨਵਸ API ਬਾਰੇ ਹੋਰ ਪੜ੍ਹੋ MDN 'ਤੇ।

ਇਹ ਆਮ ਤੌਰ 'ਤੇ ਪੇਜ ਦੇ ਬਾਡੀ ਦੇ ਹਿੱਸੇ ਵਜੋਂ ਐਲਾਨ ਕੀਤਾ ਜਾਂਦਾ ਹੈ:

<canvas id="myCanvas" width="200" height="100"></canvas>

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

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

ਸਧਾਰਨ ਜਿਓਮੈਟਰੀ ਡਰਾਇੰਗ

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

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

ਚਿੱਤਰ MDN ਤੋਂ

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

ਕੈਨਵਸ ਐਲੀਮੈਂਟ ਲਈ ਰਿਫਰੈਂਸ ਪ੍ਰਾਪਤ ਕਰੋ DOM ਤੋਂ (ਬਿਲਕੁਲ ਹੋਰ HTML ਐਲੀਮੈਂਟ ਵਾਂਗ)
2D ਰੈਂਡਰਿੰਗ ਸੰਦਰਭ ਪ੍ਰਾਪਤ ਕਰੋ – ਇਹ ਸਾਰੇ ਡਰਾਇੰਗ ਵਿਧੀਆਂ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ
ਡਰਾਇੰਗ ਸ਼ੁਰੂ ਕਰੋ! ਸੰਦਰਭ ਦੀਆਂ ਬਿਲਟ-ਇਨ ਵਿਧੀਆਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਆਪਣੇ ਗ੍ਰਾਫਿਕਸ ਬਣਾਓ

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

// Step 1: Get the canvas element
const canvas = document.getElementById("myCanvas");

// Step 2: Get the 2D rendering context
const ctx = canvas.getContext("2d");

// Step 3: Set fill color and draw a rectangle
ctx.fillStyle = 'red';
ctx.fillRect(0, 0, 200, 200); // x, y, width, height

ਆਓ ਇਸ ਨੂੰ ਕਦਮ-ਦਰ-ਕਦਮ ਤੋੜੀਏ:

ਅਸੀਂ ਆਪਣੇ ਕੈਨਵਸ ਐਲੀਮੈਂਟ ਨੂੰ ਇਸਦੇ ID ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਪਕੜਦੇ ਹਾਂ ਅਤੇ ਇਸਨੂੰ ਇੱਕ ਵੈਰੀਏਬਲ ਵਿੱਚ ਸਟੋਰ ਕਰਦੇ ਹਾਂ
ਅਸੀਂ 2D ਰੈਂਡਰਿੰਗ ਸੰਦਰਭ ਪ੍ਰਾਪਤ ਕਰਦੇ ਹਾਂ – ਇਹ ਸਾਡੇ ਡਰਾਇੰਗ ਵਿਧੀਆਂ ਨਾਲ ਭਰਿਆ ਟੂਲਕਿਟ ਹੈ
ਅਸੀਂ ਕੈਨਵਸ ਨੂੰ ਦੱਸਦੇ ਹਾਂ ਕਿ ਅਸੀਂ ਚੀਜ਼ਾਂ ਨੂੰ ਲਾਲ ਰੰਗ ਨਾਲ ਭਰਨਾ ਚਾਹੁੰਦੇ ਹਾਂ fillStyle ਪ੍ਰਾਪਰਟੀ ਦੀ ਵਰਤੋਂ ਕਰਕੇ
ਅਸੀਂ ਡਰਾਇੰਗ ਕਰਦੇ ਹਾਂ ਇੱਕ ਆਯਤਕਾਰ ਜੋ ਟੌਪ-ਲੈਫਟ ਕੋਨੇ (0,0) 'ਤੇ ਸ਼ੁਰੂ ਹੁੰਦਾ ਹੈ ਜੋ 200 ਪਿਕਸਲ ਚੌੜਾ ਅਤੇ ਲੰਬਾ ਹੈ

✅ ਕੈਨਵਸ API ਮੁੱਖ ਤੌਰ 'ਤੇ 2D ਆਕਾਰਾਂ 'ਤੇ ਧਿਆਨ ਕੇਂਦਰਿਤ ਕਰਦਾ ਹੈ, ਪਰ ਤੁਸੀਂ ਇੱਕ ਵੈੱਬਸਾਈਟ 'ਤੇ 3D ਐਲੀਮੈਂਟ ਵੀ ਡਰਾਇੰਗ ਕਰ ਸਕਦੇ ਹੋ; ਇਸ ਲਈ, ਤੁਸੀਂ WebGL API ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ।

ਤੁਸੀਂ ਕੈਨਵਸ API ਨਾਲ ਬਹੁਤ ਕੁਝ ਡਰਾਇੰਗ ਕਰ ਸਕਦੇ ਹੋ ਜਿਵੇਂ:

ਜਿਓਮੈਟ੍ਰਿਕਲ ਆਕਾਰ, ਅਸੀਂ ਪਹਿਲਾਂ ਹੀ ਦਿਖਾਇਆ ਕਿ ਕਿਵੇਂ ਇੱਕ ਆਯਤਕਾਰ ਡਰਾਇੰਗ ਕਰਨਾ ਹੈ, ਪਰ ਹੋਰ ਬਹੁਤ ਕੁਝ ਹੈ ਜੋ ਤੁਸੀਂ ਡਰਾਇੰਗ ਕਰ ਸਕਦੇ ਹੋ।
ਟੈਕਸਟ, ਤੁਸੀਂ ਕਿਸੇ ਵੀ ਫੋਂਟ ਅਤੇ ਰੰਗ ਨਾਲ ਟੈਕਸਟ ਡਰਾਇੰਗ ਕਰ ਸਕਦੇ ਹੋ।
ਚਿੱਤਰ, ਤੁਸੀਂ ਇੱਕ ਚਿੱਤਰ ਨੂੰ ਡਰਾਇੰਗ ਕਰ ਸਕਦੇ ਹੋ ਜੋ ਇੱਕ ਚਿੱਤਰ ਐਸੈਟ ਜਿਵੇਂ .jpg ਜਾਂ .png ਤੋਂ ਆਧਾਰਿਤ ਹੋ।

✅ ਇਸਨੂੰ ਅਜ਼ਮਾਓ! ਤੁਸੀਂ ਜਾਣਦੇ ਹੋ ਕਿ ਇੱਕ ਆਯਤਕਾਰ ਕਿਵੇਂ ਡਰਾਇੰਗ ਕਰਨਾ ਹੈ, ਕੀ ਤੁਸੀਂ ਪੇਜ 'ਤੇ ਇੱਕ ਗੋਲ ਡਰਾਇング ਕਰ ਸਕਦੇ ਹੋ? CodePen 'ਤੇ ਕੁਝ ਦਿਲਚਸਪ ਕੈਨਵਸ ਡਰਾਇੰਗਾਂ ਦੇਖੋ। ਇੱਥੇ ਇੱਕ ਖਾਸ ਤੌਰ 'ਤੇ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਉਦਾਹਰਨ ਹੈ।

ਚਿੱਤਰ ਐਸੈਟ ਲੋਡ ਅਤੇ ਡਰਾਇੰਗ ਕਰੋ

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

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

ਸਧਾਰਨ ਚਿੱਤਰ ਲੋਡ ਕਰਨਾ

const img = new Image();
img.src = 'path/to/my/image.png';
img.onload = () => {
  // Image loaded and ready to be used
  console.log('Image loaded successfully!');
};

ਇਸ ਕੋਡ ਵਿੱਚ ਕੀ ਹੋ ਰਿਹਾ ਹੈ:

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

ਚਿੱਤਰ ਲੋਡ ਕਰਨ ਦਾ ਇੱਕ ਵਧੀਆ ਤਰੀਕਾ

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

function loadAsset(path) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.src = path;
    img.onload = () => {
      resolve(img);
    };
    img.onerror = () => {
      reject(new Error(`Failed to load image: ${path}`));
    };
  });
}

// Modern usage with async/await
async function initializeGame() {
  try {
    const heroImg = await loadAsset('hero.png');
    const monsterImg = await loadAsset('monster.png');
    // Images are now ready to use
  } catch (error) {
    console.error('Failed to load game assets:', error);
  }
}

ਇੱਥੇ ਅਸੀਂ ਕੀ ਕੀਤਾ ਹੈ:

ਸਾਰੇ ਚਿੱਤਰ ਲੋਡ ਕਰਨ ਦੀ ਲਾਜ਼ਮੀ ਲਾਜ਼ਮੀ ਨੂੰ ਇੱਕ Promise ਵਿੱਚ ਰੈਪ ਕੀਤਾ ਤਾਂ ਜੋ ਅਸੀਂ ਇਸਨੂੰ ਹੋਰ ਚੰਗੀ ਤਰ੍ਹਾਂ ਸੰਭਾਲ ਸਕੀਏ
ਗਲਤੀ ਸੰਭਾਲਣ ਸ਼ਾਮਲ ਕੀਤਾ ਜੋ ਸਾਨੂੰ ਅਸਲ ਵਿੱਚ ਦੱਸਦਾ ਹੈ ਕਿ ਕੁਝ ਗਲਤ ਹੋਣ 'ਤੇ ਕੀ ਹੋਇਆ
ਆਧੁਨਿਕ async/await ਸਿੰਟੈਕਸ ਦੀ ਵਰਤੋਂ ਕੀਤੀ ਕਿਉਂਕਿ ਇਹ ਪੜ੍ਹਨ ਵਿੱਚ ਬਹੁਤ ਹੀ ਸਾਫ਼ ਹੈ
try/catch ਬਲਾਕ ਸ਼ਾਮਲ ਕੀਤੇ ਤਾਂ ਜੋ ਲੋਡ ਕਰਨ ਜਾਂ ਰੈਂਡਰ ਕਰਨ ਦੌਰਾਨ ਹੋਣ ਵਾਲੀਆਂ ਕਿਸੇ ਵੀ ਗਲਤੀਆਂ ਨੂੰ ਸੁਚਾਰੂ ਤਰੀਕੇ ਨਾਲ ਸੰਭਾਲਿਆ ਜਾ ਸਕੇ

ਜਦੋਂ ਤੁਹਾਡੇ ਚਿੱਤਰ ਲੋਡ ਹੋ ਜਾਂਦੇ ਹਨ, ਕੈਨਵਸ 'ਤੇ ਡਰਾਇੰਗ ਕਰਨਾ ਅਸਲ ਵਿੱਚ ਕਾਫ਼ੀ ਸਿੱਧਾ ਹੁੰਦਾ ਹੈ:

async function renderGameScreen() {
  try {
    // Load game assets
    const heroImg = await loadAsset('hero.png');
    const monsterImg = await loadAsset('monster.png');

    // Get canvas and context
    const canvas = document.getElementById("myCanvas");
    const ctx = canvas.getContext("2d");

    // Draw images to specific positions
    ctx.drawImage(heroImg, canvas.width / 2, canvas.height / 2);
    ctx.drawImage(monsterImg, 0, 0);
  } catch (error) {
    console.error('Failed to render game screen:', error);
  }
}

ਆਓ ਇਸ ਨੂੰ ਕਦਮ-ਦਰ-ਕਦਮ ਤੋੜੀਏ:

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

ਹੁਣ ਤੁਹਾਡਾ ਗੇਮ ਬਣਾਉਣ ਦਾ ਸਮਾਂ ਹੈ

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

ਕੀ ਬਣਾਉਣਾ ਹੈ

ਤੁਸੀਂ ਇੱਕ ਵੈੱਬ ਪੇਜ ਬਣਾਉਗੇ ਜਿਸ ਵਿੱਚ ਇੱਕ ਕੈਨਵਸ ਐਲੀਮੈਂਟ ਹੋਵੇਗਾ। ਇਹ ਇੱਕ ਕਾਲਾ ਸਕ੍ਰੀਨ 1024*768 ਰੈਂਡਰ ਕਰੇਗਾ। ਅਸੀਂ ਤੁਹਾਨੂੰ ਦੋ ਚਿੱਤਰ ਪ੍ਰਦਾਨ ਕੀਤੇ ਹਨ:

ਹੀਰੋ ਜਹਾਜ਼
5*5 ਮੋਨਸਟਰ

ਵਿਕਾਸ ਸ਼ੁਰੂ ਕਰਨ ਲਈ ਸਿਫਾਰਸ਼ੀ ਕਦਮ

ਸ਼ੁਰੂਆਤੀ ਫਾਈਲਾਂ ਨੂੰ ਲੱਭੋ ਜੋ ਤੁਹਾਡੇ ਲਈ your-work ਸਬ ਫੋਲਡ

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

22 KiB Raw Blame History Unescape Escape