History

softchris 3f7ec0bbe8 🌐 Update translations via Co-op Translator		1 month ago
..
README.md	🌐 Update translations via Co-op Translator	1 month ago
assignment.md	🌐 Update translations via Co-op Translator	1 month ago

README.md

Unescape Escape

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

क्यानभास API वेब विकासको एक शक्तिशाली विशेषता हो जसले तपाईंको ब्राउजरमै गतिशील, अन्तरक्रियात्मक ग्राफिक्स सिर्जना गर्न अनुमति दिन्छ। यस पाठमा, हामी खाली HTML <canvas> तत्वलाई हिरो र राक्षसले भरिएको खेलको संसारमा रूपान्तरण गर्नेछौं। क्यानभासलाई तपाईंको डिजिटल कला बोर्डको रूपमा सोच्नुहोस् जहाँ कोड दृश्यमा परिणत हुन्छ।

हामीले अघिल्लो पाठमा सिकेको कुरालाई अगाडि बढाउँदैछौं, र अब हामी दृश्य पक्षमा गहिरो जान्छौं। तपाईंले खेलका स्प्राइटहरू लोड र प्रदर्शन गर्ने, तत्वहरूलाई ठ्याक्कै स्थानमा राख्ने, र तपाईंको स्पेस गेमको दृश्य आधार सिर्जना गर्ने सिक्नुहुनेछ। यसले स्थिर वेब पृष्ठहरू र गतिशील, अन्तरक्रियात्मक अनुभवहरू बीचको खाडललाई पुल गर्दछ।

यस पाठको अन्त्यसम्ममा, तपाईंको हिरो जहाज सही रूपमा स्थित हुनेछ र शत्रुहरूको संरचना युद्धको लागि तयार हुनेछ। तपाईंले आधुनिक खेलहरू ब्राउजरमा कसरी ग्राफिक्स रेंडर गर्छन् भन्ने बुझ्नुहुनेछ र आफ्नै अन्तरक्रियात्मक दृश्य अनुभवहरू सिर्जना गर्ने सीप प्राप्त गर्नुहुनेछ। क्यानभास ग्राफिक्स अन्वेषण गरौं र तपाईंको स्पेस गेमलाई जीवन्त बनाऔं!

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

क्यानभास

तपाईंको <canvas> तत्व वास्तवमा के हो? यो HTML5 को समाधान हो जसले वेब ब्राउजरहरूमा गतिशील ग्राफिक्स र एनिमेसनहरू सिर्जना गर्न अनुमति दिन्छ। नियमित छविहरू वा भिडियोहरू स्थिर हुन्छन्, तर क्यानभासले स्क्रिनमा देखिने सबै कुरामा पिक्सेल-स्तरको नियन्त्रण दिन्छ। यसले खेलहरू, डेटा भिजुअलाइजेसनहरू, र अन्तरक्रियात्मक कलाका लागि यो उत्तम बनाउँछ। यसलाई प्रोग्राम गर्न मिल्ने ड्रइङ सतहको रूपमा सोच्नुहोस् जहाँ जाभास्क्रिप्ट तपाईंको ब्रश बन्छ।

डिफल्टमा, क्यानभास तत्व तपाईंको पृष्ठमा खाली, पारदर्शी आयतको रूपमा देखिन्छ। तर यहीँ यसको सम्भावना लुकेको छ! यसको वास्तविक शक्ति तब देखा पर्छ जब तपाईं जाभास्क्रिप्ट प्रयोग गरेर आकारहरू चित्रण गर्नुहुन्छ, छविहरू लोड गर्नुहुन्छ, एनिमेसनहरू सिर्जना गर्नुहुन्छ, र प्रयोगकर्ताको अन्तरक्रियामा प्रतिक्रिया दिनुहुन्छ। यो १९६० को दशकमा बेल ल्याब्सका प्रारम्भिक कम्प्युटर ग्राफिक्स अग्रगामीहरूले पहिलो डिजिटल एनिमेसन सिर्जना गर्न प्रत्येक पिक्सेल प्रोग्राम गर्नुपरेको जस्तै हो।

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

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

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

यस कोडले के गर्छ:

id एट्रिब्युट सेट गरेर तपाईंले यस विशेष क्यानभास तत्वलाई जाभास्क्रिप्टमा सन्दर्भ गर्न सक्नुहुन्छ
क्यानभासको क्षैतिज आकार नियन्त्रण गर्न पिक्सेलमा width परिभाषित गर्दछ
क्यानभासको ठाडो आयाम निर्धारण गर्न पिक्सेलमा height स्थापना गर्दछ

साधारण ज्यामिति चित्रण

अब तपाईंलाई क्यानभास तत्व के हो भन्ने थाहा छ, आउनुहोस् यसमा वास्तवमा चित्रण गर्ने अन्वेषण गरौं! क्यानभासले एक समन्वय प्रणाली प्रयोग गर्दछ जुन गणितको कक्षाबाट परिचित लाग्न सक्छ, तर कम्प्युटर ग्राफिक्ससँग विशेष रूपमा एक महत्त्वपूर्ण मोड छ।

क्यानभासले कार्टेसियन समन्वय प्रणाली प्रयोग गर्दछ जसमा 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) २०० पिक्सेल चौडा र अग्लो आयत चित्रण गर्यौं

✅ क्यानभास 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!');
};

यस कोडमा के भइरहेको छ:

हामीले नयाँ Image वस्तु सिर्जना गर्यौं जसले हाम्रो स्प्राइट वा टेक्स्चर समात्छ
हामीले यसलाई कुन छवि फाइल लोड गर्ने बतायौं स्रोत पथ सेट गरेर
हामीले लोड इभेन्टको लागि सुनेर छवि प्रयोग गर्न तयार भएको समय थाहा पायौं

छविहरू लोड गर्ने राम्रो तरिका

यहाँ छविहरू लोड गर्ने एक अधिक बलियो तरिका छ जुन व्यावसायिक विकासकर्ताहरूले सामान्यतया प्रयोग गर्छन्। हामी छवि लोडिङलाई Promise-आधारित कार्यमा समेट्नेछौं – यो दृष्टिकोण, जब जाभास्क्रिप्ट Promises ES6 मा मानक बनेपछि लोकप्रिय भयो, तपाईंको कोडलाई अधिक व्यवस्थित बनाउँछ र त्रुटिहरूलाई सुन्दर रूपमा ह्यान्डल गर्दछ:

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

your-work/
├── assets/
│   ├── enemyShip.png
│   └── player.png
├── index.html
├── app.js
└── package.json

तपाईंसँग के छ:

खेलका स्प्राइटहरू assets/ फोल्डरमा छन् ताकि सबै व्यवस्थित रहोस्
तपाईंको मुख्य HTML फाइल क्यानभास तत्व सेटअप गर्छ र सबै कुरा तयार गर्छ
जाभास्क्रिप्ट फाइल जहाँ तपाईं आफ्नो खेल रेंडरिङ जादू लेख्नुहुनेछ
एक package.json जसले विकास सर्भर सेटअप गर्छ ताकि तपाईं स्थानीय रूपमा परीक्षण गर्न सक्नुहुन्छ

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

your-work फोल्डरमा नेभिगेट गरेर तपाईंको विकास सर्भर सुरु गर्नुहोस्:

cd your-work
npm start

यो आदेशले केही चाखलाग्दो काम गर्छ:

स्थानीय सर्भर सुरु गर्छ http://localhost:5000 मा ताकि तपाईं आफ्नो खेल परीक्षण गर्न सक्नुहुन्छ
तपाईंका सबै फाइलहरू सही रूपमा सर्भ गर्छ ताकि तपाईंको ब्राउजरले तिनीहरूलाई सही रूपमा लोड गर्न सकोस्
तपाईंका फाइलहरू परिवर्तनको लागि हेर्छ ताकि तपाईं सहज रूपमा विकास गर्न सक्नुहुन्छ
तपाईंलाई व्यावसायिक विकास वातावरण दिन्छ ताकि तपाईं सबै कुरा परीक्षण गर्न सक्नुहुन्छ

💡 नोट: तपाईंको ब्राउजरले सुरुमा खाली पृष्ठ देखाउनेछ – यो अपेक्षित हो! तपाईंले कोड थप्दै जाँदा, आफ्नो ब्राउजरलाई रिफ्रेस गर्नुहोस् ताकि तपाईंको परिवर्तनहरू देख्न सक्नुहुन्छ। यो पुनरावृत्त विकास दृष्टिकोण NASA ले अपोलो गाइडेन्स कम्प्युटर निर्माण गर्दा अपनाएको जस्तै हो – प्रत्येक कम्पोनेन्ट परीक्षण गर्दै ठूलो प्रणालीमा एकीकृत गर्नु अघि।

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

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

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

💡 यसरी गर्नुहोस्: /app.js मा TODO पत्ता लगाउनुहोस् र दुई लाइन मात्र थप्नुहोस्। ctx.fillStyle लाई कालो सेट गर्नुहोस्, त्यसपछि ctx.fillRect() प्रयोग गरेर (0,0) बाट क्यानभास आयामहरू प्रयोग गर्नुहोस्। सजिलो!
खेलका टेक्स्चरहरू लोड गर्नुहोस्

💡 यसरी गर्नुहोस्: await loadAsset() प्रयोग गरेर तपाईंको प्लेयर र शत्रु छविहरू लोड गर्नुहोस्। तिनीहरूलाई भेरिएबलमा स्टोर गर्नुहोस् ताकि तपाईं पछि प्रयोग गर्न सक्नुहुन्छ। सम्झनुहोस् – तिनीहरू तबसम्म देखिने छैनन् जबसम्म तपाईंले वास्तवमा तिनीहरूलाई चित्रण गर्नुहुन्न!
हिरो जहाजलाई केन्द्र-तलको स्थितिमा चित्रण गर्नुहोस्

💡 यसरी गर्नुहोस्: ctx.drawImage() प्रयोग गरेर तपाईंको हिरोलाई स्थित गर्नुहोस्। x-कोअर्डिनेटको लागि, canvas.width / 2 - 45 प्रयोग गरेर यसलाई केन्द्रित गर्नुहोस्, र y-कोअर्डिनेटको लागि canvas.height - canvas.height / 4 प्रयोग गरेर यसलाई तलको क्षेत्रमा राख्नुहोस्।
राक्षस जहाजहरूको 5×5 संरचना चित्रण गर्नुहोस्

💡 यसरी गर्नुहोस्: createEnemies फंक्शन पत्ता लगाउनुहोस् र नेस्टेड लूप सेटअप गर्नुहोस्। तपाईंले स्पेसिङ र पोजिसनिङको लागि केही गणित गर्नुपर्नेछ, तर चिन्ता नगर्नुहोस् – म तपाईंलाई ठीकसँग देखाउँछु!

पहिले, सही शत्रु संरचना लेआउटको लागि Constants स्थापना गर्नुहोस्:

const ENEMY_TOTAL = 5;
const ENEMY_SPACING = 98;
const FORMATION_WIDTH = ENEMY_TOTAL * ENEMY_SPACING;
const START_X = (canvas.width - FORMATION_WIDTH) / 2;
const STOP_X = START_X + FORMATION_WIDTH;

यी Constants के गर्छन्:

हामीले प्रति पङ्क्ति र स्तम्भ ५ शत्रुहरू सेट गर्यौं (एक राम्रो 5×5 ग्रिड)
हामीले शत्रुहरू बीच कति स्पेस राख्ने परिभाषित गर्यौं ताकि तिनीहरू खचाखच नदेखिउन्
हामीले हाम्रो सम्पूर्ण संरचना कति चौडा हुनेछ भनेर गणना गर्यौं
हामीले सुरु र अन्त्य कहाँ गर्ने भनेर पत्ता लगायौं ताकि संरचना केन्द्रित देखियोस्

त्यसपछि, शत्रु संरचना चित्रण गर्न नेस्टेड लूप सिर्जना गर्नुहोस्:

for (let x = START_X; x < STOP_X; x += ENEMY_SPACING) {
  for (let y = 0; y < 50 * 5; y += 50) {
    ctx.drawImage(enemyImg, x, y);
  }
}

यस नेस्टेड लूपले के गर्छ:

बाहिरी लूपले हाम्रो संरचनामा बायाँदेखि दायाँ सर्छ
भित्री लूपले माथिबाट तल जान्छ ताकि सफा पङ्क्तिहरू सिर्जना होस्
हामीले प्रत्येक शत्रु स्प्राइटलाई हामीले गणना गरेका ठ्याक्कै x,y समन्वयमा चित्रण गर्यौं
सबै कुरा समान रूपमा स्पेस गरिएको छ ताकि यो व्यावसायिक र व्यवस्थित देखियोस्

परिणाम

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

समाधान

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

GitHub Copilot Agent चुनौती 🚀

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

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

प्रेरणा: enhanced-canvas.html नामको नयाँ फाइल सिर्जना गर्नुहोस् जसमा क्यानभासले पृष्ठभूमिमा एनिमेटेड ताराहरू, हिरो जहाजको लागि पल्सिङ

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

README.md Unescape Escape