# स्पेस गेम तयार करा भाग 2: हिरो आणि मॉन्स्टर्स कॅनव्हासवर काढा कॅनव्हास API ही वेब डेव्हलपमेंटमधील सर्वात शक्तिशाली वैशिष्ट्यांपैकी एक आहे, जी तुमच्या ब्राउझरमध्ये डायनॅमिक, इंटरॅक्टिव्ह ग्राफिक्स तयार करण्यासाठी वापरली जाते. या धड्यात, आपण त्या रिकाम्या HTML `` घटकाला हिरो आणि मॉन्स्टर्सने भरलेल्या गेमच्या जगात बदलू. कॅनव्हासला तुमचा डिजिटल आर्ट बोर्ड समजा जिथे कोड व्हिज्युअल बनतो. आम्ही मागील धड्यात शिकलेल्या गोष्टींवर काम करत आहोत आणि आता आम्ही व्हिज्युअल पैलूंमध्ये खोलवर जाऊ. तुम्ही गेम स्प्राइट्स कसे लोड करायचे आणि प्रदर्शित करायचे, घटक अचूकपणे कसे स्थानबद्ध करायचे आणि तुमच्या स्पेस गेमसाठी व्हिज्युअल पाया कसा तयार करायचा हे शिकाल. हे स्थिर वेब पृष्ठे आणि डायनॅमिक, इंटरॅक्टिव्ह अनुभव यांच्यातील अंतर कमी करते. या धड्याच्या शेवटी, तुमच्याकडे तुमच्या हिरो शिप योग्य प्रकारे स्थित असलेल्या आणि शत्रूंच्या फॉर्मेशन्स लढाईसाठी तयार असलेल्या पूर्ण गेम सीन असेल. तुम्हाला समजेल की आधुनिक गेम ब्राउझरमध्ये ग्राफिक्स कसे रेंडर करतात आणि तुमचे स्वतःचे इंटरॅक्टिव्ह व्हिज्युअल अनुभव तयार करण्यासाठी कौशल्य मिळेल. चला कॅनव्हास ग्राफिक्स एक्सप्लोर करूया आणि तुमचा स्पेस गेम जिवंत करूया! ## प्री-लेक्चर क्विझ [प्री-लेक्चर क्विझ](https://ff-quizzes.netlify.app/web/quiz/31) ## कॅनव्हास तर हे `` घटक नेमके काय आहे? वेब ब्राउझरमध्ये डायनॅमिक ग्राफिक्स आणि अ‍ॅनिमेशन तयार करण्यासाठी HTML5 चे समाधान आहे. नियमित प्रतिमा किंवा व्हिडिओ स्थिर असतात, परंतु कॅनव्हास तुम्हाला स्क्रीनवर दिसणाऱ्या प्रत्येक गोष्टीवर पिक्सेल-स्तरीय नियंत्रण देते. हे गेम्स, डेटा व्हिज्युअलायझेशन आणि इंटरॅक्टिव्ह आर्टसाठी परिपूर्ण बनवते. याला प्रोग्राम करण्यायोग्य ड्रॉइंग पृष्ठभाग म्हणून विचार करा जिथे जावास्क्रिप्ट तुमचा ब्रश बनतो. डिफॉल्टनुसार, कॅनव्हास घटक तुमच्या पृष्ठावर रिक्त, पारदर्शक आयतासारखा दिसतो. पण इथेच त्याची खरी ताकद आहे! जेव्हा तुम्ही जावास्क्रिप्ट वापरून आकार काढता, प्रतिमा लोड करता, अ‍ॅनिमेशन तयार करता आणि वापरकर्त्याच्या संवादांना प्रतिसाद देण्यासाठी गोष्टी तयार करता तेव्हा त्याची खरी ताकद दिसून येते. हे 1960 च्या दशकातील बेल लॅब्समधील सुरुवातीच्या संगणक ग्राफिक्स पायोनियर्सनी पहिल्या डिजिटल अ‍ॅनिमेशन तयार करण्यासाठी प्रत्येक पिक्सेल प्रोग्राम करावा लागला त्यासारखे आहे. ✅ [कॅनव्हास API बद्दल अधिक वाचा](https://developer.mozilla.org/docs/Web/API/Canvas_API) MDN वर. हे सामान्यतः पृष्ठाच्या बॉडीचा भाग म्हणून घोषित केले जाते: ```html ``` **या कोडमध्ये काय होते:** - **सेट करते** `id` अ‍ॅट्रिब्युट जेणेकरून तुम्ही जावास्क्रिप्टमध्ये या विशिष्ट कॅनव्हास घटकाचा संदर्भ घेऊ शकता - **परिभाषित करते** पिक्सेलमधील `width` जे कॅनव्हासचा आडवा आकार नियंत्रित करते - **स्थापित करते** पिक्सेलमधील `height` जे कॅनव्हासचा उभा आकार ठरवते ## साधी भूमितीय आकृती काढणे आता तुम्हाला कॅनव्हास घटक काय आहे हे माहित आहे, चला प्रत्यक्षात त्यावर काढण्याचा शोध घेऊया! कॅनव्हास एक समन्वय प्रणाली वापरते जी गणित वर्गातून परिचित वाटू शकते, परंतु संगणक ग्राफिक्ससाठी विशिष्ट एक महत्त्वाचा ट्विस्ट आहे. कॅनव्हास x-अक्ष (आडवा) आणि y-अक्ष (उभा) असलेल्या कार्टेशियन समन्वय प्रणालीचा वापर करतो ज्यामुळे तुम्ही काढलेल्या प्रत्येक गोष्टीचे स्थान ठरवता येते. परंतु येथे मुख्य फरक आहे: गणित वर्गातील समन्वय प्रणालीच्या विपरीत, मूळ बिंदू `(0,0)` वरून सुरू होते वरच्या डाव्या कोपऱ्यात, x-मूल्ये उजवीकडे जाताना वाढतात आणि y-मूल्ये खाली जाताना वाढतात. ही पद्धत सुरुवातीच्या संगणक डिस्प्लेपासून सुरू झाली जिथे इलेक्ट्रॉन बीम वरून खाली स्कॅन करत होते, ज्यामुळे वरचा डावा कोपरा नैसर्गिक प्रारंभ बिंदू बनला.  > प्रतिमा [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) वरून कॅनव्हास घटकावर काढण्यासाठी, तुम्ही कॅनव्हास ग्राफिक्सच्या सर्वात महत्त्वाच्या तीन-स्टेप प्रक्रियेचे अनुसरण कराल. तुम्ही हे काही वेळा केल्यानंतर, ते सहज होईल: 1. **तुमच्या कॅनव्हास घटकाचा संदर्भ मिळवा** DOM मधून (इतर HTML घटकांप्रमाणेच) 2. **2D रेंडरिंग संदर्भ मिळवा** – हे सर्व ड्रॉइंग पद्धती प्रदान करते 3. **काढायला सुरुवात करा!** संदर्भाच्या अंगभूत पद्धतींचा वापर करून तुमचे ग्राफिक्स तयार करा हे कोडमध्ये कसे दिसते: ```javascript // 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](https://developer.mozilla.org/docs/Web/API/WebGL_API) वापरू शकता. तुम्ही कॅनव्हास API सह अनेक गोष्टी काढू शकता जसे की: - **भूमितीय आकार**, आम्ही आधीच आयत कसा काढायचा ते दाखवले आहे, परंतु तुम्ही आणखी बरेच काही काढू शकता. - **मजकूर**, तुम्ही कोणत्याही फॉन्ट आणि रंगासह मजकूर काढू शकता. - **प्रतिमा**, तुम्ही .jpg किंवा .png सारख्या प्रतिमा अ‍ॅसेटवरून प्रतिमा काढू शकता. ✅ प्रयत्न करा! तुम्हाला आयत कसा काढायचा माहित आहे, तुम्ही पृष्ठावर वर्तुळ काढू शकता का? CodePen वर काही मनोरंजक कॅनव्हास ड्रॉइंग्स पहा. येथे एक [खूप प्रभावी उदाहरण](https://codepen.io/dissimulate/pen/KrAwx) आहे. ## प्रतिमा अ‍ॅसेट लोड करा आणि काढा मूलभूत आकार काढणे सुरुवात करण्यासाठी उपयुक्त आहे, परंतु बहुतेक गेम्सना प्रत्यक्ष प्रतिमा आवश्यक असतात! स्प्राइट्स, पार्श्वभूमी आणि टेक्सचर्स गेम्सना त्यांचे व्हिज्युअल आकर्षण देतात. कॅनव्हासवर प्रतिमा लोड करणे आणि प्रदर्शित करणे भूमितीय आकार काढण्यापेक्षा वेगळे कार्य करते, परंतु एकदा प्रक्रिया समजल्यावर ते सोपे आहे. आपल्याला एक `Image` ऑब्जेक्ट तयार करणे, आमची प्रतिमा फाइल लोड करणे (हे असिंक्रोनसपणे होते, म्हणजे "पार्श्वभूमीत"), आणि प्रतिमा तयार झाल्यावर कॅनव्हासवर काढणे आवश्यक आहे. ही पद्धत सुनिश्चित करते की तुमच्या प्रतिमा योग्य प्रकारे प्रदर्शित होतात आणि लोड करताना तुमचा अ‍ॅप्लिकेशन ब्लॉक होत नाही. ### मूलभूत प्रतिमा लोड करणे ```javascript 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` पथ सेट करून - आम्ही **लोड इव्हेंटसाठी ऐकतो** जेणेकरून प्रतिमा वापरण्यासाठी तयार झाल्याची अचूक वेळ आम्हाला माहित होईल ### प्रतिमा लोड करण्याचा चांगला मार्ग येथे व्यावसायिक डेव्हलपर्स सामान्यतः वापरत असलेल्या प्रतिमा लोडिंग हाताळण्याचा अधिक मजबूत मार्ग आहे. आम्ही प्रतिमा लोडिंग Promise-आधारित फंक्शनमध्ये रॅप करू – ही पद्धत, ES6 मध्ये जावास्क्रिप्ट प्रॉमिसेस मानक बनल्यानंतर लोकप्रिय झाली, तुमचा कोड अधिक व्यवस्थित करते आणि त्रुटींचे सौम्यपणे व्यवस्थापन करते: ```javascript 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 ब्लॉक्स समाविष्ट केले** जेणेकरून लोडिंगमध्ये काही अडचण आल्यास सौम्यपणे हाताळता येईल तुमच्या प्रतिमा लोड झाल्यावर, कॅनव्हासवर त्यांना काढणे प्रत्यक्षात खूप सोपे आहे: ```javascript 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` सब फोल्डरमध्ये तयार केलेल्या स्टार्टर फाइल्स शोधा. तुमच्या प्रोजेक्ट स्ट्रक्चरमध्ये खालील गोष्टी असाव्यात: ```bash 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` सेट केले नसेल, तर [ते कसे स्थापित करायचे ते येथे आहे](https://www.npmjs.com/get-npm). तुमचा विकास सर्व्हर सुरू करा `your-work` फोल्डरमध्ये जाऊन: ```bash cd your-work npm start ``` **हा आदेश काही छान गोष्टी करतो:** - **स्थानिक सर्व्हर सुरू करतो** `http://localhost:5000` वर जेणेकरून तुम्ही तुमचा गेम चाचणी करू शकता - **तुमच्या फाइल्स योग्य प्रकारे सर्व्ह करतो** जेणेकरून तुमचा ब्राउझर त्यांना योग्य प्रकारे लोड करू शकेल - **तुमच्या फाइल्ससाठी बदल पाहतो** जेणेकरून तुम्ही सहज विकास करू शकता - **तुम्हाला एक व्यावसायिक विकास वातावरण देते** सर्वकाही चाचणी करण्यासाठी > 💡 **टीप**: तुमचा ब्राउझर सुरुवातीला रिकामे पृष्ठ दाखवेल – ते अपेक्षित आहे! तुम्ही कोड जोडत असताना, तुमचे बदल पाहण्यासाठी तुमचा ब्राउझर रीफ्रेश करा. NASA ने अपोलो मार्गदर्शन संगणक तयार करण्यासाठी प्रत्येक घटकाची चाचणी करून मोठ्या प्रणालीमध्ये समाकलित करण्यापूर्वी ही पुनरावृत्ती विकास पद्धत वापरली. ### कोड जोडा `your-work/app.js` मध्ये आवश्यक कोड जोडा खालील कार्ये पूर्ण करण्यासाठी: 1. **काळ्या पार्श्वभूमीसह कॅनव्हास काढा** > 💡 **कसे करायचे**: `/app.js` मध्ये TODO शोधा आणि फक्त दोन ओळी जोडा. `ctx.fillStyle` काळा सेट करा, नंतर तुमच्या कॅनव्हासच्या परिमाणांसह (0,0) पासून सुरू होणारे `ctx.fillRect()` वापरा. सोपे! 2. **गेम टेक्सचर्स लोड करा** > 💡 **कसे करायचे**: तुमच्या प्लेयर आणि शत्रू प्रतिमा लोड करण्यासाठी `await loadAsset()` वापरा. त्यांना व्हेरिएबल्समध्ये साठवा जेणेकरून तुम्ही त्यांचा नंतर वापर करू शकता. लक्षात ठेवा – तुम्ही त्यांना प्रत्यक्षात काढेपर्यंत ते दिसणार नाहीत! 3. **हिरो शिप केंद्र-तळाच्या स्थितीत काढा** > 💡 **कसे करायचे**: तुमच्या हिरोला स्थान देण्यासाठी `ctx.drawImage()` वापरा. x-समन्वयासाठी, `canvas.width / 2 - 45` वापरून ते केंद्रित करा आणि y-समन्वयासाठी `canvas.height - canvas.height / 4` वापरा जेणेकरून ते तळाच्या भागात ठेवता येईल. 4. **शत्रू जहाजांची 5×5 फॉर्मेशन काढा** > 💡 **कसे करायचे**: `createEnemies` फंक्शन शोधा आणि एक नेस्टेड लूप सेट करा. तुम्हाला स्पेसिंग आणि पोझिशनिंगसाठी काही गणित करावे लागेल, पण काळजी करू नका – मी तुम्हाला नेमके कसे करायचे ते दाखवतो! प्रथम, योग्य शत्रू फॉर्मेशन लेआउटसाठी स्थिरांक स्थापित करा: ```javascript 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; ``` **या स्थिरांक काय करतात ते समजून घेऊया:** - आम्ही **प्रत्येक पंक्ती आणि स्तंभासाठी 5 शत्रू सेट करतो** (एक छान 5×5 ग्रिड) - आम्ही **शत्रूंमध्ये किती जागा ठेवायची ते परिभाषित करतो** जेणेकरून ते गुदमरलेले दिसणार नाहीत - आम्ही **आमच्या संपूर्ण फॉर्मेशनची रुंदी मोजतो** - आम्ही **केंद्रित दिसण्यासाठी फॉर्मेशन कुठे सुरू आणि थांबवायचे ते शोधतो** मग, शत्रू फॉर्मेशन काढण्यासाठी नेस्टेड लूप तयार करा: ```javascript 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); } } ``` **या नेस्टेड लूपमध्ये काय होते:** - बाह्य लूप **डावीकडून उजवीकडे हलतो** आमच्या फॉर्मेशनमध्ये - अंतर्गत लूप **वरून खाली जातो** --- **अस्वीकरण**: हा दस्तऐवज AI भाषांतर सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी, कृपयास लक्षात ठेवा की स्वयंचलित भाषांतरे त्रुटी किंवा अचूकतेच्या अभावाने युक्त असू शकतात. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी, व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून उद्भवलेल्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार नाही.