2D breakout game using pure JavaScript

This article needs an editorial review. How you can help.

This translation is incomplete. Please help translate this article from English.

এই টিউটোরিয়ালে আমরা ধাপে ধাপে শিখব একটি সাধারণ  MDN Breakout game যেটা লেখা হয়েছে পুরোপুরি জাভাস্ক্রিপ্ট দিয়ে এবং HTML5 এ দেখানো হয়েছে। <canvas>.

প্রত্যেকটি ধাপে রয়েছে সম্পাদনাযোগ্য, সরাসরি দেখার নমুনা যা দিয়ে আপনি মধ্যবর্তী পর্যায়ে কি হতে পারে দেখতে পারেন।  <canvas> এলিমেন্ট ব্যবহার করে আপনি কিছু অপরিহার্য খেলার কার্যকারিতা, ছবি গুলিকে দেখানো এবং চলমান করার, কোথায় একটির সঙ্গে আরেকটি বস্তুর সংঘর্ষ ঘটছে সেটা বুঝতে পারা, কিভাবে এই কাজ গুলি হয়, প্রভৃতি সম্পর্কে  প্রাথমিক জ্ঞান অর্জন করতে পারেন।

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

Gameplay screen from the game MDN Breakout where you can use your paddle to bounce the ball and destroy the brick field, with keeping the score and lives.

পাঠের বিবরণ

সকল পাঠ — এবং MDN ব্রেকআউট খেলার বিভিন্ন সংস্করণ আমরা একসঙ্গে যেটা নির্মাণ করছি — সেগুলি GitHub থেকে পাওয়া:

  1. ক্যানভাস তৈরি করা এবং এটি উপর আঁকা
  2. বল সরান
  3. দেয়ালে বাড়ি খাওয়া
  4. Paddle এবং keyboard নিয়ন্ত্রণ
  5. খেলা সমাপ্ত
  6. ইট তৈরী করা
  7. সংঘর্ষ সনাক্তকরণ
  8. স্কোর গণনা এবং জয়লাভ
  9. Mouse নিয়ন্ত্রণ
  10. চূড়ান্ত স্পর্শ

বিসুদ্ধ জাভাস্ক্রিপ্ট দিয়ে ওয়েব গেম নির্মান হল প্রখর জ্ঞান অর্জনের অন্যতম পথ. তারপর, আপনি যে কোন ফ্রেমওয়ার্ক নিজের প্রোজেক্ট এ ব্যবহার করতে পারেন। Frameworks হল সাধনী যেগুলি বিশুদ্ধ জাভাস্ক্রিপ্ট দিয়ে তৈরি; যদি আপনি সেগুলি দিয়ে কাজ করার পরিকল্পনা করে থাকেন তাহলে সর্বপ্রথম  সেই ভাষাটাকে ভালভাবে শিখে নেয়া আরও বেশি কার্যকর কারণ আপনি বুঝতে পারবেন আসলে কি হচ্ছে। ফ্রেমওয়ার্ক উন্নয়নের গতি বাড়ায় এবং এটা গেমের বিরক্তিকর অংশের যত্ন নিতে সাহায্য করে, কিন্তু অনেকসময় এটা তেমন আশানুরূপ কাজ করেনা, আপনি সর্বদা সেটাকে ডেবাগ করতে পারেন অথবা নিজস্ব সমাধান লিখে ফেলতে পারেন বিশুদ্ধ জাভাস্ক্রিপ্ট দিয়েই।

Note: If you are interested in learning about 2D web game development using a game library, consult this series' counterpart, 2D breakout game using Phaser.

Note: This series of articles can be used as material for hands-on game development workshops. You can also make use of the Gamedev Canvas Content Kit based on this tutorial if you want to give a talk about game development in general.

পরবর্তি ধাপ

তাহলে শুরু করা যাক আমাদের প্রথম টিউটোরিয়াল দিয়ে— ক্যানভাস তৈরি করা এবং এটির উপর আঁকা.