You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
238 lines
17 KiB
238 lines
17 KiB
<!--
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
{
|
|
"original_hash": "8b5774007ae6ee4fc35e1023c593c761",
|
|
"translation_date": "2025-10-20T22:08:01+00:00",
|
|
"source_file": "6-space-game/2-drawing-to-canvas/README.md",
|
|
"language_code": "pa"
|
|
}
|
|
-->
|
|
# ਸਪੇਸ ਗੇਮ ਬਣਾਓ ਭਾਗ 2: ਹੀਰੋ ਅਤੇ ਮੋਨਸਟਰਜ਼ ਨੂੰ ਕੈਨਵਸ 'ਤੇ ਡਰਾਅ ਕਰੋ
|
|
|
|
## ਲੈਕਚਰ ਤੋਂ ਪਹਿਲਾਂ ਕਵਿਜ਼
|
|
|
|
[ਲੈਕਚਰ ਤੋਂ ਪਹਿਲਾਂ ਕਵਿਜ਼](https://ff-quizzes.netlify.app/web/quiz/31)
|
|
|
|
## ਕੈਨਵਸ
|
|
|
|
ਕੈਨਵਸ ਇੱਕ HTML ਐਲੀਮੈਂਟ ਹੈ ਜਿਸ ਵਿੱਚ ਮੂਲ ਰੂਪ ਵਿੱਚ ਕੋਈ ਸਮੱਗਰੀ ਨਹੀਂ ਹੁੰਦੀ; ਇਹ ਇੱਕ ਖਾਲੀ ਸਲੇਟ ਹੈ। ਤੁਹਾਨੂੰ ਇਸ 'ਤੇ ਡਰਾਅ ਕਰਕੇ ਕੁਝ ਜੋੜਨਾ ਪਵੇਗਾ।
|
|
|
|
✅ [ਕੈਨਵਸ API ਬਾਰੇ ਹੋਰ ਪੜ੍ਹੋ](https://developer.mozilla.org/docs/Web/API/Canvas_API) MDN 'ਤੇ।
|
|
|
|
ਇਹ ਆਮ ਤੌਰ 'ਤੇ ਪੇਜ ਦੇ ਬਾਡੀ ਦੇ ਹਿੱਸੇ ਵਜੋਂ ਐਲਾਨ ਕੀਤਾ ਜਾਂਦਾ ਹੈ:
|
|
|
|
```html
|
|
<canvas id="myCanvas" width="200" height="100"></canvas>
|
|
```
|
|
|
|
ਉਪਰਲੇ ਕੋਡ ਵਿੱਚ ਅਸੀਂ `id`, `width` ਅਤੇ `height` ਸੈਟ ਕਰ ਰਹੇ ਹਾਂ।
|
|
|
|
- `id`: ਇਸ ਨੂੰ ਸੈਟ ਕਰੋ ਤਾਂ ਜੋ ਤੁਸੀਂ ਇਸ ਨਾਲ ਇੰਟਰੈਕਟ ਕਰਨ ਲਈ ਰਿਫਰੈਂਸ ਪ੍ਰਾਪਤ ਕਰ ਸਕੋ।
|
|
- `width`: ਇਹ ਐਲੀਮੈਂਟ ਦੀ ਚੌੜਾਈ ਹੈ।
|
|
- `height`: ਇਹ ਐਲੀਮੈਂਟ ਦੀ ਉਚਾਈ ਹੈ।
|
|
|
|
## ਸਧਾਰਨ ਜਾਮਿਤੀ ਡਰਾਅ ਕਰਨਾ
|
|
|
|
ਕੈਨਵਸ ਚੀਜ਼ਾਂ ਡਰਾਅ ਕਰਨ ਲਈ ਕਾਰਟੀਸੀਅਨ ਕੋਆਰਡੀਨੇਟ ਸਿਸਟਮ ਦੀ ਵਰਤੋਂ ਕਰ ਰਿਹਾ ਹੈ। ਇਸ ਲਈ ਇਹ x-ਅਕਸ ਅਤੇ y-ਅਕਸ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ ਇਹ ਦਰਸਾਉਣ ਲਈ ਕਿ ਕੁਝ ਕਿੱਥੇ ਸਥਿਤ ਹੈ। ਸਥਾਨ `0,0` ਸਿਖਰ ਦਾ ਖੱਬਾ ਸਥਾਨ ਹੈ ਅਤੇ ਹੇਠਾਂ ਦਾ ਸੱਜਾ ਸਥਾਨ ਉਹ ਹੈ ਜੋ ਤੁਸੀਂ ਕੈਨਵਸ ਦੀ ਚੌੜਾਈ ਅਤੇ ਉਚਾਈ ਵਜੋਂ ਸੈਟ ਕੀਤਾ ਹੈ।
|
|
|
|
|
|
> ਚਿੱਤਰ [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) ਤੋਂ
|
|
|
|
ਕੈਨਵਸ ਐਲੀਮੈਂਟ 'ਤੇ ਡਰਾਅ ਕਰਨ ਲਈ ਤੁਹਾਨੂੰ ਹੇਠਾਂ ਦਿੱਤੇ ਕਦਮਾਂ ਦੀ ਪਾਲਣਾ ਕਰਨੀ ਪਵੇਗੀ:
|
|
|
|
1. **ਰਿਫਰੈਂਸ ਪ੍ਰਾਪਤ ਕਰੋ** ਕੈਨਵਸ ਐਲੀਮੈਂਟ ਲਈ।
|
|
1. **ਰਿਫਰੈਂਸ ਪ੍ਰਾਪਤ ਕਰੋ** ਕੈਨਵਸ ਐਲੀਮੈਂਟ 'ਤੇ ਬੈਠੇ ਕੌਂਟੈਕਸਟ ਐਲੀਮੈਂਟ ਲਈ।
|
|
1. **ਡਰਾਅ ਕਰਨ ਦੀ ਕਾਰਵਾਈ ਕਰੋ** ਕੌਂਟੈਕਸਟ ਐਲੀਮੈਂਟ ਦੀ ਵਰਤੋਂ ਕਰਕੇ।
|
|
|
|
ਉਪਰਲੇ ਕਦਮਾਂ ਲਈ ਕੋਡ ਆਮ ਤੌਰ 'ਤੇ ਇਸ ਤਰ੍ਹਾਂ ਦਿਖਦਾ ਹੈ:
|
|
|
|
```javascript
|
|
// draws a red rectangle
|
|
//1. get the canvas reference
|
|
canvas = document.getElementById("myCanvas");
|
|
|
|
//2. set the context to 2D to draw basic shapes
|
|
ctx = canvas.getContext("2d");
|
|
|
|
//3. fill it with the color red
|
|
ctx.fillStyle = 'red';
|
|
|
|
//4. and draw a rectangle with these parameters, setting location and size
|
|
ctx.fillRect(0,0, 200, 200) // x,y,width, height
|
|
```
|
|
|
|
✅ ਕੈਨਵਸ API ਮੁੱਖ ਤੌਰ 'ਤੇ 2D ਸ਼ੇਪ 'ਤੇ ਧਿਆਨ ਕੇਂਦਰਿਤ ਕਰਦਾ ਹੈ, ਪਰ ਤੁਸੀਂ 3D ਐਲੀਮੈਂਟ ਵੀ ਵੈਬਸਾਈਟ 'ਤੇ ਡਰਾਅ ਕਰ ਸਕਦੇ ਹੋ; ਇਸ ਲਈ ਤੁਸੀਂ [WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API) ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ।
|
|
|
|
ਤੁਸੀਂ ਕੈਨਵਸ API ਨਾਲ ਕਈ ਤਰ੍ਹਾਂ ਦੀਆਂ ਚੀਜ਼ਾਂ ਡਰਾਅ ਕਰ ਸਕਦੇ ਹੋ ਜਿਵੇਂ:
|
|
|
|
- **ਜਾਮਿਤੀ ਸ਼ੇਪ**, ਅਸੀਂ ਪਹਿਲਾਂ ਹੀ ਦਿਖਾਇਆ ਹੈ ਕਿ ਕਿਵੇਂ ਇੱਕ ਆਯਤ ਡਰਾਅ ਕਰਨਾ ਹੈ, ਪਰ ਤੁਸੀਂ ਹੋਰ ਵੀ ਬਹੁਤ ਕੁਝ ਡਰਾਅ ਕਰ ਸਕਦੇ ਹੋ।
|
|
- **ਟੈਕਸਟ**, ਤੁਸੀਂ ਕਿਸੇ ਵੀ ਫੋਂਟ ਅਤੇ ਰੰਗ ਨਾਲ ਟੈਕਸਟ ਡਰਾਅ ਕਰ ਸਕਦੇ ਹੋ।
|
|
- **ਚਿੱਤਰ**, ਤੁਸੀਂ ਇੱਕ ਚਿੱਤਰ ਡਰਾਅ ਕਰ ਸਕਦੇ ਹੋ ਜੋ ਕਿ .jpg ਜਾਂ .png ਵਰਗੇ ਚਿੱਤਰ ਐਸੈਟ 'ਤੇ ਅਧਾਰਿਤ ਹੋਵੇ।
|
|
|
|
✅ ਅਜਮਾਓ! ਤੁਸੀਂ ਜਾਣਦੇ ਹੋ ਕਿ ਕਿਵੇਂ ਇੱਕ ਆਯਤ ਡਰਾਅ ਕਰਨਾ ਹੈ, ਕੀ ਤੁਸੀਂ ਪੇਜ 'ਤੇ ਇੱਕ ਗੋਲ ਡਰਾਅ ਕਰ ਸਕਦੇ ਹੋ? CodePen 'ਤੇ ਕੁਝ ਦਿਲਚਸਪ ਕੈਨਵਸ ਡਰਾਇੰਗਾਂ ਦੇਖੋ। ਇਹ ਰਿਹਾ ਇੱਕ [ਖਾਸ ਤੌਰ 'ਤੇ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਉਦਾਹਰਨ](https://codepen.io/dissimulate/pen/KrAwx)।
|
|
|
|
## ਚਿੱਤਰ ਐਸੈਟ ਲੋਡ ਅਤੇ ਡਰਾਅ ਕਰੋ
|
|
|
|
ਤੁਸੀਂ ਇੱਕ ਚਿੱਤਰ ਐਸੈਟ ਨੂੰ `Image` ਆਬਜੈਕਟ ਬਣਾਕੇ ਅਤੇ ਇਸ ਦੀ `src` ਪ੍ਰਾਪਰਟੀ ਸੈਟ ਕਰਕੇ ਲੋਡ ਕਰਦੇ ਹੋ। ਫਿਰ ਤੁਸੀਂ `load` ਇਵੈਂਟ ਨੂੰ ਸੁਣਦੇ ਹੋ ਤਾਂ ਜੋ ਪਤਾ ਲੱਗੇ ਕਿ ਇਹ ਵਰਤਣ ਲਈ ਤਿਆਰ ਹੈ। ਕੋਡ ਇਸ ਤਰ੍ਹਾਂ ਦਿਖਦਾ ਹੈ:
|
|
|
|
### ਐਸੈਟ ਲੋਡ ਕਰੋ
|
|
|
|
```javascript
|
|
const img = new Image();
|
|
img.src = 'path/to/my/image.png';
|
|
img.onload = () => {
|
|
// image loaded and ready to be used
|
|
}
|
|
```
|
|
|
|
### ਐਸੈਟ ਲੋਡ ਪੈਟਰਨ
|
|
|
|
ਉਪਰਲੇ ਨੂੰ ਇਸ ਤਰ੍ਹਾਂ ਦੇ ਬਣਤਰ ਵਿੱਚ ਲਪੇਟਣ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ, ਤਾਂ ਜੋ ਇਹ ਵਰਤਣ ਲਈ ਆਸਾਨ ਹੋਵੇ ਅਤੇ ਤੁਸੀਂ ਇਸ ਨੂੰ ਸਿਰਫ਼ ਉਸ ਸਮੇਂ ਮੈਨਿਪੁਲੇਟ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ ਜਦੋਂ ਇਹ ਪੂਰੀ ਤਰ੍ਹਾਂ ਲੋਡ ਹੋ ਜਾਵੇ:
|
|
|
|
```javascript
|
|
function loadAsset(path) {
|
|
return new Promise((resolve) => {
|
|
const img = new Image();
|
|
img.src = path;
|
|
img.onload = () => {
|
|
// image loaded and ready to be used
|
|
resolve(img);
|
|
}
|
|
})
|
|
}
|
|
|
|
// use like so
|
|
|
|
async function run() {
|
|
const heroImg = await loadAsset('hero.png')
|
|
const monsterImg = await loadAsset('monster.png')
|
|
}
|
|
|
|
```
|
|
|
|
ਗੇਮ ਐਸੈਟ ਨੂੰ ਸਕ੍ਰੀਨ 'ਤੇ ਡਰਾਅ ਕਰਨ ਲਈ, ਤੁਹਾਡਾ ਕੋਡ ਇਸ ਤਰ੍ਹਾਂ ਦਿਖੇਗਾ:
|
|
|
|
```javascript
|
|
async function run() {
|
|
const heroImg = await loadAsset('hero.png')
|
|
const monsterImg = await loadAsset('monster.png')
|
|
|
|
canvas = document.getElementById("myCanvas");
|
|
ctx = canvas.getContext("2d");
|
|
ctx.drawImage(heroImg, canvas.width/2,canvas.height/2);
|
|
ctx.drawImage(monsterImg, 0,0);
|
|
}
|
|
```
|
|
|
|
## ਹੁਣ ਤੁਹਾਡੀ ਗੇਮ ਬਣਾਉਣ ਦਾ ਸਮਾਂ ਹੈ
|
|
|
|
### ਕੀ ਬਣਾਉਣਾ ਹੈ
|
|
|
|
ਤੁਸੀਂ ਇੱਕ ਵੈਬ ਪੇਜ ਬਣਾਉਗੇ ਜਿਸ ਵਿੱਚ ਕੈਨਵਸ ਐਲੀਮੈਂਟ ਹੋਵੇਗਾ। ਇਹ ਇੱਕ ਕਾਲੇ ਸਕ੍ਰੀਨ `1024*768` ਨੂੰ ਰੈਂਡਰ ਕਰੇਗਾ। ਅਸੀਂ ਤੁਹਾਨੂੰ ਦੋ ਚਿੱਤਰ ਦਿੱਤੇ ਹਨ:
|
|
|
|
- ਹੀਰੋ ਜਹਾਜ਼
|
|
|
|
|
|
|
|
- 5*5 ਮੋਨਸਟਰ
|
|
|
|
|
|
|
|
### ਵਿਕਾਸ ਸ਼ੁਰੂ ਕਰਨ ਲਈ ਸਿਫਾਰਸ਼ ਕੀਤੇ ਕਦਮ
|
|
|
|
ਉਹ ਫਾਈਲਾਂ ਲੱਭੋ ਜੋ ਤੁਹਾਡੇ ਲਈ `your-work` ਸਬ ਫੋਲਡਰ ਵਿੱਚ ਬਣਾਈ ਗਈਆਂ ਹਨ। ਇਸ ਵਿੱਚ ਹੇਠਾਂ ਦਿੱਤੇ ਹੋਣ ਚਾਹੀਦੇ ਹਨ:
|
|
|
|
```bash
|
|
-| assets
|
|
-| enemyShip.png
|
|
-| player.png
|
|
-| index.html
|
|
-| app.js
|
|
-| package.json
|
|
```
|
|
|
|
Visual Studio Code ਵਿੱਚ ਇਸ ਫੋਲਡਰ ਦੀ ਕਾਪੀ ਖੋਲ੍ਹੋ। ਤੁਹਾਨੂੰ ਇੱਕ ਸਥਾਨਕ ਵਿਕਾਸ ਵਾਤਾਵਰਣ ਸੈਟਅੱਪ ਕਰਨ ਦੀ ਲੋੜ ਹੈ, ਵਧੀਆ Visual Studio Code ਦੇ ਨਾਲ NPM ਅਤੇ Node ਇੰਸਟਾਲ ਕੀਤਾ ਹੋਵੇ। ਜੇ ਤੁਹਾਡੇ ਕੰਪਿਊਟਰ 'ਤੇ `npm` ਸੈਟਅੱਪ ਨਹੀਂ ਹੈ, [ਇਸ ਨੂੰ ਕਿਵੇਂ ਸੈਟਅੱਪ ਕਰਨਾ ਹੈ](https://www.npmjs.com/get-npm)।
|
|
|
|
ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਨੂੰ `your_work` ਫੋਲਡਰ 'ਤੇ ਜਾ ਕੇ ਸ਼ੁਰੂ ਕਰੋ:
|
|
|
|
```bash
|
|
cd your-work
|
|
npm start
|
|
```
|
|
|
|
ਉਪਰਲੇ ਕੋਡ HTTP ਸਰਵਰ ਨੂੰ ਪਤਾ `http://localhost:5000` 'ਤੇ ਸ਼ੁਰੂ ਕਰੇਗਾ। ਇੱਕ ਬ੍ਰਾਊਜ਼ਰ ਖੋਲ੍ਹੋ ਅਤੇ ਉਸ ਪਤੇ ਨੂੰ ਇਨਪੁਟ ਕਰੋ। ਇਹ ਹੁਣੇ ਲਈ ਇੱਕ ਖਾਲੀ ਪੇਜ ਹੈ, ਪਰ ਇਹ ਬਦਲ ਜਾਵੇਗਾ।
|
|
|
|
> ਨੋਟ: ਆਪਣੀ ਸਕ੍ਰੀਨ 'ਤੇ ਬਦਲਾਵਾਂ ਦੇਖਣ ਲਈ, ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ ਰਿਫ੍ਰੈਸ਼ ਕਰੋ।
|
|
|
|
### ਕੋਡ ਸ਼ਾਮਲ ਕਰੋ
|
|
|
|
`your-work/app.js` ਵਿੱਚ ਲੋੜੀਂਦਾ ਕੋਡ ਸ਼ਾਮਲ ਕਰੋ ਹੇਠਾਂ ਦਿੱਤੇ ਹੱਲ ਲਈ
|
|
|
|
1. **ਡਰਾਅ ਕਰੋ** ਕਾਲੇ ਬੈਕਗ੍ਰਾਊਂਡ ਵਾਲਾ ਕੈਨਵਸ
|
|
> ਟਿਪ: `/app.js` ਵਿੱਚ ਸਹੀ TODO ਦੇ ਹੇਠਾਂ ਦੋ ਲਾਈਨਾਂ ਸ਼ਾਮਲ ਕਰੋ, `ctx` ਐਲੀਮੈਂਟ ਨੂੰ ਕਾਲਾ ਸੈਟ ਕਰੋ ਅਤੇ ਸਿਖਰ/ਖੱਬੇ ਕੋਆਰਡੀਨੇਟ ਨੂੰ 0,0 'ਤੇ ਸੈਟ ਕਰੋ ਅਤੇ ਕੈਨਵਸ ਦੀ ਉਚਾਈ ਅਤੇ ਚੌੜਾਈ ਦੇ ਬਰਾਬਰ ਸੈਟ ਕਰੋ।
|
|
2. **ਟੈਕਸਟਚਰ ਲੋਡ ਕਰੋ**
|
|
> ਟਿਪ: ਖਿਡਾਰੀ ਅਤੇ ਦੁਸ਼ਮਨ ਚਿੱਤਰਾਂ ਨੂੰ `await loadTexture` ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਤੇ ਚਿੱਤਰ ਪਾਥ ਪਾਸ ਕਰਕੇ ਸ਼ਾਮਲ ਕਰੋ। ਤੁਸੀਂ ਇਹਨਾਂ ਨੂੰ ਸਕ੍ਰੀਨ 'ਤੇ ਅਜੇ ਨਹੀਂ ਦੇਖੋਗੇ!
|
|
3. **ਹੀਰੋ ਨੂੰ ਡਰਾਅ ਕਰੋ** ਸਕ੍ਰੀਨ ਦੇ ਕੇਂਦਰ ਵਿੱਚ ਹੇਠਲੇ ਹਿੱਸੇ ਵਿੱਚ
|
|
> ਟਿਪ: `drawImage` API ਦੀ ਵਰਤੋਂ ਕਰਕੇ heroImg ਨੂੰ ਸਕ੍ਰੀਨ 'ਤੇ ਡਰਾਅ ਕਰੋ, `canvas.width / 2 - 45` ਅਤੇ `canvas.height - canvas.height / 4)` ਸੈਟ ਕਰਕੇ।
|
|
4. **5*5 ਮੋਨਸਟਰਜ਼ ਡਰਾਅ ਕਰੋ**
|
|
> ਟਿਪ: ਹੁਣ ਤੁਸੀਂ ਸਕ੍ਰੀਨ 'ਤੇ ਦੁਸ਼ਮਨਾਂ ਨੂੰ ਡਰਾਅ ਕਰਨ ਲਈ ਕੋਡ ਨੂੰ ਅਨਕਮੈਂਟ ਕਰ ਸਕਦੇ ਹੋ। ਅਗਲੇ, `createEnemies` ਫੰਕਸ਼ਨ 'ਤੇ ਜਾਓ ਅਤੇ ਇਸ ਨੂੰ ਬਣਾਓ।
|
|
|
|
ਪਹਿਲਾਂ, ਕੁਝ ਕਾਂਸਟੈਂਟਸ ਸੈਟ ਕਰੋ:
|
|
|
|
```javascript
|
|
const MONSTER_TOTAL = 5;
|
|
const MONSTER_WIDTH = MONSTER_TOTAL * 98;
|
|
const START_X = (canvas.width - MONSTER_WIDTH) / 2;
|
|
const STOP_X = START_X + MONSTER_WIDTH;
|
|
```
|
|
|
|
ਫਿਰ, ਮੋਨਸਟਰਜ਼ ਦੀ ਐਰੇ ਨੂੰ ਸਕ੍ਰੀਨ 'ਤੇ ਡਰਾਅ ਕਰਨ ਲਈ ਇੱਕ ਲੂਪ ਬਣਾਓ:
|
|
|
|
```javascript
|
|
for (let x = START_X; x < STOP_X; x += 98) {
|
|
for (let y = 0; y < 50 * 5; y += 50) {
|
|
ctx.drawImage(enemyImg, x, y);
|
|
}
|
|
}
|
|
```
|
|
|
|
## ਨਤੀਜਾ
|
|
|
|
ਤਿਆਰ ਨਤੀਜਾ ਇਸ ਤਰ੍ਹਾਂ ਦਿਖਣਾ ਚਾਹੀਦਾ ਹੈ:
|
|
|
|
|
|
|
|
## ਹੱਲ
|
|
|
|
ਕਿਰਪਾ ਕਰਕੇ ਪਹਿਲਾਂ ਇਸ ਨੂੰ ਖੁਦ ਹੱਲ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ ਪਰ ਜੇ ਤੁਸੀਂ ਫਸ ਜਾਓ, ਤਾਂ [ਇਸ ਹੱਲ](../../../../6-space-game/2-drawing-to-canvas/solution/app.js) ਨੂੰ ਦੇਖੋ।
|
|
|
|
---
|
|
|
|
## GitHub Copilot Agent ਚੈਲੈਂਜ 🚀
|
|
|
|
Agent ਮੋਡ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਹੇਠਾਂ ਦਿੱਤੇ ਚੈਲੈਂਜ ਨੂੰ ਪੂਰਾ ਕਰੋ:
|
|
|
|
**ਵੇਰਵਾ:** ਕੈਨਵਸ API ਤਕਨੀਕਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਆਪਣੇ ਸਪੇਸ ਗੇਮ ਕੈਨਵਸ ਨੂੰ ਵਿਜ਼ੂਅਲ ਪ੍ਰਭਾਵ ਅਤੇ ਇੰਟਰੈਕਟਿਵ ਤੱਤਾਂ ਨਾਲ ਵਧਾਓ।
|
|
|
|
**ਪ੍ਰੋੰਪਟ:** ਇੱਕ ਨਵੀਂ ਫਾਈਲ `enhanced-canvas.html` ਬਣਾਓ ਜਿਸ ਵਿੱਚ ਇੱਕ ਕੈਨਵਸ ਹੋਵੇ ਜੋ ਪਿਛੋਕੜ ਵਿੱਚ ਐਨੀਮੇਟਡ ਸਟਾਰਜ਼ ਦਿਖਾਏ, ਹੀਰੋ ਜਹਾਜ਼ ਲਈ ਇੱਕ ਪਲਸਿੰਗ ਹੈਲਥ ਬਾਰ ਹੋਵੇ, ਅਤੇ ਦੁਸ਼ਮਨ ਜਹਾਜ਼ ਹੌਲੀ ਹੌਲੀ ਹੇਠਾਂ ਵੱਲ ਚੱਲਣ। ਜਾਵਾਸਕ੍ਰਿਪਟ ਕੋਡ ਸ਼ਾਮਲ ਕਰੋ ਜੋ ਰੈਂਡਮ ਸਥਾਨਾਂ ਅਤੇ ਅਪਾਰਦਰਸ਼ਤਾ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਚਮਕਦੇ ਸਟਾਰਜ਼ ਡਰਾਅ ਕਰਦਾ ਹੈ, ਹੈਲਥ ਲੈਵਲ ਦੇ ਅਧਾਰ 'ਤੇ ਰੰਗ ਬਦਲਣ ਵਾਲੀ ਹੈਲਥ ਬਾਰ (ਹਰਾ > ਪੀਲਾ > ਲਾਲ) ਲਾਗੂ ਕਰਦਾ ਹੈ, ਅਤੇ ਦੁਸ਼ਮਨ ਜਹਾਜ਼ਾਂ ਨੂੰ ਵੱਖ-ਵੱਖ ਗਤੀ 'ਤੇ ਸਕ੍ਰੀਨ ਦੇ ਹੇਠਾਂ ਵੱਲ ਐਨੀਮੇਟ ਕਰਦਾ ਹੈ।
|
|
|
|
## 🚀 ਚੈਲੈਂਜ
|
|
|
|
ਤੁਸੀਂ 2D-ਕੇਂਦਰਿਤ ਕੈਨਵਸ API ਨਾਲ ਡਰਾਅ ਕਰਨ ਬਾਰੇ ਸਿੱਖਿਆ ਪ੍ਰਾਪਤ ਕੀਤੀ ਹੈ; [WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API) 'ਤੇ ਇੱਕ ਨਜ਼ਰ ਮਾਰੋ, ਅਤੇ 3D ਆਬਜੈਕਟ ਡਰਾਅ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ।
|
|
|
|
## ਲੈਕਚਰ ਤੋਂ ਬਾਅਦ ਕਵਿਜ਼
|
|
|
|
[ਲੈਕਚਰ ਤੋਂ ਬਾਅਦ ਕਵਿਜ਼](https://ff-quizzes.netlify.app/web/quiz/32)
|
|
|
|
## ਸਮੀਖਾ ਅਤੇ ਸਵੈ ਅਧਿਐਨ
|
|
|
|
ਕੈਨਵਸ API ਬਾਰੇ ਹੋਰ ਜਾਣਕਾਰੀ ਪ੍ਰਾਪਤ ਕਰੋ [ਇਸ ਬਾਰੇ ਪੜ੍ਹ ਕੇ](https://developer.mozilla.org/docs/Web/API/Canvas_API)।
|
|
|
|
## ਅਸਾਈਨਮੈਂਟ
|
|
|
|
[ਕੈਨਵਸ API ਨਾਲ ਖੇਡੋ](assignment.md)
|
|
|
|
---
|
|
|
|
**ਅਸਵੀਕਰਤਾ**:
|
|
ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ [Co-op Translator](https://github.com/Azure/co-op-translator) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀ ਹੋਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁੱਤੀਆਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਇਸਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ। |