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

If you're behind a web filter, please make sure that the domains *.kastatic.org and *.kasandbox.org are unblocked.

Main content

Course: Computer programming - JavaScript and the web > Unit 4

Lesson 2: Scene management
Computing
Computer programming - JavaScript and the web
Advanced JS: Games & Visualizations
Scene management
© 2024 Khan AcademyTerms of usePrivacy PolicyCookie Notice

Button-controlled scene changes

Google Classroom
We've gotten away so far with just having the user click anywhere at all in order to change scenes. But we've realized there's a drawback to that approach: we can't use clicks within scenes for any sort of additional interaction. The way that many games and apps solve that is by adding specific UI elements, like menus and buttons, and only navigating scenes upon interaction with a specific UI element. Let's add a button in the top right to control the scenes in our program.
What is a "button"? It's two things really: 1) the visual indicator that an area is clickable and 2) the logic that makes that area respond to clicks. Let's start with the visual indicator, a rect() with some text(), and wrap it in a function, in case we want to call it multiple times:
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();
};
Woo! Now we've got a button in every scene, all the time. Check it out:
But, haha, you know what's hilarious? The button does nothing! I mean, the user might think it does something, if they decide to click only that area. But in fact, they could click anywhere, and it'd do the same thing. We need to change our mouseClicked logic so that we check the button location before we decide it's scene-a-changing time.
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) {
        ...
    }
};
That's it! With that check, we now have a program where the user clicks a particular area of the screen to move to the next scene. Try out clicking the button and non-button parts:
Now that we have a way of knowing when a click is meant for changing scenes, we can use clicks for other interactions in our scenes, as long as they're not clicking on the button. That means we can let the user add the Winston babies on click instead of drag, like we originally wanted. We'll just add an else to our if, and move the code from mouseDragged into that else:
mouseClicked = function() {
    if (mouseX >= 15 && mouseX <= 65 &&
        mouseY >= 10 && mouseY <= 45) {
        ...
    } else {
        if (currentScene === 5) {
            image(getImage("creatures/BabyWinston"),
                  mouseX-20, mouseY-20);
        }
    }
};
Note that we need to keep the check for current scene, to make sure it only happens for that scene. But now, it's easy for us to add click interaction on any other scene too. What else could you let the user add? Drums? Facial hair? Play around with the program below:

Want to join the conversation?

Log in