18 KiB

Raw Blame History

स्पेस गेम बनाउनुहोस् भाग २: हिरो र राक्षसलाई क्यानभासमा चित्रण गर्नुहोस्

प्रि-लेक्चर क्विज

क्यानभास

क्यानभास एउटा HTML तत्व हो जसमा डिफल्ट रूपमा कुनै सामग्री हुँदैन; यो खाली पृष्ठ हो। यसमा चित्रण गरेर सामग्री थप्न आवश्यक छ।

✅ क्यानभास एपीआई को बारेमा MDN मा थप पढ्नुहोस्।

यो सामान्यतया पृष्ठको शरीरको भागको रूपमा यसरी घोषणा गरिन्छ:

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

माथि हामीले id, width र height सेट गरेका छौं।

id: यसलाई सेट गर्नुहोस् ताकि तपाईं यससँग अन्तरक्रिया गर्न आवश्यक पर्दा सन्दर्भ प्राप्त गर्न सक्नुहुन्छ।
width: यो तत्वको चौडाइ हो।
height: यो तत्वको उचाइ हो।

साधारण ज्यामितीय आकार चित्रण गर्नुहोस्

क्यानभासले वस्तुहरू चित्रण गर्न कार्टेसियन समन्वय प्रणाली प्रयोग गर्दछ। यसले x-अक्ष र y-अक्ष प्रयोग गर्दछ ताकि कुनै वस्तु कहाँ अवस्थित छ भनेर व्यक्त गर्न सकियोस्। स्थान 0,0 माथिल्लो बायाँ स्थिति हो र तल्लो दायाँ तपाईंले क्यानभासको चौडाइ र उचाइ सेट गर्नुभएको स्थान हो।

छवि MDN बाट

क्यानभास तत्वमा चित्रण गर्न तपाईंले निम्न चरणहरू पूरा गर्नुपर्नेछ:

सन्दर्भ प्राप्त गर्नुहोस् क्यानभास तत्वको।
सन्दर्भ प्राप्त गर्नुहोस् क्यानभास तत्वमा रहेको कन्टेक्स्ट तत्वको।
चित्रण कार्य सञ्चालन गर्नुहोस् कन्टेक्स्ट तत्व प्रयोग गरेर।

माथिका चरणहरूको लागि कोड सामान्यतया यस प्रकार देखिन्छ:

// 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

✅ क्यानभास एपीआई मुख्य रूपमा 2D आकारहरूमा केन्द्रित छ, तर तपाईं वेब साइटमा 3D तत्वहरू पनि चित्रण गर्न सक्नुहुन्छ; यसका लागि तपाईंले WebGL API प्रयोग गर्न सक्नुहुन्छ।

तपाईं क्यानभास एपीआईको प्रयोग गरेर विभिन्न प्रकारका वस्तुहरू चित्रण गर्न सक्नुहुन्छ जस्तै:

ज्यामितीय आकारहरू, हामीले पहिले नै आयत चित्रण कसरी गर्ने देखाएका छौं, तर तपाईंले धेरै अन्य चीजहरू पनि चित्रण गर्न सक्नुहुन्छ।
पाठ, तपाईंले कुनै पनि फन्ट र रंगको साथ पाठ चित्रण गर्न सक्नुहुन्छ।
छविहरू, तपाईंले .jpg वा .png जस्ता छवि सम्पत्तिमा आधारित छवि चित्रण गर्न सक्नुहुन्छ।

✅ प्रयास गर्नुहोस्! तपाईंलाई थाहा छ कि आयत कसरी चित्रण गर्ने, के तपाईं पृष्ठमा वृत्त चित्रण गर्न सक्नुहुन्छ? CodePen मा केही रोचक क्यानभास चित्रणहरू हेर्नुहोस्। यहाँ एक विशेष रूपमा प्रभावशाली उदाहरण छ।

छवि सम्पत्ति लोड गर्नुहोस् र चित्रण गर्नुहोस्

तपाईंले Image वस्तु सिर्जना गरेर र यसको src गुण सेट गरेर छवि सम्पत्ति लोड गर्नुहुन्छ। त्यसपछि तपाईंले load इभेन्ट सुन्नुहुन्छ ताकि यो प्रयोग गर्न तयार भएको थाहा पाउन सकियोस्। कोड यस प्रकार देखिन्छ:

सम्पत्ति लोड गर्नुहोस्

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

सम्पत्ति लोड गर्ने ढाँचा

माथिको कोडलाई यस प्रकारको संरचनामा राख्न सिफारिस गरिन्छ ताकि यो प्रयोग गर्न सजिलो होस् र तपाईंले यसलाई पूर्ण रूपमा लोड भएपछि मात्र हेरफेर गर्न प्रयास गर्नुहोस्:

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')
}

स्क्रिनमा खेल सम्पत्ति चित्रण गर्नको लागि, तपाईंको कोड यस प्रकार देखिन्छ:

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 उप फोल्डरमा सिर्जना गरिएका फाइलहरू पत्ता लगाउनुहोस्। यसमा निम्न समावेश हुनुपर्छ:

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

Visual Studio Code मा यस फोल्डरको प्रतिलिपि खोल्नुहोस्। तपाईंले स्थानीय विकास वातावरण सेटअप गर्न आवश्यक छ, विशेष गरी Visual Studio Code, NPM र Node स्थापना गरेर। यदि तपाईंको कम्प्युटरमा npm सेटअप छैन भने, यसरी सेटअप गर्नुहोस्।

तपाईंको प्रोजेक्ट सुरु गर्न your_work फोल्डरमा जानुहोस्:

cd your-work
npm start

माथिको कोडले http://localhost:5000 ठेगानामा HTTP सर्भर सुरु गर्नेछ। ब्राउजर खोल्नुहोस् र उक्त ठेगाना इनपुट गर्नुहोस्। अहिले यो खाली पृष्ठ हो, तर यो परिवर्तन हुनेछ।

नोट: स्क्रिनमा परिवर्तनहरू हेर्नको लागि, तपाईंको ब्राउजर रिफ्रेस गर्नुहोस्।

कोड थप्नुहोस्

your-work/app.js मा आवश्यक कोड थप्नुहोस् ताकि तलका समस्याहरू समाधान गर्न सकियोस्:

चित्रण गर्नुहोस् कालो पृष्ठभूमि भएको क्यानभास

टिप: /app.js मा उपयुक्त TODO अन्तर्गत दुई लाइनहरू थप्नुहोस्, ctx तत्वलाई कालो सेट गर्दै र शीर्ष/बायाँ समन्वयलाई 0,0 मा सेट गर्दै र क्यानभासको उचाइ र चौडाइ बराबर सेट गर्दै।
लोड गर्नुहोस् टेक्सचरहरू

टिप: खेलाडी र शत्रु छविहरू await loadTexture प्रयोग गरेर र छवि पथ पास गरेर थप्नुहोस्। तपाईंले तिनीहरूलाई स्क्रिनमा अझै देख्नुहुने छैन!
चित्रण गर्नुहोस् हिरोलाई स्क्रिनको केन्द्रमा तलको भागमा

टिप: drawImage एपीआई प्रयोग गरेर हिरो छवि स्क्रिनमा चित्रण गर्नुहोस्, canvas.width / 2 - 45 र canvas.height - canvas.height / 4) सेट गर्दै।
चित्रण गर्नुहोस् 5*5 राक्षसहरू

टिप: अब तपाईंले स्क्रिनमा शत्रुहरू चित्रण गर्न कोड अनकमेन्ट गर्न सक्नुहुन्छ। त्यसपछि, createEnemies फङ्सनमा जानुहोस् र यसलाई निर्माण गर्नुहोस्।

पहिलो, केही स्थिरांकहरू सेट गर्नुहोस्:
```
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;
```
त्यसपछि, राक्षसहरूको एरे स्क्रिनमा चित्रण गर्न लूप सिर्जना गर्नुहोस्:
```
for (let x = START_X; x < STOP_X; x += 98) {
    for (let y = 0; y < 50 * 5; y += 50) {
      ctx.drawImage(enemyImg, x, y);
    }
  }
```

परिणाम

समाप्त परिणाम यस प्रकार देखिनुपर्छ:

समाधान

कृपया पहिले आफैं समाधान गर्न प्रयास गर्नुहोस् तर यदि तपाईं अड्किनुहुन्छ भने, समाधान हेर्नुहोस्।

GitHub Copilot Agent Challenge 🚀

Agent मोड प्रयोग गरेर निम्न चुनौती पूरा गर्नुहोस्:

विवरण: तपाईंले सिकेका क्यानभास एपीआई प्रविधिहरू प्रयोग गरेर दृश्य प्रभावहरू र अन्तरक्रियात्मक तत्वहरू थप्दै तपाईंको स्पेस गेम क्यानभासलाई सुधार गर्नुहोस्।

प्रेरणा: enhanced-canvas.html नामको नयाँ फाइल सिर्जना गर्नुहोस् जसमा पृष्ठभूमिमा एनिमेटेड ताराहरू, हिरो जहाजको लागि पल्सिङ स्वास्थ्य बार, र शत्रु जहाजहरू जुन बिस्तारै तल सर्दै जान्छन्, देखिन्छ। यादृच्छिक स्थान र अपारदर्शिताको प्रयोग गरेर चम्किलो ताराहरू चित्रण गर्ने, स्वास्थ्य स्तरको आधारमा रंग परिवर्तन गर्ने स्वास्थ्य बार कार्यान्वयन गर्ने (हरियो > पहेंलो > रातो), र विभिन्न गतिमा स्क्रिन तल सर्ने शत्रु जहाजहरू एनिमेट गर्ने जाभास्क्रिप्ट कोड समावेश गर्नुहोस्।

🚀 चुनौती

तपाईंले 2D-केंद्रित क्यानभास एपीआईको बारेमा सिक्नुभएको छ; WebGL API हेर्नुहोस्, र 3D वस्तु चित्रण प्रयास गर्नुहोस्।

पोस्ट-लेक्चर क्विज

समीक्षा र आत्म अध्ययन

क्यानभास एपीआईको बारेमा पढेर थप जान्नुहोस्।

असाइनमेन्ट

क्यानभास एपीआईसँग खेल्नुहोस्

अस्वीकरण:
यो दस्तावेज AI अनुवाद सेवा Co-op Translator प्रयोग गरेर अनुवाद गरिएको छ। हामी शुद्धताको लागि प्रयास गर्छौं, तर कृपया ध्यान दिनुहोस् कि स्वचालित अनुवादमा त्रुटिहरू वा अशुद्धताहरू हुन सक्छ। यसको मूल भाषा मा रहेको दस्तावेजलाई आधिकारिक स्रोत मानिनुपर्छ। महत्वपूर्ण जानकारीको लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुनेछैनौं।

18 KiB Raw Blame History