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);

✅ ক্যানভাসে টেক্সট যোগ করার পদ্ধতি সম্পর্কে আরও পড়ুন এবং আপনারটি আরও আকর্ষণীয় করে তুলুন!

জীবন, একটি গেম ধারণা হিসেবে

গেমে জীবনের ধারণা কেবল একটি সংখ্যা। মহাকাশ গেমের প্রেক্ষাপটে, সাধারণত একটি নির্দিষ্ট সংখ্যক জীবন দেওয়া হয় যা আপনার জাহাজ ক্ষতিগ্রস্ত হলে একে একে কমে যায়। এটি আরও ভালো হয় যদি আপনি এটি একটি গ্রাফিক্যাল উপস্থাপনার মাধ্যমে দেখাতে পারেন, যেমন ছোট জাহাজ বা হৃদয় চিহ্নের মাধ্যমে, শুধুমাত্র একটি সংখ্যার পরিবর্তে।

কী তৈরি করবেন

আপনার গেমে নিম্নলিখিতগুলি যোগ করুন:

• গেম স্কোর: প্রতিটি শত্রু জাহাজ ধ্বংস করার জন্য, নায়ককে কিছু পয়েন্ট দেওয়া উচিত। আমরা প্রতি জাহাজের জন্য ১০০ পয়েন্ট প্রস্তাব করছি। গেম স্কোরটি নিচের বাম কোণে দেখানো উচিত।
• জীবন: আপনার জাহাজের তিনটি জীবন থাকবে। প্রতিবার একটি শত্রু জাহাজ আপনার সাথে সংঘর্ষ করলে একটি জীবন হারাবেন। একটি জীবন স্কোর নিচের ডান কোণে প্রদর্শিত হওয়া উচিত এবং এটি নিম্নলিখিত গ্রাফিক দিয়ে তৈরি হবে ।

প্রস্তাবিত ধাপসমূহ

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 ঠিকানায় একটি HTTP সার্ভার চালু করবে। একটি ব্রাউজার খুলুন এবং এই ঠিকানাটি প্রবেশ করান। এখন এটি নায়ক এবং সমস্ত শত্রুদের রেন্ডার করবে এবং আপনি যখন বাম এবং ডান তীর চিহ্ন চাপবেন, নায়ক চলবে এবং শত্রুদের গুলি করতে পারবে।

কোড যোগ করুন

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

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

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

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

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

4. updateGameObjects() ফাংশন প্রসারিত করুন। শত্রুদের সাথে সংঘর্ষ পরিচালনা করার জন্য updateGameObjects() ফাংশন প্রসারিত করুন:

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

5. life এবং points যোগ করুন।

   1. ভেরিয়েবল ইনিশিয়ালাইজ করুন। Hero ক্লাসে this.cooldown = 0 এর নিচে life এবং points সেট করুন:

      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. গেম লুপে মেথড যোগ করুন। নিশ্চিত করুন যে আপনি এই ফাংশনগুলি updateGameObjects() এর নিচে window.onload ফাংশনে যোগ করেছেন:

      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();
      });
      

✅ গবেষণা করুন এবং আবিষ্কার করুন অন্যান্য গেম যা JavaScript/Canvas ব্যবহার করে তৈরি করা হয়েছে। তাদের সাধারণ বৈশিষ্ট্য কী?

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

---

🚀 চ্যালেঞ্জ

আপনার কোড প্রায় সম্পূর্ণ। আপনি কি আপনার পরবর্তী ধাপগুলি কল্পনা করতে পারেন?

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

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

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

গেম স্কোর এবং জীবন বাড়ানো এবং কমানোর কিছু উপায় গবেষণা করুন। PlayFab এর মতো কিছু আকর্ষণীয় গেম ইঞ্জিন রয়েছে। এগুলোর একটি ব্যবহার করলে কীভাবে আপনার গেম উন্নত হবে?

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

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

---

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