32 KiB

Raw Blame History Unescape Escape

স্পেস গেম তৈরি করুন পার্ট ৬: শেষ এবং পুনরায় শুরু

প্রতিটি চমৎকার গেমের জন্য স্পষ্ট শেষের শর্ত এবং একটি মসৃণ পুনরায় শুরু করার ব্যবস্থা প্রয়োজন। আপনি ইতিমধ্যে একটি চিত্তাকর্ষক স্পেস গেম তৈরি করেছেন যেখানে রয়েছে চলাচল, যুদ্ধ এবং স্কোরিং - এখন এটি সম্পূর্ণ করার জন্য চূড়ান্ত অংশগুলি যোগ করার সময়।

আপনার গেমটি বর্তমানে অনির্দিষ্টকালের জন্য চলতে থাকে, ঠিক যেমন ১৯৭৭ সালে নাসা দ্বারা উৎক্ষেপিত ভয়েজার প্রোবগুলি - যা এখনও কয়েক দশক ধরে মহাকাশে ভ্রমণ করছে। যদিও মহাকাশ অনুসন্ধানের জন্য এটি ঠিক আছে, গেমগুলির জন্য সংজ্ঞায়িত শেষের পয়েন্ট প্রয়োজন যা সন্তোষজনক অভিজ্ঞতা তৈরি করে।

আজ, আমরা সঠিক জয়/পরাজয়ের শর্ত এবং একটি পুনরায় শুরু করার ব্যবস্থা বাস্তবায়ন করব। এই পাঠের শেষে, আপনার একটি পরিপূর্ণ গেম থাকবে যা খেলোয়াড়রা সম্পন্ন করতে এবং পুনরায় খেলতে পারবে, ঠিক সেই ক্লাসিক আর্কেড গেমগুলির মতো যা মাধ্যমটিকে সংজ্ঞায়িত করেছে।

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

গেমের শেষের শর্ত বুঝুন

আপনার গেমটি কখন শেষ হওয়া উচিত? এই মৌলিক প্রশ্নটি প্রাথমিক আর্কেড যুগ থেকে গেম ডিজাইনকে আকৃতির করেছে। প্যাক-ম্যান শেষ হয় যখন আপনি ভূত দ্বারা ধরা পড়েন বা সমস্ত বিন্দু পরিষ্কার করেন, আর স্পেস ইনভেডার্স শেষ হয় যখন এলিয়েনরা নিচে পৌঁছায় বা আপনি তাদের সবাইকে ধ্বংস করেন।

গেম নির্মাতা হিসেবে, আপনি জয় এবং পরাজয়ের শর্ত নির্ধারণ করেন। আমাদের স্পেস গেমের জন্য, এখানে কিছু প্রমাণিত পদ্ধতি রয়েছে যা আকর্ষণীয় গেমপ্লে তৈরি করে:

N শত্রু জাহাজ ধ্বংস করা হয়েছে: এটি বেশ সাধারণ যদি আপনি গেমটিকে বিভিন্ন স্তরে ভাগ করেন যেখানে আপনাকে একটি স্তর সম্পূর্ণ করতে N শত্রু জাহাজ ধ্বংস করতে হবে।
আপনার জাহাজ ধ্বংস হয়েছে: এমন অনেক গেম রয়েছে যেখানে আপনার জাহাজ ধ্বংস হলে আপনি গেমটি হারান। আরেকটি সাধারণ পদ্ধতি হল জীবন ধারণার ব্যবহার। প্রতিবার আপনার জাহাজ ধ্বংস হলে একটি জীবন কমে যায়। সমস্ত জীবন হারিয়ে গেলে আপনি গেমটি হারান।
আপনি N পয়েন্ট সংগ্রহ করেছেন: আরেকটি সাধারণ শেষের শর্ত হল পয়েন্ট সংগ্রহ করা। আপনি কীভাবে পয়েন্ট পাবেন তা আপনার উপর নির্ভর করে, তবে শত্রু জাহাজ ধ্বংস করা বা ধ্বংস হওয়া আইটেম সংগ্রহ করার মতো বিভিন্ন কার্যকলাপে পয়েন্ট দেওয়া সাধারণ।
একটি স্তর সম্পূর্ণ করুন: এটি X শত্রু জাহাজ ধ্বংস, Y পয়েন্ট সংগ্রহ বা একটি নির্দিষ্ট আইটেম সংগ্রহের মতো বিভিন্ন শর্ত জড়িত থাকতে পারে।

গেম পুনরায় শুরু করার কার্যকারিতা বাস্তবায়ন

ভাল গেমগুলি মসৃণ পুনরায় শুরু করার ব্যবস্থার মাধ্যমে পুনরায় খেলার যোগ্যতা উৎসাহিত করে। যখন খেলোয়াড়রা একটি গেম সম্পন্ন করে (বা পরাজিত হয়), তারা প্রায়ই অবিলম্বে আবার চেষ্টা করতে চায় - হয় তাদের স্কোর হারানোর জন্য বা তাদের পারফরম্যান্স উন্নত করার জন্য।

টেট্রিস এটি নিখুঁতভাবে উদাহরণ দেয়: যখন আপনার ব্লকগুলি শীর্ষে পৌঁছায়, আপনি জটিল মেনুতে না গিয়ে অবিলম্বে একটি নতুন গেম শুরু করতে পারেন। আমরা একটি অনুরূপ পুনরায় শুরু করার ব্যবস্থা তৈরি করব যা গেমের অবস্থা পরিষ্কারভাবে রিসেট করে এবং খেলোয়াড়দের দ্রুত অ্যাকশনে ফিরিয়ে দেয়।

✅ প্রতিফলন: আপনি যে গেমগুলি খেলেছেন তা নিয়ে চিন্তা করুন। কোন শর্তে তারা শেষ হয় এবং কীভাবে আপনাকে পুনরায় শুরু করতে বলা হয়? একটি পুনরায় শুরু করার অভিজ্ঞতা মসৃণ বনাম হতাশাজনক মনে হয় কী কারণে?

আপনি কী তৈরি করবেন

আপনি চূড়ান্ত বৈশিষ্ট্যগুলি বাস্তবায়ন করবেন যা আপনার প্রকল্পকে একটি সম্পূর্ণ গেম অভিজ্ঞতায় রূপান্তরিত করে। এই উপাদানগুলি পালিশ করা গেমগুলিকে সাধারণ প্রোটোটাইপ থেকে আলাদা করে।

আজ আমরা যা যোগ করছি:

জয়ের শর্ত: সমস্ত শত্রুকে ধ্বংস করুন এবং একটি সঠিক উদযাপন পান (আপনি এটি অর্জন করেছেন!)
পরাজয়ের শর্ত: জীবন শেষ হয়ে গেলে একটি পরাজয়ের স্ক্রিনের মুখোমুখি হন
পুনরায় শুরু করার ব্যবস্থা: Enter চাপুন এবং আবার শুরু করুন - কারণ একটি গেম কখনোই যথেষ্ট নয়
অবস্থা ব্যবস্থাপনা: প্রতিবার পরিষ্কার শুরু - আগের গেম থেকে কোনো অবশিষ্ট শত্রু বা অদ্ভুত ত্রুটি নয়

শুরু করা যাক

আপনার ডেভেলপমেন্ট পরিবেশ প্রস্তুত করুন। আপনার স্পেস গেমের পূর্ববর্তী পাঠ থেকে সমস্ত ফাইল প্রস্তুত থাকা উচিত।

আপনার প্রকল্পটি দেখতে এমন কিছু হওয়া উচিত:

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

আপনার ডেভেলপমেন্ট সার্ভার শুরু করুন:

cd your-work
npm start

এই কমান্ড:

একটি স্থানীয় সার্ভার চালায় http://localhost:5000 এ
আপনার ফাইলগুলি সঠিকভাবে পরিবেশন করে
আপনি পরিবর্তন করলে স্বয়ংক্রিয়ভাবে রিফ্রেশ হয়

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

💡 প্রো টিপ: Visual Studio Code-এ সতর্কতা এড়াতে, gameLoopId আপনার ফাইলের শীর্ষে let gameLoopId; হিসাবে ঘোষণা করুন, এটি window.onload ফাংশনের ভিতরে ঘোষণা করার পরিবর্তে। এটি আধুনিক জাভাস্ক্রিপ্ট ভেরিয়েবল ঘোষণার সেরা অনুশীলন অনুসরণ করে।

বাস্তবায়নের ধাপ

ধাপ ১: শেষের শর্ত ট্র্যাকিং ফাংশন তৈরি করুন

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

function isHeroDead() {
  return hero.life <= 0;
}

function isEnemiesDead() {
  const enemies = gameObjects.filter((go) => go.type === "Enemy" && !go.dead);
  return enemies.length === 0;
}

এখানে কী ঘটছে:

পরীক্ষা করে আমাদের হিরোর জীবন শেষ হয়েছে কিনা (ওহ!)
গণনা করে কতগুলি শত্রু এখনও জীবিত এবং সক্রিয়
ফিরিয়ে দেয় true যখন যুদ্ধক্ষেত্র শত্রুদের থেকে মুক্ত
ব্যবহার করে সহজ true/false লজিক জিনিসগুলি সরল রাখতে
ফিল্টার করে সমস্ত গেম অবজেক্টের মধ্য দিয়ে বেঁচে থাকা খুঁজে পেতে

ধাপ ২: শেষের শর্তের জন্য ইভেন্ট হ্যান্ডলার আপডেট করুন

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

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

    if (isEnemiesDead()) {
      eventEmitter.emit(Messages.GAME_END_WIN);
    }
});

eventEmitter.on(Messages.COLLISION_ENEMY_HERO, (_, { enemy }) => {
    enemy.dead = true;
    hero.decrementLife();
    if (isHeroDead())  {
      eventEmitter.emit(Messages.GAME_END_LOSS);
      return; // loss before victory
    }
    if (isEnemiesDead()) {
      eventEmitter.emit(Messages.GAME_END_WIN);
    }
});

eventEmitter.on(Messages.GAME_END_WIN, () => {
    endGame(true);
});
  
eventEmitter.on(Messages.GAME_END_LOSS, () => {
  endGame(false);
});

এখানে কী ঘটছে:

লেজার শত্রুকে আঘাত করে: উভয়ই অদৃশ্য হয়ে যায়, আপনি পয়েন্ট পান এবং আমরা পরীক্ষা করি আপনি জিতেছেন কিনা
শত্রু আপনাকে আঘাত করে: আপনি একটি জীবন হারান এবং আমরা পরীক্ষা করি আপনি এখনও বেঁচে আছেন কিনা
স্মার্ট অর্ডারিং: আমরা প্রথমে পরাজয়ের জন্য পরীক্ষা করি (কেউ একসাথে জিততে এবং হারতে চায় না!)
তাৎক্ষণিক প্রতিক্রিয়া: কিছু গুরুত্বপূর্ণ ঘটার সাথে সাথে গেমটি তা জানে

ধাপ ৩: নতুন বার্তা কনস্ট্যান্ট যোগ করুন

আপনার Messages কনস্ট্যান্ট অবজেক্টে নতুন বার্তার ধরন যোগ করতে হবে। এই কনস্ট্যান্টগুলি সামঞ্জস্য বজায় রাখতে এবং আপনার ইভেন্ট সিস্টেমে টাইপো প্রতিরোধ করতে সাহায্য করে।

GAME_END_LOSS: "GAME_END_LOSS",
GAME_END_WIN: "GAME_END_WIN",

উপরের অংশে আমরা:

যোগ করেছি গেম শেষের ইভেন্টের জন্য কনস্ট্যান্টগুলি সামঞ্জস্য বজায় রাখতে
ব্যবহার করেছি বর্ণনামূলক নাম যা ইভেন্টের উদ্দেশ্য স্পষ্টভাবে নির্দেশ করে
অনুসরণ করেছি বার্তার ধরনগুলির জন্য বিদ্যমান নামকরণের নিয়ম

ধাপ ৪: পুনরায় শুরু করার নিয়ন্ত্রণ বাস্তবায়ন

এখন আপনি কীবোর্ড নিয়ন্ত্রণ যোগ করবেন যা খেলোয়াড়দের গেমটি পুনরায় শুরু করতে দেয়। Enter কী একটি স্বাভাবিক পছন্দ কারণ এটি সাধারণত ক্রিয়াগুলি নিশ্চিত করা এবং নতুন গেম শুরু করার সাথে যুক্ত।

আপনার বিদ্যমান keydown ইভেন্ট লিসেনারে Enter কী সনাক্তকরণ যোগ করুন:

else if(evt.key === "Enter") {
   eventEmitter.emit(Messages.KEY_EVENT_ENTER);
}

নতুন বার্তা কনস্ট্যান্ট যোগ করুন:

KEY_EVENT_ENTER: "KEY_EVENT_ENTER",

আপনার জানা দরকার:

আপনার বিদ্যমান কীবোর্ড ইভেন্ট পরিচালনা সিস্টেম প্রসারিত করে
Enter কী ব্যবহার করে পুনরায় শুরু করার ট্রিগার হিসাবে স্বজ্ঞাত ব্যবহারকারীর অভিজ্ঞতার জন্য
একটি কাস্টম ইভেন্ট নির্গত করে যা আপনার গেমের অন্যান্য অংশ শুনতে পারে
আপনার অন্যান্য কীবোর্ড নিয়ন্ত্রণের মতো একই প্যাটার্ন বজায় রাখে

ধাপ ৫: বার্তা প্রদর্শন ব্যবস্থা তৈরি করুন

আপনার গেমটি খেলোয়াড়দের কাছে ফলাফলগুলি স্পষ্টভাবে যোগাযোগ করতে হবে। আমরা একটি বার্তা ব্যবস্থা তৈরি করব যা বিজয় এবং পরাজয়ের অবস্থা রঙ-কোডেড টেক্সট ব্যবহার করে প্রদর্শন করে, প্রাথমিক কম্পিউটার সিস্টেমের টার্মিনাল ইন্টারফেসের মতো যেখানে সবুজ সাফল্য নির্দেশ করে এবং লাল ত্রুটি নির্দেশ করে।

displayMessage() ফাংশন তৈরি করুন:

function displayMessage(message, color = "red") {
  ctx.font = "30px Arial";
  ctx.fillStyle = color;
  ctx.textAlign = "center";
  ctx.fillText(message, canvas.width / 2, canvas.height / 2);
}

ধাপে ধাপে এখানে কী ঘটছে:

ফন্টের আকার এবং পরিবার সেট করে স্পষ্ট, পাঠযোগ্য টেক্সটের জন্য
একটি রঙ প্যারামিটার প্রয়োগ করে যেখানে সতর্কতার জন্য "লাল" ডিফল্ট
টেক্সটটি অনুভূমিক এবং উল্লম্বভাবে কেন্দ্রীভূত করে ক্যানভাসে
আধুনিক জাভাস্ক্রিপ্ট ডিফল্ট প্যারামিটার ব্যবহার করে নমনীয় রঙের বিকল্পের জন্য
ক্যানভাস 2D প্রসঙ্গ ব্যবহার করে সরাসরি টেক্সট রেন্ডারিংয়ের জন্য

endGame() ফাংশন তৈরি করুন:

function endGame(win) {
  clearInterval(gameLoopId);

  // Set a delay to ensure any pending renders complete
  setTimeout(() => {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = "black";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    if (win) {
      displayMessage(
        "Victory!!! Pew Pew... - Press [Enter] to start a new game Captain Pew Pew",
        "green"
      );
    } else {
      displayMessage(
        "You died !!! Press [Enter] to start a new game Captain Pew Pew"
      );
    }
  }, 200)  
}

এই ফাংশনটি যা করে:

সবকিছু স্থির করে - আর কোনো চলমান জাহাজ বা লেজার নেই
একটি ছোট বিরতি নেয় (২০০ms) শেষ ফ্রেমটি আঁকা শেষ করতে
স্ক্রিনটি পরিষ্কার করে এবং কালো রঙে রঙ করে নাটকীয় প্রভাবের জন্য
বিজয়ী এবং পরাজিতদের জন্য বিভিন্ন বার্তা দেখায়
রঙ কোড করে খবর - ভালো জন্য সবুজ, খারাপের জন্য লাল
খেলোয়াড়দের বলে কীভাবে আবার শুরু করতে হয়

ধাপ ৬: গেম রিসেট কার্যকারিতা বাস্তবায়ন

রিসেট সিস্টেমটি বর্তমান গেমের অবস্থা সম্পূর্ণরূপে পরিষ্কার করতে এবং একটি নতুন গেম সেশন আরম্ভ করতে হবে। এটি নিশ্চিত করে যে খেলোয়াড়রা আগের গেমের অবশিষ্ট ডেটা ছাড়াই একটি পরিষ্কার শুরু পায়।

resetGame() ফাংশন তৈরি করুন:

function resetGame() {
  if (gameLoopId) {
    clearInterval(gameLoopId);
    eventEmitter.clear();
    initGame();
    gameLoopId = setInterval(() => {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.fillStyle = "black";
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      drawPoints();
      drawLife();
      updateGameObjects();
      drawGameObjects(ctx);
    }, 100);
  }
}

প্রতিটি অংশ বুঝুন:

পরীক্ষা করে একটি গেম লুপ বর্তমানে চলছে কিনা রিসেট করার আগে
বিদ্যমান গেম লুপ পরিষ্কার করে সমস্ত বর্তমান গেম কার্যকলাপ বন্ধ করতে
সমস্ত ইভেন্ট লিসেনার সরিয়ে দেয় মেমরি লিক প্রতিরোধ করতে
তাজা অবজেক্ট এবং ভেরিয়েবল দিয়ে গেমের অবস্থা পুনরায় আরম্ভ করে
সমস্ত প্রয়োজনীয় গেম ফাংশন সহ একটি নতুন গেম লুপ শুরু করে
একই ১০০ms ইন্টারভাল বজায় রাখে ধারাবাহিক গেম পারফরম্যান্সের জন্য

আপনার initGame() ফাংশনে Enter কী ইভেন্ট হ্যান্ডলার যোগ করুন:

eventEmitter.on(Messages.KEY_EVENT_ENTER, () => {
  resetGame();
});

আপনার EventEmitter ক্লাসে clear() পদ্ধতি যোগ করুন:

clear() {
  this.listeners = {};
}

মনে রাখার মূল পয়েন্ট:

Enter কী প্রেসকে গেম রিসেট কার্যকারিতার সাথে সংযুক্ত করে
গেম আরম্ভ করার সময় এই ইভেন্ট লিসেনার নিবন্ধন করে
গেমগুলির মধ্যে ইভেন্ট হ্যান্ডলার পরিষ্কার করার জন্য একটি পরিষ্কার উপায় প্রদান করে
মেমরি লিক প্রতিরোধ করে গেমগুলির মধ্যে ইভেন্ট হ্যান্ডলার পরিষ্কার করে
তাজা আরম্ভের জন্য লিসেনার অবজেক্টটি খালি অবস্থায় রিসেট করে

অভিনন্দন! 🎉

👽 💥 🚀 আপনি মাটি থেকে একটি সম্পূর্ণ গেম সফলভাবে তৈরি করেছেন। ঠিক যেমন ১৯৭০-এর দশকে প্রথম ভিডিও গেম তৈরি করা প্রোগ্রামাররা, আপনি কোডের লাইনগুলিকে একটি ইন্টারঅ্যাক্টিভ অভিজ্ঞতায় রূপান্তরিত করেছেন যেখানে সঠিক গেম মেকানিক্স এবং ব্যবহারকারীর প্রতিক্রিয়া রয়েছে। 🚀 💥 👽

আপনি অর্জন করেছেন:

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

গিটহাব কপাইলট এজেন্ট চ্যালেঞ্জ 🚀

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

বর্ণনা: একটি স্তর অগ্রগতি ব্যবস্থা এবং বোনাস বৈশিষ্ট্য সহ স্পেস গেমটি উন্নত করুন।

প্রম্পট: একটি মাল্টি-লেভেল স্পেস গেম সিস্টেম তৈরি করুন যেখানে প্রতিটি স্তরে আরও শত্রু জাহাজ থাকবে যা বৃদ্ধি পাবে গতি এবং স্বাস্থ্য সহ। একটি স্কোরিং মাল্টিপ্লায়ার যোগ করুন যা প্রতিটি স্তরের সাথে বৃদ্ধি পায় এবং পাওয়ার-আপ (যেমন দ্রুত শুটিং বা শিল্ড) বাস্তবায়ন করুন যা শত্রু ধ্বংস হলে এলোমেলোভাবে উপস্থিত হয়। একটি স্তর সম্পূর্ণ করার বোনাস যোগ করুন এবং বিদ্যমান স্কোর এবং জীবনের পাশাপাশি স্ক্রিনে বর্তমান স্তরটি প্রদর্শন করুন।

এজেন্ট মোড সম্পর্কে আরও জানুন এখানে।

🚀 ঐচ্ছিক উন্নয়ন চ্যালেঞ্জ

আপনার গেমে অডিও যোগ করুন: আপনার গেমপ্লে অভিজ্ঞতাকে উন্নত করতে সাউন্ড ইফেক্ট বাস্তবায়ন করুন! বিবেচনা করুন নিম্নলিখিত অডিও যোগ করার জন্য:

লেজার শট যখন খেলোয়াড় গুলি চালায়
শত্রু ধ্বংস যখন জাহাজ আঘাত পায়
হিরো ক্ষতি যখন খেলোয়াড় আঘাত পায়
বিজয় সঙ্গীত যখন গেমটি জিতেছে
পরাজয়ের শব্দ যখন গেমটি হারিয়েছে

অডিও বাস্তবায়নের উদাহরণ:

// Create audio objects
const laserSound = new Audio('assets/laser.wav');
const explosionSound = new Audio('assets/explosion.wav');

// Play sounds during game events
function playLaserSound() {
  laserSound.currentTime = 0; // Reset to beginning
  laserSound.play();
}