কিছু নস্টালজিয়া পুনরুজ্জীবিত করুন: HTML5 এর ক্যানভাস এপিআই এবং জাভাস্ক্রিপ্ট ব্যবহার করে স্নেক গেম পুনরায় তৈরি করা

আপনি যদি বিখ্যাত স্নেক গেমটি না খেলে থাকেন তবে আপনার হাত বাড়ান!

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

এবং এখনও, এমন একটি সময় ছিল যখন স্নেক গেমটি এমন একটি গেম ছিল যা সমস্ত সেল ফোন মালিকরা খেলতে অত্যধিক সময় ব্যয় করত। হ্যাঁ, তখন আমরা স্মার্টফোনের কথা বলছি না, শুধু টেলিফোনের কথা বলছি।

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

যারা এই গেমটির জন্য নস্টালজিক – এবং আমি তাদের একজন, আমাকে অবশ্যই স্বীকার করতে হবে – এই টিউটোরিয়ালটি আপনাকে শেখাবে কিভাবে ওয়েবের জন্য এটি পুনরায় তৈরি করতে হয়। এটি করতে, আমি HTML5 এর Canvas API এবং JavaScript ব্যবহার করব।

জাভাস্ক্রিপ্টে ক্লাসগুলি কীভাবে ব্যবহার করতে হয় এবং ওয়েব গেমগুলির জন্য একটি কার্যকর গেম লুপ তৈরি করতে হয় তা শেখারও এটি একটি সুযোগ।

আমাদের স্নেক গেমের জন্য ওয়েব পেজ তৈরি করা হচ্ছে

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

এর জন্য, আমি একটি নির্দিষ্ট প্রস্থ প্রয়োগ করে এই ডিভগুলিকে কেন্দ্রে একটি সামান্য CSS যোগ করব:

স্নেক ক্লাসের ডিজাইন

আমি এই টিউটোরিয়ালের ভূমিকায় যেমন ব্যাখ্যা করেছি, আমি গেমটির মডেল করার জন্য একটি ডেডিকেটেড স্নেক ক্লাস ব্যবহার করতে যাচ্ছি। এটি আপনাকে জাভাস্ক্রিপ্টে ক্লাসগুলি কীভাবে পরিচালনা করতে হয় তা আবিষ্কার করার অনুমতি দেবে।

আমাদের সাপের নিম্নলিখিত বৈশিষ্ট্য থাকবে:

• bw এবং bh যথাক্রমে প্রস্থ এবং উচ্চতায় বোর্ডের আকার উপস্থাপন করে।
• nbx এবং nby বোর্ডের জন্য উপলব্ধ কক্ষের সংখ্যা উপস্থাপন করে।
• প্রস্থ এবং উচ্চতায় একটি সাপের উপাদানের আকার উপস্থাপন করতে eltw এবং elth ।
• dirx এবং diry যা সাপের স্থানচ্যুতি ভেক্টর প্রতিনিধিত্ব করে।
• marginx এবং marginy স্নেক উপাদানগুলির প্রস্থ এবং উচ্চতায় একটি ছোট মার্জিন যোগ করে যাতে খেলোয়াড় প্রতিটি সাপের উপাদানের মধ্যে সীমানা দেখতে পারে।
• keyup , keydown , keyleft , keyright যা একটি নির্দিষ্ট মুহূর্তে চলমান তীরগুলির অবস্থা সংরক্ষণ করে৷
• startftps গেমের শুরুতে সাপটিকে সরানোর জন্য প্রয়োজনীয় ফ্রেমের সংখ্যা প্রতি সেকেন্ডে সংরক্ষণ করে।

কনস্ট্রাক্টরের শেষে, খেলার শুরুতে সাপকে ইনিশিয়ালাইজ করার জন্য একটি init পদ্ধতি বলা হয়। যখন একটি নতুন গেম শুরু করতে হবে, তখন কেবল এই init পদ্ধতিটিকে আবার কল করুন।

এটি আমাদের স্নেক ক্লাসের জন্য নিম্নলিখিত কোড দেয়:

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

যেহেতু fps প্রপার্টি প্রতি সেকেন্ডে ফ্রেমের সংখ্যাকে প্রতিনিধিত্ব করে, তাই 1 সেকেন্ড (বা 1,000 মিলিসেকেন্ড) fps-এর কাঙ্খিত সংখ্যা দ্বারা ভাগ করার ফলে আমাদের একটি fpsinterval বৈশিষ্ট্য থাকা দরকার।

সাপের খেলার নীতি

স্নেক গেমের নীতিটি সহজ: আপনাকে চারটি দিকনির্দেশক তীর ব্যবহার করে সাপকে গাইড করতে হবে যাতে এটি বোর্ডে প্রদর্শিত সর্বাধিক সংখ্যক আপেল খায়। প্রতিবার যখন আপনি একটি আপেল খান, সাপটি একটি উপাদান দ্বারা বৃদ্ধি পায়। সাপ বাড়ার সাথে সাথে আপনার নিজের লেজ স্পর্শ করা এড়ানো কঠিন হবে। যদি আপনি না করেন, আপনি হারাবেন, এবং স্কোর আবার শূন্য থেকে শুরু হবে। অবশ্যই, আপনি যখনই একটি আপেল খান, আপনি একটি পয়েন্ট স্কোর করেন।

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

যেহেতু সাপকে একটি আপেল খেতে হয়, তাই আমাদের এই আপেলটিকে বোর্ডে এলোমেলোভাবে প্রদর্শন করতে হবে, যাতে সাপের কোনো উপাদানে সরাসরি আপেল তৈরি না হয় সেদিকে খেয়াল রাখতে হবে।

এটি আমাদের স্নেক ক্লাসের জন্য নিম্নলিখিত তৈরি খাবারের পদ্ধতি দেয়:

স্নেক অন-স্ক্রিন রেন্ডারিং

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

স্ক্রিনে স্নেক রেন্ডার করতে, আমি HTML5 এর Canvas API ব্যবহার করছি।

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

এটি আমাদের স্নেক ক্লাসের ড্র পদ্ধতির জন্য নিম্নলিখিত কোড দেয়:

সাপ সরানো

আমাদের কাছে এখন একটি সাপ আছে যা আমরা পর্দায় প্রদর্শন করতে পারি। এই সব খুব ভাল, কিন্তু আমাদের সাপের আন্দোলনের জন্য সমর্থন যোগ করতে হবে। উপরে যেমন ব্যাখ্যা করা হয়েছে, সাপটি স্থানাঙ্ক ভেক্টর (dirx, diry) বরাবর চলে। সুতরাং, প্রতিবার যখন আমরা সরানোর পদ্ধতিটি বলি যা আমি এখানে সংজ্ঞায়িত করতে যাচ্ছি, সাপটি একই পরিমাণে নড়াচড়া করবে।

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

1. সাপের উপাদানগুলিতে একটি উপাদান যোগ করুন। এই উপাদানটি নতুন লেজ হয়ে যায়।
2. জেনারেটফুড কল করে একটি নতুন আপেল তৈরি করুন।
3. প্লেয়ারে একটি পয়েন্ট যোগ করুন।
4. যদি প্লেয়ার একটি স্তর অতিক্রম করে, তাহলে আমরা সাপের গতি বাড়ানোর জন্য প্রতি সেকেন্ডে প্রদর্শিত ফ্রেমের সংখ্যা আপডেট করি।

তবুও, সরানোর পদ্ধতিতে, আমাদের চেক করতে হবে যে প্লেয়ারটি মাথা দিয়ে সাপের একটি উপাদান স্পর্শ করার ভুল করেনি। এই যদি হয়, খেলা হারিয়ে, এবং আমরা নতুন করে শুরু! এটি করার জন্য, আমরা উপরে উপস্থাপিত স্নেক ক্লাসের init পদ্ধতিকে কল করি।

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

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

এটি আমাদের সরানোর পদ্ধতির জন্য নিম্নলিখিত কোড দেয়:

আমাদের স্নেক গেমের গেমলুপ

আমাদের সাপ পর্দায় প্রদর্শিত হতে পারে. আমাদের সাপকে এর মুভ পদ্ধতি বলে সরানো যায়। আমরা কি অনুপস্থিত?

আমরা আমাদের গেমের GameLoop বাস্তবায়ন মিস করছি!

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

এটি করার জন্য, আমরা স্ট্যান্ডার্ড জাভাস্ক্রিপ্ট অবজেক্ট উইন্ডোর অনুরোধ অ্যানিমেশনফ্রেম পদ্ধতি ব্যবহার করব। ব্রাউজারটি তখন কম্পিউটার বা স্মার্টফোনে যে ওয়েব পৃষ্ঠাটি ব্যবহার করা হবে তার জন্য এটি সমর্থন করতে পারে এমন সর্বাধিক fps মানিয়ে নেবে।

আমাদের গেমলুপ পদ্ধতির মধ্যে, আমরা তারপরে ব্রাউজার দ্বারা সমর্থিত fps সংখ্যাকে আমরা আমাদের সাপ সরাতে চাই fps সংখ্যা থেকে সাজিয়ে দেব। আমরা যখন আগে সংজ্ঞায়িত fps সীমার মধ্যে থাকি তখনই আমরা সরানো এবং আঁকার পদ্ধতিগুলিকে কল করব।

চারটি দিকনির্দেশক কীগুলির অবস্থা অনুসারে সাপের চলাচল ভেক্টরের স্থানাঙ্কগুলি আপডেট করা গুরুত্বপূর্ণ: উপরে, নীচে, বাম এবং ডান।

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

সাপের সাথে ব্যবহারকারীর মিথস্ক্রিয়া পরিচালনা করা

প্লেয়ার দ্বারা চাপানো দিকনির্দেশক কীগুলি অনুসারে সাপটিকে সরানো সক্ষম করতে, আমরা কীডাউন এবং কীআপ ইভেন্টগুলি ব্যবহার করি। এই প্রতিটি ইভেন্টের জন্য, আমরা স্নেক ক্লাসের একটি পদ্ধতিকে কল করব। যৌক্তিকভাবে, এটি কীডাউন ইভেন্টের জন্য প্রেসডাউন হবে এবং কী-আপ ইভেন্টের জন্য প্রেসআপ হবে।

প্লেয়ার এই কীগুলির সাথে যা করে তার অনুসারে আমরা লিঙ্কযুক্ত স্নেক ক্লাসের বৈশিষ্ট্যগুলির মান আপডেট করি। আপনি দেখতে পাচ্ছেন, আমরা সরাসরি সাপের অবস্থান আপডেট করে গেমটি ব্লক করি না। পরিবর্তে, আমরা গেমলুপ পদ্ধতিতে স্টেট আপডেট করি, যা নিয়মিত বিরতিতে বলা হয়।

বিভিন্ন স্নেক উপাদান একত্রিত করা

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

কীডাউন এবং কীআপ ইভেন্টের জন্য ইভেন্ট শ্রোতাদের যোগ করুন।

অবশেষে, গেমটি শুরু করার জন্য আমাদের স্নেকের গেমলুপকে একবার কল করতে বাকি আছে। এটি আমাদের ক্যানভাস API এবং নরক HTML5/জাভাস্ক্রিপ্ট ওয়েব দম্পতি দিয়ে তৈরি বিখ্যাত স্নেক গেমের জন্য নিম্নলিখিত সম্পূর্ণ কোড দেয়:

আমাদের স্নেক গেম ইন অ্যাকশন

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

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

ইউটিউবে এই টিউটোরিয়ালটি দেখুন

এই টিউটোরিয়ালটি ইউটিউবেও SSaurel চ্যানেলে দেখা যেতে পারে:

এছাড়াও এখানে প্রকাশিত.