Scratch Tutorial

স্বাগতম! তুমি যদি স্ক্র্যাচ (Scratch) শিখতে চাও, তবে এটি প্রোগ্রামিং শেখার জন্য বিশ্বের অন্যতম সেরা প্ল্যাটফর্ম। এটি মূলত ব্লক-ভিত্তিক কোডিং, যেখানে তোমাকে কোড টাইপ করতে হয় না, বরং ব্লকের টুকরোগুলো জোড়া লাগিয়ে প্রোগ্রাম তৈরি করতে হয়।

আমরা প্রতিদিন ধাপে ধাপে এটি শিখব।

প্রথম দিনের টিউটোরিয়াল: স্ক্র্যাচের সাথে পরিচিতি

আজকের লক্ষ্য হলো স্ক্র্যাচ প্ল্যাটফর্মটি কোথায় পাবে এবং এর ইন্টারফেসের কোন অংশ কী কাজ করে তা বোঝা।

১. কোথায় রান করবে? (The Platform)

স্ক্র্যাচ ব্যবহার করার দুটি উপায় আছে:

অনলাইন: সরাসরি scratch.mit.edu লিঙ্কে গিয়ে ব্রাউজারেই কোড করতে পারো।
অফলাইন: যদি ইন্টারনেট ছাড়া ব্যবহার করতে চাও, তবে ‘Scratch Desktop’ সফটওয়্যারটি ডাউনলোড করে কম্পিউটারে ইনস্টল করতে পারো।

২. স্ক্র্যাচ ইন্টারফেসের মূল অংশ

স্ক্র্যাচ খুললে তুমি ৪টি প্রধান অংশ দেখতে পাবে:

Stage (স্টেজ): ডানদিকের উপরের অংশ যেখানে তোমার তৈরি করা এনিমেশন বা গেমটি দেখা যায়। শুরুতে এখানে একটি বিড়াল (Sprite) থাকে।
Sprites (স্প্রাইট): স্টেজ-এর নিচে থাকে। তুমি যে ক্যারেক্টার বা অবজেক্ট নিয়ে কাজ করছ সেটিই হলো স্প্রাইট।
Blocks Palette (ব্লক প্যালেট): বামদিকের অংশ যেখানে বিভিন্ন রঙের কোড ব্লক থাকে (যেমন: Motion, Looks, Sound)।
Scripts Area (স্ক্রিপ্ট এরিয়া): মাঝখানের ফাঁকা জায়গা যেখানে ব্লকগুলোকে টেনে এনে (Drag and Drop) জোড়া লাগাতে হয়।

৩. আজকের হাতে-কলমে উদাহরণ (Practical Example)

চলো আজ আমরা ছোট একটি কোড তৈরি করি যাতে আমাদের বিড়ালটি ১০ ধাপ হাঁটবে এবং একটি শব্দ করবে।

ধাপগুলো অনুসরণ করো:

Events (হলুদ রঙের) ক্যাটাগরিতে ক্লিক করো। সেখান থেকে when green flag clicked ব্লকটি টেনে মাঝখানের স্ক্রিপ্ট এরিয়াতে আনো।
Motion (নীল রঙের) ক্যাটাগরিতে যাও। move 10 steps ব্লকটি টেনে এনে আগের ব্লকের ঠিক নিচে লাগিয়ে দাও।
Sound (গোলাপী রঙের) ক্যাটাগরিতে যাও। play sound Meow until done ব্লকটি আগের দুটির নিচে যুক্ত করো।

ফলাফল:

এখন স্টেজের উপরের সবুজ পতাকা (Green Flag) আইকনে ক্লিক করো। দেখবে বিড়ালটি একটু এগিয়ে গিয়ে “মিউ” ডাক দিচ্ছে।

৪. আজকের টাস্ক (Daily Task)

স্ক্র্যাচ ওয়েবসাইটটি ভিজিট করো।
উপরের তিনটি ব্লক ব্যবহার করে বিড়ালটিকে মুভ করাও।
চেষ্টা করো move 10 steps-এর জায়গায় 50 লিখে দেখতে কী পরিবর্তন হয়।

স্বাগতম দ্বিতীয় দিনের টিউটোরিয়ালে!

গতকাল আমরা শিখেছিলাম কীভাবে স্ক্র্যাচ ইন্টারফেস কাজ করে এবং একটি ছোট ব্লক ব্যবহার করে বিড়ালটিকে (Sprite) নড়াচড়া করানো যায়। আজ আমরা শিখব কীভাবে Motion (গতি) এবং Control (নিয়ন্ত্রণ) ব্যবহার করে একটি স্প্রাইটকে বারবার নড়াচড়া করানো যায় এবং তাকে স্ক্রিনের এক প্রান্ত থেকে অন্য প্রান্তে নিয়ে যাওয়া যায়।

দ্বিতীয় দিন: লুপ (Loops) এবং বাউন্স (Bounce)

আজকের লক্ষ্য হলো বিড়ালটিকে এমনভাবে প্রোগ্রাম করা যাতে সে নিজে নিজেই স্ক্রিনের এপাশ থেকে ওপাশ হাঁটাহাঁটি করে।

১. প্রয়োজনীয় ব্লকসমূহ (Key Blocks)

আজ আমাদের নিচের ব্লকগুলো প্রয়োজন হবে:

Forever (ফরেভার): এটি ‘Control’ ক্যাটাগরির একটি ব্লক। এর ভেতরে যা রাখা হয়, তা বারবার (সারাজীবন) চলতে থাকে।
If on edge, bounce: এটি ‘Motion’ ক্যাটাগরির ব্লক। এর কাজ হলো স্প্রাইটটি যদি স্ক্রিনের দেয়ালে ধাক্কা খায়, তবে তাকে উল্টো দিকে ফিরিয়ে আনা।
Set rotation style left-right: এটিও ‘Motion’ ক্যাটাগরিতে থাকে। এটি বিড়ালটিকে উল্টে যাওয়া (মাথা নিচে পা উপরে) থেকে বাঁচায়।

২. আজকের প্রাকটিক্যাল উদাহরণ (Step-by-Step)

চলো একটি এনিমেশন তৈরি করি যেখানে বিড়ালটি একনাগাড়ে হাঁটবে:

শুরু করা: প্রথমে Events থেকে when green flag clicked ব্লকটি নাও।
লুপ যোগ করা: এবার Control ক্যাটাগরিতে যাও এবং forever ব্লকটি নিয়ে গ্রিন ফ্ল্যাগ ব্লকের নিচে জোড়া লাগিয়ে দাও।
হাঁটানো: Motion থেকে move 10 steps ব্লকটি টেনে এনে forever ব্লকের পেটের ভেতরে ঢুকিয়ে দাও। (এখন ফ্ল্যাগ ক্লিক করলে দেখবে বিড়ালটি স্ক্রিনের বাইরে চলে যাচ্ছে)।
ফিরে আসা: এবার Motion থেকে if on edge, bounce ব্লকটি নিয়ে move 10 steps-এর ঠিক নিচে (ফরেভার ব্লকের ভেতরেই) রাখো।
- টিপস: এখন বিড়ালটি দেয়ালে ধাক্কা খেয়ে উল্টো হয়ে ফিরে আসবে।
সোজা রাখা: বিড়ালটি যাতে উল্টো না হয়, সেজন্য Motion থেকে set rotation style left-right ব্লকটি একদম শুরুতে (ফ্ল্যাগ ব্লকের নিচে) একবার বসিয়ে দাও।

৩. আপনার ওয়েবসাইটের জন্য প্র্যাকটিস কোড (Code Structure)

আপনি যদি এটি আপনার সাইটে দিতে চান, তবে নিচের মতো করে কোডটি সাজাতে পারেন:

Code Logic:

When Green Flag Clicked

Set rotation style [left-right]

Forever:

Move 10 steps

If on edge, bounce

৪. আজকের টাস্ক (Daily Task)

উপরের কোডটি স্ক্র্যাচ প্ল্যাটফর্মে রান করান।
move 10 steps-এর জায়গায় 20 বা 5 লিখে স্পিড পরিবর্তন করে দেখুন।
চ্যালেঞ্জ: Looks ক্যাটাগরি থেকে next costume ব্লকটি move 10 steps-এর নিচে লাগিয়ে দেখুন তো বিড়ালটি আসলেই হাঁটছে কি না (পা নাড়াচ্ছে কি না)!

স্বাগতম তৃতীয় দিনের টিউটোরিয়ালে! প্রথম দুই দিনে আমরা স্প্রাইটকে নড়াচড়া করতে এবং লুপ (Loop) ব্যবহার করতে শিখেছি। আজ আমরা আমাদের প্রজেক্টকে আরও সুন্দর করব।

আজকের মূল বিষয় হলো একাধিক স্প্রাইট (Multiple Sprites) ব্যবহার করা এবং ব্যাকড্রপ বা ব্যাকগ্রাউন্ড (Backdrop) পরিবর্তন করা।

তৃতীয় দিন: ব্যাকগ্রাউন্ড এবং একাধিক স্প্রাইটের বন্ধুত্ব

আজকের লক্ষ্য হলো একটি সুন্দর দৃশ্য তৈরি করা (যেমন একটি বাগান বা রাস্তা), যেখানে বিড়ালটি একা নয়, বরং তার সাথে অন্য কোনো বন্ধুও থাকবে।

১. নতুন কী শিখব? (New Concepts)

Choose a Backdrop: স্ক্রিনের নিচে ডানদিকের কোণায় ছবি আইকন থেকে সুন্দর একটি ব্যাকগ্রাউন্ড নেওয়া।
Choose a Sprite: বিড়াল ছাড়া অন্য কোনো ক্যারেক্টার (যেমন: কুকুর, বল বা পাখি) যুক্ত করা।
Say Block: Looks ক্যাটাগরি থেকে কথা বলার ব্লক ব্যবহার করা।

২. আজকের হাতে-কলমে প্রজেক্ট (Practical Task)

আমরা একটি দৃশ্য তৈরি করব যেখানে বিড়ালটি হাঁটতে হাঁটতে একটি বলকে দেখে “Hello!” বলবে।

ধাপগুলো অনুসরণ করো:

ব্যাকগ্রাউন্ড সেট করা: স্ক্রিনের একদম নিচে ডানদিকের ‘Choose a Backdrop’ আইকনে ক্লিক করো। সেখান থেকে ‘Blue Sky’ বা ‘Boardwalk’ সিলেক্ট করো। দেখবে পেছনের সাদা অংশটি রঙিন হয়ে গেছে।
নতুন বন্ধু আনা: ব্যাকড্রপ আইকনের পাশেই ‘Choose a Sprite’ আইকনে ক্লিক করো। সেখান থেকে একটি ‘Ball’ বা অন্য কোনো স্প্রাইট পছন্দ করো।
কোড লেখা (Cat Sprite-এর জন্য):
- Events থেকে when green flag clicked আনো।
- Motion থেকে go to x: -180 y: -100 ব্লকটি দাও (যাতে বিড়ালটি সবসময় বাম দিক থেকে শুরু করে)।
- Control থেকে repeat 20 (লুপ) ব্লকটি নাও।
- তার ভেতরে Motion থেকে move 10 steps এবং Looks থেকে next costume দাও।
কথা বলা: লুপের ঠিক নিচে (বাইরে) Looks থেকে say Hello! for 2 seconds ব্লকটি যুক্ত করো।

৩. আপনার ওয়েবসাইটের জন্য লজিক চার্ট (Website Content)

আপনি যদি এটি আপনার সাইটে দিতে চান, তবে নিচের মতো করে কোডটি সাজাতে পারেন:

Action	Category	Block Name
Start	Events	`When Green Flag Clicked`
Position	Motion	`Go to x: -180 y: -100`
Animation	Control / Motion	`Repeat 20` -> `Move 10 steps`
Interaction	Looks	`Say "Hello!" for 2 seconds`

৪. আজকের টাস্ক (Daily Task)

আপনার পছন্দমতো একটি ব্যাকগ্রাউন্ড (যেমন ‘Forest’ বা ‘Space’) যোগ করুন।
নতুন একটি স্প্রাইট (যেমন ডাইনোসর বা আপেল) যোগ করে সেটিকে স্ক্রিনের অন্য জায়গায় রাখুন।
চ্যালেঞ্জ: বিড়ালটি যখন কথা বলবে, তখন অন্য স্প্রাইটটিও যাতে উত্তর দেয় (say Hi!)—এমনভাবে কোড করার চেষ্টা করুন।
- হিন্ট: দ্বিতীয় স্প্রাইটে গিয়ে wait 2 seconds ব্লকটি ব্যবহার করতে পারেন।

স্বাগতম চতুর্থ দিনের টিউটোরিয়ালে! প্রথম তিন দিনে আমরা অটোমেটিক এনিমেশন এবং লুপ শিখেছি। আজ আমরা শিখব কীভাবে ইউজার কন্ট্রোল (User Control) তৈরি করতে হয়।

অর্থাৎ, আজ বিড়ালটি নিজে নিজে হাঁটবে না, বরং আপনি কি-বোর্ডের Arrow Keys (তীর চিহ্ন) চাপলে সে আপনার কথা মতো চলবে। এটি একটি গেম তৈরির প্রথম ধাপ!

চতুর্থ দিন: কি-বোর্ড দিয়ে স্প্রাইট নিয়ন্ত্রণ

আজকের লক্ষ্য হলো কি-বোর্ডের ৪টি অ্যারো কী (Up, Down, Left, Right) ব্যবহার করে স্প্রাইটকে স্ক্রিনের যেকোনো দিকে চালানো।

১. প্রয়োজনীয় নতুন ব্লক (New Blocks)

আজ আমরা Events ক্যাটাগরির একটি বিশেষ ব্লক ব্যবহার করব:

When [space] key pressed: এই ব্লকের ড্রপডাউন থেকে আমরা Up arrow, Down arrow ইত্যাদি সিলেক্ট করতে পারি।
Change x by / Change y by: (Motion ক্যাটাগরি)
- x পরিবর্তন করলে স্প্রাইট ডানে বা বামে যায়।
- y পরিবর্তন করলে স্প্রাইট উপরে বা নিচে যায়।

২. আজকের হাতে-কলমে প্রজেক্ট (Practical Task)

নিচের ধাপগুলো অনুসরণ করে কোডটি সাজাও:

ডানে যাওয়ার জন্য (Right):

Events থেকে when [right arrow] key pressed ব্লকটি নাও।
তার নিচে Motion থেকে set rotation style [left-right] যুক্ত করো।
তার নিচে Motion থেকে point in direction 90 দাও।
সবশেষে Motion থেকে change x by 10 ব্লকটি লাগাও।

বামে যাওয়ার জন্য (Left):

Events থেকে when [left arrow] key pressed ব্লকটি নাও।
তার নিচে Motion থেকে point in direction -90 দাও।
তার নিচে Motion থেকে change x by -10 (মনে রেখো, বামে যেতে হলে মাইনাস ১০ দিতে হয়)।

উপরে এবং নিচে যাওয়ার জন্য (Up & Down):

Up: when [up arrow] key pressed -> change y by 10
Down: when [down arrow] key pressed -> change y by -10

৩. লজিক টেবিল (আপনার ওয়েবসাইটের জন্য)

আপনার পাঠকদের জন্য এই টেবিলটি দিতে পারেন যা তাদের বুঝতে সাহায্য করবে:

Key Pressed	Direction (Point in)	Movement (Change)
Right Arrow	90°	$x$ by 10
Left Arrow	-90°	$x$ by -10
Up Arrow	0°	$y$ by 10
Down Arrow	180°	$y$ by -10

৪. আজকের টাস্ক (Daily Task)

উপরের ৪টি কোড ব্লক তৈরি করো।
এবার কি-বোর্ডের অ্যারো কী চেপে বিড়ালটিকে পুরো স্ক্রিনে ঘুরিয়ে দেখো।
চ্যালেঞ্জ: প্রতিটি অ্যারো কী ব্লকের নিচে Looks থেকে next costume ব্লকটি যোগ করো। এতে মনে হবে বিড়ালটি সত্যিই হেঁটে যাচ্ছে।

স্বাগতম পঞ্চম দিনের টিউটোরিয়ালে! গত চার দিনে আমরা স্প্রাইটকে নড়াচড়া করতে এবং কি-বোর্ড দিয়ে নিয়ন্ত্রণ করতে শিখেছি। আজ আমরা শিখব প্রোগ্রামিংয়ের সবচেয়ে গুরুত্বপূর্ণ একটি অংশ: Conditions (শর্ত)।

আজকের বিষয় হলো Sensing (অনুভব করা) এবং If-Then (যদি-তবে)। অর্থাৎ, স্প্রাইট যদি কোনো নির্দিষ্ট রঙ বা অন্য কোনো বস্তুকে স্পর্শ করে, তবে সে নিজে থেকেই কোনো কাজ করবে।

পঞ্চম দিন: শর্ত বা কন্ডিশন (If-Then Logic)

আজকের লক্ষ্য হলো একটি ছোট্ট গেমের মতো দৃশ্য তৈরি করা। বিড়ালটি যখন একটি নির্দিষ্ট বস্তুকে (যেমন একটি আপেল বা বল) স্পর্শ করবে, তখন সে একটি শব্দ করবে বা কোনো বার্তা দেবে।

১. প্রয়োজনীয় নতুন ব্লক (New Blocks)

If [ ] then: (Control ক্যাটাগরি) এটি একটি বিশেষ ব্লক যার ফাঁকা জায়গায় কোনো শর্ত বসাতে হয়।
Touching [Sprite/Color]?: (Sensing ক্যাটাগরি) এটি একটি নীল রঙের ডায়মন্ড শেপ ব্লক, যা কোনো কিছু স্পর্শ করছে কি না তা চেক করে।
Wait until: (Control ক্যাটাগরি) এটি কোনো ঘটনা ঘটা পর্যন্ত অপেক্ষা করে।

২. আজকের প্রাকটিক্যাল প্রজেক্ট (Step-by-Step)

আমরা এমন একটি প্রোগ্রাম বানাব যেখানে বিড়ালটি মাউস পয়েন্টার বা অন্য একটি স্প্রাইটকে টাচ করলে বলবে “Got it!”।

ধাপগুলো অনুসরণ করো:

স্প্রাইট যোগ করো: বিড়াল (Sprite 1) ছাড়াও আরও একটি স্প্রাইট যোগ করো (যেমন: ‘Apple’)।
বিড়ালের জন্য কোড (Cat Sprite):
- Events থেকে when green flag clicked আনো।
- তার নিচে Control থেকে forever ব্লকটি নাও (যাতে সে সারাক্ষণ চেক করে)।
- forever-এর ভেতরে Control থেকে একটি if [ ] then ব্লক ঢুকাও।
- এবার Sensing ক্যাটাগরি থেকে touching [Apple]? ব্লকটি টেনে এনে if-এর ছোট খাঁজটিতে বসিয়ে দাও।
ফলাফল সেট করা: if-এর ভেতরে Looks থেকে say Got it! for 1 second ব্লকটি বসাও।
শব্দ যোগ করা: চাইলে তার নিচেই Sound থেকে start sound Meow দিতে পারো।

৩. কোড লজিক (আপনার ওয়েবসাইটের জন্য)

আপনার পাঠকদের জন্য এই লজিকটি ব্যাখ্যা করতে পারেন:

Logic: > – IF (Cat is touching Apple)

THEN (Play Sound and Say “Got it!”)

ELSE (Keep moving)

৪. আজকের টাস্ক (Daily Task)

স্ক্রিনে একটি আপেল বা বল রাখুন।
চতুর্থ দিনের টিউটোরিয়াল ব্যবহার করে কি-বোর্ড দিয়ে বিড়ালটিকে নিয়ন্ত্রণ করুন।
বিড়ালটি যখন আপেলটিকে স্পর্শ করবে, তখন যেন আপেলটি অদৃশ্য হয়ে যায় (Looks থেকে hide ব্লক ব্যবহার করে দেখুন)।
চ্যালেঞ্জ: বিড়ালটি যখন আপেল টাচ করবে, তখন একটি ‘Score’ বা পয়েন্ট বাড়বে—এমন কিছু কি ভাবা যায়? (এটি আমরা আগামী সপ্তাহে শিখব!)