Check out a free preview of the full Get Kids into Coding with Scratch course
The "Game Over Screen" Lesson is part of the full, Get Kids into Coding with Scratch course featured in this preview video. Here's what you'd learn in this lesson:
Steve demonstrates utilizing a combination of collision detection, broadcasting messages, and hiding and showing sprites to create a game over screen.
Transcript from the "Game Over Screen" Lesson
[00:00:00]
>> All right, so Caleb did this before, and then Wes asked me, how would we do a Game Over screen, right? Let's actually take some things that we learned before, we learned about collision detection, right? We know about broadcasting, and we learned about showing and hiding. Let us pull together these three ideas into having a Game Over screen that shows and hides as we need it.
[00:00:24]
All right, so let's go back over to the one that I was making, you probably still have it open. So we need some amount of collision detection here. We should put that snake back where it belongs when it starts. And so, we'll say at the very beginning, We will go where we're supposed to go, and we'll say in our loop here, If, Touching our good friend Nano, We wanna stop all, but we wanna show that Game Over screen, right?
[00:01:12]
So what we do is we add an additional sprite. I'm gonna grab just a text tool in this case. GAME OVER. Boy, what is the correct, let's do Pixel, I like Pixel, GAME OVER. I think that that Game Over is just a bit too subtle. I think it needs to be, That feels better.
[00:01:48]
Okay, maybe I got carried away.
>> Make it red, too.
>> Red?
>> I think you should change the style a little bit cuz it's not really an 8-bit game, so I think it should be more of a, just-
>> Here are your choices, you got Handwriting, Marker, Curly, Pixel.
[00:02:12]
>> I think it should be Marker.
>> Marker?
>> And that'd fit-
>> Okay, I actually like, yeah, I'm here.
>> Yeah, it fits the style the best.
>> I'm here for it. All right, cool, let's just put in the middle, 0, 0. And so, when the game starts, it's not game over, so what should we do to the game over sprite when the game starts?
[00:02:34]
>> Hide it.
>> Hide it.
>> Show it when it receives the message that it's time to show it.
>> Hide it, and so how do we handle that? How does it receive the message?
>> Somebody broadcasts it.
>> Okay, I think.
>> The snake or Nano.
>> Looks like the snake is the one checking right now.
[00:02:57]
So I agree, so let's go over into our broadcast. Whenever it's touching Nano.
>> Is there a way to make it stop hiding? Because if there is, then you can make it when Nano touches a snake, it stops hiding.
>> Yep, we can do when Nano touches the snake, we happen to have the logic in the snake when it's touching Nano, it's kinda same thing either way, doesn't really matter.
[00:03:21]
>> After broadcasting game over, put a wait 0.00001 seconds. Because if you don't, then they'll both happen at the same time, and the game over won't show up. I've done that with lots of different game over, it doesn't work.
>> So we do a bunch of thing, we do a bunch of cleanup, we could choose to hide the sprites.
[00:03:44]
Let's start by getting the initial part in place. So when I receive game over, that is gonna be when we show. Because yeah, those events happen on an event loop and one could happen before the other. The end of the game could happen before the message gets received.
[00:03:55]
The other thing we could do, we can have it wait, we'll talk about two ways to handle this. Let's see the problem first so everyone sees it, and then we'll talk about two ways to handle it. So when I receive the game over, that will be when we show this one.
[00:04:10]
Right, now, Caleb's hypothesis is, when broadcasting that message, for those of us who like the JavaScript programming language, will go to an event loop. But the stopping of the game will happen before the broadcasting of the message. Let's verify that so everyone can see what he's talking about.
[00:04:28]
That one actually does happen.
>> It did?
>> Yeah.
>> All right, it worked.
>> But I'm surprised that it worked as you are. So let's talk about if it doesn't work, cuz sometimes it's just luck [LAUGH] when dealing with asynchrony, sometimes there's luck. So there's two ways to handle this.
[00:04:45]
One would be to just wait, right? So wait before stopping the game. So broadcast a message, give it some amount of time. So it would be going into the snake and saying, broadcast game over, but give the game a second to figure it out. So we could say, wait one second, but that feels a little rough.
[00:05:01]
So we'll say 0.01, something like that, well, whatever, 0.1 is fine, just make our point. And so this will make sure that the message gets the chance to go through, obviously same effect. The other way that I might consider doing it is, why is the snake stopping the game when we're broadcasting the game over message?
[00:05:20]
I'd rather have game over stop the game, cuz then I don't have to worry about this at all. So I just say broadcast the message, and let game over stop everything, and then I don't have to worry about it.
>> Yeah, finishes it off.
>> Boom, and now we've got a Game Over screen, right?
[00:05:38]
The other thing you could do is, and I'll kind of leave this as an exercise for you, and I'll give you a little bit of time to play around with it. Is you could theoretically have the green flag just broadcast a game start that then hides everything. And then you can have a thing with, game over, press S to continue, or press a key to continue.
[00:06:03]
And then you could have the ability to play the game over and over and over again, and you could break that logic out.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops