# स्पेस गेम बनाउनुहोस् भाग २: हिरो र मोन्स्टरलाई क्यानभासमा चित्रण गर्नुहोस् ## प्रि-लेक्चर क्विज [प्रि-लेक्चर क्विज](https://ff-quizzes.netlify.app/web/quiz/31) ## क्यानभास क्यानभास एउटा HTML तत्व हो जसमा डिफल्ट रूपमा कुनै सामग्री हुँदैन; यो खाली स्लेट हो। यसमा चित्रण गरेर सामग्री थप्नुपर्छ। ✅ [क्यानभास API](https://developer.mozilla.org/docs/Web/API/Canvas_API) को बारेमा MDN मा थप पढ्नुहोस्। यो सामान्यतया पृष्ठको बडीको भागको रूपमा यसरी घोषणा गरिन्छ: ```html ``` माथि हामीले `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://localhost:5000` ठेगानामा HTTP सर्भर सुरु गर्नेछ। ब्राउजर खोल्नुहोस् र उक्त ठेगाना इनपुट गर्नुहोस्। अहिले यो खाली पृष्ठ हो, तर यो परिवर्तन हुनेछ। > नोट: स्क्रिनमा परिवर्तनहरू हेर्न, ब्राउजर रिफ्रेस गर्नुहोस्। ### कोड थप्नुहोस् `your-work/app.js` मा आवश्यक कोड थप्नुहोस् ताकि तलका समस्याहरू समाधान गर्न सकियोस्: 1. **क्यानभास चित्रण गर्नुहोस्** कालो पृष्ठभूमिसहित > टिप: `/app.js` मा उपयुक्त TODO अन्तर्गत दुई लाइनहरू थप्नुहोस्, `ctx` तत्वलाई कालो सेट गर्दै र शीर्ष/बायाँ समन्वयलाई 0,0 मा सेट गर्दै र क्यानभासको उचाइ र चौडाइ बराबर सेट गर्दै। 2. **टेक्सचर लोड गर्नुहोस्** > टिप: `await loadTexture` प्रयोग गरेर र छवि पथ पास गरेर प्लेयर र दुश्मन छविहरू थप्नुहोस्। तपाईंले तिनीहरूलाई स्क्रिनमा अझै देख्नुहुनेछैन! 3. **हिरो चित्रण गर्नुहोस्** स्क्रिनको केन्द्रमा तल्लो भागमा > टिप: `drawImage` API प्रयोग गरेर हिरो छवि स्क्रिनमा चित्रण गर्नुहोस्, `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) हेर्नुहोस्। --- ## 🚀 चुनौती तपाईंले 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) प्रयोग गरेर अनुवाद गरिएको छ। हामी यथार्थताको लागि प्रयास गर्छौं, तर कृपया ध्यान दिनुहोस् कि स्वचालित अनुवादमा त्रुटिहरू वा अशुद्धताहरू हुन सक्छ। यसको मूल भाषा मा रहेको मूल दस्तावेज़लाई आधिकारिक स्रोत मानिनुपर्छ। महत्वपूर्ण जानकारीको लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुने छैनौं।