Web-Dev-For-Beginners/translations/bn/6-space-game/5-keeping-score

স্পেস গেম তৈরি করুন পর্ব ৫: স্কোরিং এবং জীবন

প্রাক-লেকচার কুইজ

প্রাক-লেকচার কুইজ

আপনার স্পেস গেমকে একটি বাস্তব গেমের মতো অনুভব করাতে প্রস্তুত? চলুন স্কোরিং পয়েন্ট এবং জীবন ব্যবস্থাপনা যোগ করি - মূল মেকানিক্স যা স্পেস ইনভেডার্সের মতো প্রাথমিক আর্কেড গেমগুলোকে সাধারণ প্রদর্শনী থেকে আসক্তিমূলক বিনোদনে রূপান্তরিত করেছিল। এখানেই আপনার গেম সত্যিকারের খেলার যোগ্য হয়ে ওঠে।

স্ক্রিনে টেক্সট আঁকা - আপনার গেমের কণ্ঠস্বর

আপনার স্কোর প্রদর্শন করতে, আমাদের ক্যানভাসে টেক্সট রেন্ডার করার পদ্ধতি শিখতে হবে। fillText() মেথডটি আপনার প্রধান হাতিয়ার - এটি ক্লাসিক আর্কেড গেমগুলোতে স্কোর এবং স্ট্যাটাস তথ্য দেখানোর জন্য ব্যবহৃত একই কৌশল।

আপনার টেক্সটের চেহারা সম্পূর্ণভাবে নিয়ন্ত্রণ করতে পারেন:

ctx.font = "30px Arial";
ctx.fillStyle = "red";
ctx.textAlign = "right";
ctx.fillText("show this on the screen", 0, 0);

✅ ক্যানভাসে টেক্সট যোগ করার বিষয়ে আরও গভীরভাবে জানুন - আপনি ফন্ট এবং স্টাইলিং নিয়ে কতটা সৃজনশীল হতে পারেন তা দেখে অবাক হতে পারেন!

জীবন - শুধুমাত্র একটি সংখ্যা নয়

গেম ডিজাইনে, "জীবন" খেলোয়াড়ের ভুল করার সীমা নির্দেশ করে। এই ধারণাটি পিনবল মেশিন থেকে এসেছে, যেখানে আপনি একাধিক বল খেলার জন্য পেতেন। অ্যাস্টেরয়েডসের মতো প্রাথমিক ভিডিও গেমগুলোতে, জীবন খেলোয়াড়দের ঝুঁকি নিতে এবং ভুল থেকে শিখতে অনুমতি দিয়েছে।

ভিজ্যুয়াল উপস্থাপনাটি অত্যন্ত গুরুত্বপূর্ণ - শুধুমাত্র "Lives: 3" দেখানোর পরিবর্তে জাহাজের আইকন প্রদর্শন করা তাৎক্ষণিক ভিজ্যুয়াল স্বীকৃতি তৈরি করে, যেমনটি প্রাথমিক আর্কেড ক্যাবিনেটগুলো ভাষাগত বাধা অতিক্রম করতে আইকনোগ্রাফি ব্যবহার করেছিল।

আপনার গেমের পুরস্কার ব্যবস্থা তৈরি করা

এখন আমরা মূল প্রতিক্রিয়া ব্যবস্থা বাস্তবায়ন করব যা খেলোয়াড়দের আকৃষ্ট রাখে:

• স্কোরিং সিস্টেম: প্রতিটি ধ্বংস করা শত্রু জাহাজ ১০০ পয়েন্ট প্রদান করে (গোল সংখ্যা খেলোয়াড়দের মানসিকভাবে গণনা করা সহজ করে)। স্কোরটি নিচের বাম কোণে প্রদর্শিত হবে।
• জীবন কাউন্টার: আপনার হিরো তিনটি জীবন দিয়ে শুরু করে - প্রাথমিক আর্কেড গেমগুলোতে চ্যালেঞ্জ এবং খেলার যোগ্যতার মধ্যে ভারসাম্য বজায় রাখতে এটি একটি মানদণ্ড। প্রতিটি শত্রুর সাথে সংঘর্ষ একটি জীবন খরচ করে। আমরা বাকি জীবনগুলো নিচের ডান কোণে জাহাজের আইকন ব্যবহার করে প্রদর্শন করব ।

চলুন শুরু করি!

প্রথমে আপনার ওয়ার্কস্পেস সেট আপ করুন। your-work সাব ফোল্ডারের ফাইলগুলোতে যান। আপনি এই ফাইলগুলো দেখতে পাবেন:

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

আপনার গেম পরীক্ষা করতে, your_work ফোল্ডার থেকে ডেভেলপমেন্ট সার্ভার চালু করুন:

cd your-work
npm start

এটি একটি লোকাল সার্ভার চালায় http://localhost:5000 এ। আপনার ব্রাউজারে এই ঠিকানাটি খুলুন এবং আপনার গেম দেখুন। কন্ট্রোলগুলো পরীক্ষা করুন তীর চাবি দিয়ে এবং শত্রুদের গুলি করার চেষ্টা করুন সবকিছু ঠিকঠাক কাজ করছে কিনা তা নিশ্চিত করতে।

কোড লেখার সময়!

1. আপনার প্রয়োজনীয় ভিজ্যুয়াল অ্যাসেটগুলো সংগ্রহ করুন। solution/assets/ ফোল্ডার থেকে life.png অ্যাসেটটি কপি করে আপনার your-work ফোল্ডারে রাখুন। তারপর lifeImg কে আপনার window.onload ফাংশনে যোগ করুন:

   lifeImg = await loadTexture("assets/life.png");
   

2. lifeImg কে আপনার অ্যাসেট তালিকায় যোগ করতে ভুলবেন না:

   let heroImg,
   ...
   lifeImg,
   ...
   eventEmitter = new EventEmitter();
   

3. আপনার গেমের ভেরিয়েবল সেট আপ করুন। আপনার মোট স্কোর (০ দিয়ে শুরু) এবং বাকি জীবন (৩ দিয়ে শুরু) ট্র্যাক করার জন্য কিছু কোড যোগ করুন। আমরা এগুলো স্ক্রিনে প্রদর্শন করব যাতে খেলোয়াড়রা সবসময় জানে তারা কোথায় দাঁড়িয়ে।

4. সংঘর্ষ সনাক্তকরণ বাস্তবায়ন করুন। আপনার updateGameObjects() ফাংশনটি প্রসারিত করুন যাতে শত্রুরা আপনার হিরোর সাথে সংঘর্ষ করলে তা সনাক্ত করা যায়:

   enemies.forEach(enemy => {
       const heroRect = hero.rectFromGameObject();
       if (intersectRect(heroRect, enemy.rectFromGameObject())) {
         eventEmitter.emit(Messages.COLLISION_ENEMY_HERO, { enemy });
       }
     })
   

5. আপনার হিরোতে জীবন এবং পয়েন্ট ট্র্যাকিং যোগ করুন।

   1. কাউন্টারগুলো ইনিশিয়ালাইজ করুন। this.cooldown = 0 এর নিচে আপনার Hero ক্লাসে জীবন এবং পয়েন্ট সেট আপ করুন:

      this.life = 3;
      this.points = 0;
      

   2. এই মানগুলো খেলোয়াড়কে দেখান। স্ক্রিনে এই মানগুলো আঁকার জন্য ফাংশন তৈরি করুন:

      function drawLife() {
        // TODO, 35, 27
        const START_POS = canvas.width - 180;
        for(let i=0; i < hero.life; i++ ) {
          ctx.drawImage(
            lifeImg, 
            START_POS + (45 * (i+1) ), 
            canvas.height - 37);
        }
      }
      
      function drawPoints() {
        ctx.font = "30px Arial";
        ctx.fillStyle = "red";
        ctx.textAlign = "left";
        drawText("Points: " + hero.points, 10, canvas.height-20);
      }
      
      function drawText(message, x, y) {
        ctx.fillText(message, x, y);
      }
      
      

   3. সবকিছু আপনার গেম লুপে সংযুক্ত করুন। এই ফাংশনগুলোকে আপনার window.onload ফাংশনে updateGameObjects() এর ঠিক পরে যোগ করুন:

      drawPoints();
      drawLife();
      

6. গেমের পরিণতি এবং পুরস্কার বাস্তবায়ন করুন। এখন আমরা প্রতিক্রিয়া ব্যবস্থা যোগ করব যা খেলোয়াড়ের ক্রিয়াগুলোকে অর্থবহ করে তোলে:

   1. সংঘর্ষে জীবন হারানো। প্রতিবার আপনার হিরো শত্রুর সাথে সংঘর্ষ করলে একটি জীবন হারানো উচিত।

      আপনার Hero ক্লাসে এই মেথডটি যোগ করুন:

      decrementLife() {
        this.life--;
        if (this.life === 0) {
          this.dead = true;
        }
      }
      

   2. শত্রুদের গুলি করলে পয়েন্ট অর্জন। প্রতিটি সফল আঘাত ১০০ পয়েন্ট প্রদান করে, সঠিকভাবে গুলি করার জন্য তাৎক্ষণিক ইতিবাচক প্রতিক্রিয়া প্রদান করে।

      আপনার Hero ক্লাসে এই ইনক্রিমেন্ট মেথডটি প্রসারিত করুন:

        incrementPoints() {
          this.points += 100;
        }
      

      এখন এই ফাংশনগুলোকে আপনার সংঘর্ষ ইভেন্টের সাথে সংযুক্ত করুন:

      eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
         first.dead = true;
         second.dead = true;
         hero.incrementPoints();
      })
      
      eventEmitter.on(Messages.COLLISION_ENEMY_HERO, (_, { enemy }) => {
         enemy.dead = true;
         hero.decrementLife();
      });
      

✅ জাভাস্ক্রিপ্ট এবং ক্যানভাস দিয়ে তৈরি অন্যান্য গেম সম্পর্কে কৌতূহলী? কিছু অনুসন্ধান করুন - আপনি যা সম্ভব তা দেখে অবাক হতে পারেন!

এই বৈশিষ্ট্যগুলো বাস্তবায়নের পরে, আপনার গেমটি পরীক্ষা করুন এবং সম্পূর্ণ প্রতিক্রিয়া ব্যবস্থা কার্যকর কিনা তা দেখুন। আপনি নিচের ডান কোণে জীবন আইকন, নিচের বাম কোণে আপনার স্কোর দেখতে পাবেন এবং দেখবেন কিভাবে সংঘর্ষে জীবন কমে যায় এবং সফল শট স্কোর বাড়ায়।

আপনার গেম এখন সেই মৌলিক মেকানিক্সগুলো ধারণ করে যা প্রাথমিক আর্কেড গেমগুলোকে এত আকর্ষণীয় করে তুলেছিল - স্পষ্ট লক্ষ্য, তাৎক্ষণিক প্রতিক্রিয়া, এবং খেলোয়াড়ের ক্রিয়াগুলোর জন্য অর্থবহ পরিণতি।

---

GitHub Copilot Agent Challenge 🚀

Agent মোড ব্যবহার করে নিম্নলিখিত চ্যালেঞ্জ সম্পন্ন করুন:

বর্ণনা: স্পেস গেমের স্কোরিং সিস্টেম উন্নত করুন একটি উচ্চ স্কোর বৈশিষ্ট্য, স্থায়ী স্টোরেজ এবং বোনাস স্কোরিং মেকানিক্স বাস্তবায়ন করে।

প্রম্পট: একটি উচ্চ স্কোর সিস্টেম তৈরি করুন যা খেলোয়াড়ের সেরা স্কোরটি localStorage-এ সংরক্ষণ করে। ধারাবাহিক শত্রু হত্যার জন্য বোনাস পয়েন্ট (কম্বো সিস্টেম) যোগ করুন এবং বিভিন্ন শত্রু প্রকারের জন্য বিভিন্ন পয়েন্ট মান বাস্তবায়ন করুন। খেলোয়াড় নতুন উচ্চ স্কোর অর্জন করলে একটি ভিজ্যুয়াল ইঙ্গিত যোগ করুন এবং গেম স্ক্রিনে বর্তমান উচ্চ স্কোর প্রদর্শন করুন।

🚀 চ্যালেঞ্জ

আপনার এখন স্কোরিং এবং জীবনের সাথে একটি কার্যকরী গেম রয়েছে। খেলোয়াড়ের অভিজ্ঞতা উন্নত করতে আরও কোন বৈশিষ্ট্য যোগ করা যেতে পারে তা বিবেচনা করুন।

পোস্ট-লেকচার কুইজ

পোস্ট-লেকচার কুইজ

পর্যালোচনা এবং স্ব-অধ্যয়ন

আরও অন্বেষণ করতে চান? গেম স্কোরিং এবং জীবন ব্যবস্থার বিভিন্ন পদ্ধতি নিয়ে গবেষণা করুন। PlayFab এর মতো আকর্ষণীয় গেম ইঞ্জিন রয়েছে যা স্কোরিং, লিডারবোর্ড এবং খেলোয়াড়ের অগ্রগতি পরিচালনা করে। এমন কিছু একীভূত করলে আপনার গেমটি পরবর্তী স্তরে নিয়ে যেতে পারে তা কল্পনা করুন।

অ্যাসাইনমেন্ট

স্কোরিং গেম তৈরি করুন

---

অস্বীকৃতি:
এই নথিটি AI অনুবাদ পরিষেবা Co-op Translator ব্যবহার করে অনুবাদ করা হয়েছে। আমরা যথাসাধ্য সঠিকতার জন্য চেষ্টা করি, তবে অনুগ্রহ করে মনে রাখবেন যে স্বয়ংক্রিয় অনুবাদে ত্রুটি বা অসঙ্গতি থাকতে পারে। মূল ভাষায় থাকা নথিটিকে প্রামাণিক উৎস হিসেবে বিবেচনা করা উচিত। গুরুত্বপূর্ণ তথ্যের জন্য, পেশাদার মানব অনুবাদ সুপারিশ করা হয়। এই অনুবাদ ব্যবহারের ফলে কোনো ভুল বোঝাবুঝি বা ভুল ব্যাখ্যার জন্য আমরা দায়বদ্ধ নই।