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

কোড যোগ করুন

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. লাইফ এবং পয়েন্ট যোগ করুন।

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

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

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

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

---

🚀 চ্যালেঞ্জ

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

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

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

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

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

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

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

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