If you're seeing this message, it means we're having trouble loading external resources on our website.

তোমার যদি কোন ওয়েব ফিল্টার দেওয়া থাকে, তাহলে দয়া করে নিশ্চিত কর যে *.kastatic.org এবং *.kasandbox.org ডোমেইনগুলো উন্মুক্ত।

মূল বিষয়বস্তু

বাটন-নিয়ন্ত্রিত দৃশ্য পরিবর্তন

এখন পর্যন্ত পর্দার যেকোন স্থানে ক্লিক করলেই দৃশ্য পরিবর্তন হয়। এভাবেই আমরা এতক্ষণ পার পেয়ে এসেছি। কিন্তু আমরা বুঝতে পারলাম যে এই পদ্ধতিতে একটি প্রতিবন্ধকতা রয়েছে: দৃশ্যের ভিতরে অন্য কোন কাজের জন্য আমরা ক্লিক ব্যবহার করতে পারিনা। অনেক গেমস এবং আপ্লিকেশন এই সমস্যাটি সমাধান করার জন্য নির্দিষ্ট কিছু UI (ব্যবহারকারীর ইন্টারফেস) উপাদান যোগ করে, যেমন মেনু এবং বাটন। শুধুমাত্র নির্দিষ্ট UI উপাদান ব্যবহার করে দৃশ্যগুলো পরিবর্তন করা যায়। এখন আমাদের প্রোগ্রামের দৃশ্য নিয়ন্ত্রণ করার জন্য উপরের ডানদিকে একটি বাটন যোগ করি।
"বাটন" কি? এটা আসলে দুটো জিনিস: 1) একটি দৃশ্যমান নির্দেশক অঞ্চল যা ক্লিক করা যায় এবং 2) অঞ্চলটিকে ক্লিক করায় প্রতিক্রিয়া প্রদান করার লজিক। একটি দৃশ্যমান নির্দেশক দিয়ে শুরু করা যাক, কিছু text() (লেখা) এর সাথে একটি rect() তৈরি করি এবং একাধিকবার ব্যবহার করার জন্য এটাকে একটি ফাংশনের মধ্যে রাখি:
var drawButton = function() {
    fill(81, 166, 31);
    rect(15, 10, 50, 25);
    fill(255, 255, 255);
    textSize(16);
    text("NEXT", 19, 29);
};
Now where should we call it? There are a lot of potential places -- all the times when we want to make sure the button gets drawn on top:
  1. When the program first loads, after we call drawScene1()
  2. Inside mouseClicked(), after we draw each scene
  3. Inside mouseDragged(), after we draw a new baby
  4. Inside draw(), after we re-draw the animated scene
As a general rule, we want to call functions only as often as actually necessary, and no more than that. Otherwise, we're just wasting our computer's energy!
We know that we need to call it in draw(), because otherwise it'll disappear while the drummer is drumming. Remember that the draw() method is called constantly, more often than all of the other methods. That means that we can call it only from draw(), and that should take care of all the other cases as well.
Try it out for yourself! If you feel like you need it anywhere else, you can always stick another call in your code.
draw = function() {
    if (currentScene === 4) {
        drawScene4();
    }
    drawButton();
};
দারুন! এখন আমরা সার্বক্ষণিক সকল দৃশ্যে একটি করে বাটন পেয়েছি। দেখে নেওয়া যাক:
কিন্তু, হা হা হা, মজার বিষয়টি কি বোঝা যায়? বাটন এখানে কিছুই করছেনা! অর্থাৎ, ব্যবহারকারী যখন শুধুমাত্র ওই স্থানে ক্লিক করার সিদ্ধান্ত নিচ্ছে তখনি সে ভাববে এটা বোধয় কাজ করছে। কিন্তু আসলে, ব্যবহারকারী যেকোন স্থানে ক্লিক করতে পারে এবং এটা একই কাজই করবে। আমাদের mouseClicked এর লজিক পরিবর্তন করতে হবে যেন দৃশ্য পরিবর্তনের আগে বাটনের অবস্থান যাচাই করা হয়।
Like we did in the button challenges in Intro to JS, we need to come up with an if condition to check mouseX and mouseY. All these things need to be true:
  • Is mouseX greater than the x position of the left side of the rect?
  • Is mouseX less than the x position of the right side of the rect?
  • Is mouseY greater than the y position of the top side of the rect?
  • Is mouseY less than the y position of the bottom side of the rect?
We use && to check that all four conditions are true, and if so, we go to the next scene:
mouseClicked = function() {
    if (mouseX >= 15 && mouseX <= 65 &&
        mouseY >= 10 && mouseY <= 45) {
        ...
    }
};
হয়ে গেছে! এই যাচাই করার মাধ্যমে আমরা একটি প্রোগ্রাম পেলাম যেখানে ব্যবহারকারী দৃশ্যের একটি নির্দিষ্ট অঞ্চলে ক্লিক করে পরের দৃশ্যে চলে যাবে। বাটনে এবং বাটন ছাড়া অংশে ক্লিক করে দেখা যাক:
এখন যেহেতু ক্লিক করে দৃশ্য পরিবর্তনের পদ্ধতি তৈরি করা হয়ে গেছে, আমরা দৃশ্যে অন্য কোন কাজ করার জন্য ক্লিক ব্যবহার করতে পারি। অর্থাৎ ব্যবহারকারীরা মাউস দিয়ে টানার পরিবর্তে শুধু ক্লিক করেই উইন্সটোনের শিশু তৈরি করতে পারবে, যে রকম আমরা চেয়েছিলাম। আমরা শুধুমাত্র if এর সাথে একটি else যোগ করব এবং কোড mouseDragged হতে ওই else এ নিয়ে যাব।
mouseClicked = function() {
    if (mouseX >= 15 && mouseX <= 65 &&
        mouseY >= 10 && mouseY <= 45) {
        ...
    } else {
        if (currentScene === 5) {
            image(getImage("creatures/BabyWinston"),
                  mouseX-20, mouseY-20);
        }
    }
};
লক্ষ্য করি, চলমান দৃশ্য যাচাই করতে থাকতে হবে এটা নিশ্চিত করার জন্য যে, এটা শুধুমাত্র ওই দৃশ্যেই যেন ঘটে। কিন্তু, এখন অন্য কোন দৃশ্যে ক্লিক ব্যবহার করা অনেক সহজ। ব্যবহারকারীরা আর কী যোগ করতে পারে? ড্রামস? দাড়ি? নিচের প্রোগ্রামে ইচ্ছামত পরিবর্তন করা যায়:

আলোচনায় অংশ নিতে চাও?

কোন আলাপচারিতা নেই।
ইংরেজি জানো? খান একাডেমির ইংরেজি সাইটে আরো আলোচনা দেখতে এখানে ক্লিক কর।