মূল বিষয়বস্তু
কম্পিউটার প্রোগ্রামিং
কোর্স: কম্পিউটার প্রোগ্রামিং > অধ্যায় 4
পাঠ 4: সাইড স্ক্রলার তৈরী করা: লাফানো ভোঁদড়বনের পরিবেশ তৈরি করা
এই গেমটি হল একটি 2D (দ্বিমাত্রিক) "side-scroller"(সাইড স্ক্রোলিং) গেম: এর মানে হল আমরা গেমটিকে শুধু একপাশ থেকেই দেখছি এবং ভোঁদড়ের প্রতিকৃতি শুধু সামনে অথবা পেছনে যেতে পারে। কিন্তু আমরা চাই আমাদের প্রতিকৃতি যেন পর্দার কেন্দ্রে থাকে, এজন্য, আমরা আসলে background (পেছনের দৃশ্য) কে গতিশীল করি যার কারণে মনে হয় যেন প্রতিকৃতিই নড়ছে। এটা একটি অসাধারন উপায় এবং এটা চমৎকার কাজ করে!
শুরু করার জন্য, স্থির অংশগুলো আঁকি, যেমন নীল আকাশ ও নিচের মাটিঃ
draw = function() {
background(227, 254, 255);
fill(130, 79, 43);
rect(0, height*0.90, width, height*0.10);
// ...
}
এখন সাইড স্ক্রোলিংকে দৃষ্টান্ত করার জন্য, ঘাস (grass) যোগ করি, আমরা ঘাসের চিত্র image লাইব্রেরী থেকে নেই। পেছনের দৃশ্যকে গতিশীল করার জন্য আমরা ক্যানভাসকে 3000 পিক্সেল প্রসস্ত করতে পারি এবং এটিই আমাদের লেভেলের প্রশস্ততা ছিল, 3000 পিক্সেলে একটির পর একটি যে কয়টি ঘাস আঁকানো সম্ভব তা আমরা আঁকতে পারি। কিন্তু, এটা বেশি কার্যকরী নয় এবং গেম প্রোগ্রামিং এর ক্ষেত্রে, অবশ্যই কার্যকারিতার দিকে খেয়াল রাখতে হবে। এজন্য, আমরা ঘাসের চিত্র নিয়ে "tile" (টাইল) এর মত করে "snake" (সাপ) আকৃতির মত তৈরি করবো। আমরা পর্দায় 400 পিক্সেল পর্যন্ত যতগুলো সম্ভব ঘাস আঁকবো এবং যখন একটি চিত্র পর্দার বামদিক দিয়ে পড়ে যায়, আমরা তৎক্ষণাৎ আরেকটি চিত্র পর্দার ডানদিকে যোগ করে দেবো, আর এরকমই চলতে থাকবে।
এটা করার জন্য, আমরা ঘাসের (grass) অংশগুলোর প্রাথমিক অবস্থান অ্যারেতে সংজ্ঞায়িত করবোঃ
var grassXs = [];
for (var i = 0; i < 25; i++) {
grassXs.push(i*20);
}
তারপর, draw (আঁকানোর ফাংশন) এর লুপের মধ্যে প্রত্যেকটিকে আঁকবোঃ
for (var i = 0; i < grassXs.length; i++) {
image(getImage("cute/GrassBlock"), grassXs[i], height*0.85, 20, 20);
}
স্থির দৃশ্যের জন্য এটা খুবই ভালো হয়েছে, কিন্তু আমাদের এটা গতিশীল করা দরকার! যাতে আমরা বামদিকে ঘাসগুলো 1 পিক্সেল সরিয়ে, একটি করে ঘাসের অবস্থানকে বিয়োগ করতে পারি।
for (var i = 0; i < grassXs.length; i++) {
image(getImage("cute/GrassBlock"), grassXs[i], height*0.85, 20, 20);
grassXs[i] -= 1;
}
এখন ঘাস (grass) গতিশীল হবে, কিন্তু যতই x এর মান ঋণাত্মক হতে থাকবে, এটা ক্রমান্বয়ে দৃষ্টির বাহিরে চলে যাবে। লক্ষ্য রাখতে হবে, আমরা "সাপের" মত করে টাইলগুলো বসাতে চাই - বামদিক দিয়ে পড়ে গেলে আমরা চাই যেন ক্যানভাসের ডানদিকে টাইল যোগ হয়। এটা করার জন্য, পেছনের দৃশ্যটি পর্দার বাহিরে রয়েছে কিনা দেখতে হবে (লক্ষ্য করি যে আমাদের চিত্রগুলো বামদিকের কোণায় ছিল) এবং x কে ক্যানভাসের প্রস্থের সমান করলেঃ
for (var i = 0; i < grassXs.length; i++) {
image(getImage("cute/GrassBlock"), grassXs[i], height*0.85, 20, 20);
grassXs[i] -= 1;
if (grassXs[i] <= -20) {
grassXs[i] = width;
}
}
সব কোড একসাথে করলে আমরা দেখবো যে, ভোঁদড়টি গতিশীল হয়েছে এবং লাফ দিতে পারছে। ব্যাপারটা যাদুকরী!
ঠিক আছে, এখন আমাদের গেমে একটি ভোঁদড় একটি দৃশ্যের মধ্যে আছে। কিন্তু ভোঁদড়টির এখানে কোন কিছু করার লক্ষ্য নেই! সংগ্রহ করার জন্য ভোঁদড়ের সাথে কয়েকটি লাঠি (stick) তৈরি করতে হবে।
লাঠি তৈরি নিয়ে একটু চিন্তা করা যাক, দেখি কীভাবে আমরা এটা প্রোগ্রাম করবোঃ
- প্রতিটি লাঠির x এবং y অবস্থান আছে। আমরা চাই, যেন x অবস্থানের কোন একটি মান থাকে (হয়তো কোন ধ্রুবক মান অথবা যে কোন সংখ্যা) এবং y অবস্থানের জন্যও যেন একটি মান থাকে, যাতে ব্যবহারকারী ভোঁদড়কে লাফ দেওয়াতে পারে।
- লাঠি এবং ঘাসের গতি একই রকম হতে হবে, কিন্তু কখনই যেন সাপের টাইলের মত (দৃশ্যের সাথে পুনরায় চলমান) না হয়। যখনই লাঠি পর্দার বাহিরে চলে যাবে, এটাকে বাদ দিয়ে দিতে হবে।
- প্রতিটি লেভেলের জন্য কয়েকটি নির্দিষ্ট পরিমাণের লাঠি থাকতে হবে - এছাড়াও কোন এক সময়, লাঠিগুলো আর তৈরি হবে না।
লাঠিগুলো কোড করার অনেক পদ্ধতি আছে, কিন্তু সবগুলো পদ্ধতিই জটিল, যেভাবে আমরা ভোঁদড় তৈরি করেছিলাম, একইভাবে এটাকেও অবজেক্টে রূপান্তর করিঃ
var Stick = function(x, y) {
this.x = x;
this.y = y;
};
Stick.prototype.draw = function() {
fill(89, 71, 0);
rect(this.x, this.y, 5, 40);
};
তারপর, গেম শুরু হওয়ার আগে - যেভাবে আমরা ভোঁদড়কে তৈরি করেছিলাম - আমরা ধ্রুবক মানের অফসেট এবং যে কোন মানের y নিয়ে 40 টি লাঠির (sticks) অ্যারে তৈরি করবোঃ
var sticks = [];
for (var i = 0; i < 40; i++) {
sticks.push(new Stick(i * 40 + 300, random(20, 260)));
}
এখন আমরা লাঠি আঁকতে পারবো - যেভাবে ঘাস এঁকেছিলাম কিন্তু পর্দার চারিদিকে জড়াবো নাঃ
for (var i = 0; i < sticks.length; i++) {
sticks[i].draw();
sticks[i].x -= 1;
}
উপরের কোড থেকে লাঠি আঁকা হয়। লাফ দেওয়ার চেষ্টা করে দেখা যাক! কি হয়? কিছুই না! আমরা এটা শীঘ্রই ঠিক করবো...
আলোচনায় অংশ নিতে চাও?
কোন আলাপচারিতা নেই।