So one of the “funnest” programs that I like to make is a choose your own adventure game just because I like combining the creativity with a little bit of code and we made one for you in the sample apps, so if you want to go into the sample apps and check it out you can go start with that and make your own from there. But right now, I’m going to show you how to do one on your own getting started, starting with nothing. So, what I’ve got here is – I’m right here in code studio and I like to start in design mode. Because in design mode, I can start by just designing the app without even thinking about what the code is going to look like. The first screen in my app is to be the first question in my “Choose your own adventure”, so let’s pull some text out there and let’s say, erm, “You wake up, you’re in a desert”, because that seems like a place you would wake up – “You see a skateboard and a camel. – Which one do you take?” That seems like a reasonable question – let’s increase the text size of this because I want it to look a little bit bigger – it’s nice big question right here and I’m going to drag it right into the middle and now I’m going to add 2 buttons. Button one is going to be for Skateboard so we’ll change the text of that one to say stake – didn’t spell that right – skateboard and the id of that one is going to be skateboard, so I can remember which button it is and then I’ll make that button a little bit bigger. I feel like skateboard should be purple for some reason so I’m going to make it a nice big purple button and then let’s add a button for camel! Also a good choice if you wake up in the desert – Camel – and the id of that one I’m also going to make camel and now I’m going to make that one big, make them of equal size so people don’t know which one to pick. Now I’m going to go design the next screen before I write any code, before I make it go anywhere or do anything, I’m just going to go ahead and design the next screen that’s going to happen. So let’s go to new screen and let’s make this our… no button, I don’t want a button. We’re going to use some more text. We’re going to make this our our… we’ll make this one our Camel screen. So what happens if you’ve got a camel – so let’s see – if you’ve got a camel and you go into the desert – seems like a good choice! It was a long hard slog. After five days of treking through – spelled trekking wrong – let’s go for wandering – wandering through the desert you eventually make it to the city. Congratulations! And make that nice and big, let’s go with font size up here – nice big font and there we go – that is screen two and what I want to do next is add some pictures, add some backgrounds, but for right now, just teaching the basics of how to get coding, so I’m just going to move on and add another screen. This is the screen where the person picked the skateboard. If he picked up the skateboard – I think he died! I don’t think – I don’t think skateboards are a good choice for the desert. We’ve got our “You Died.” Screen, so now, if you look up here, you can see we’ve got three different screens – we’ve got our intro screen, we’ve got the screen we want to go to if you choose camel and we’ve got the screen we want to go to if you choose skateboard. And I’ve labelled them differently – so let’s redo that labelling. Let’s call this “skateboardScreen”, so that they are all labelled in the same way. Now, let’s go back to our intro screen, and let’s actually make these buttons work So what I want to happen is I want when I click on the skateboard button, I want it to go to the skateboard screen. As you can see here, when I click on the skateboard button, I get all these different properties – I can set the text, I can set the height, the width of the button, I can set the colour, background colour of the button, but there’s also this other tab next to properties for events. Now an event is something that can be called when you interact with an object So, if I have a text input object, then I might get an event when they change the text in it or when I, erm, when I interact with it in another way, like click on it. For a button, the main event that we care about is clicking on the button and as you can see here, under events, for button, I’ll see that there is a click event. Underneath that, I can see that it’s triggered when the button is clicked with a mouse or tapped on the screen. Perfect – I’m going to click “Insert and show code”, and it’s automatically going to put the code into our program so that when the skateboard button is clicked, it will let me know that the skateboard button is clicked. This function is going to run right here, and what it’s going to do is it’s going to log into the console, that I’ve clicked the skateboard button. Let’s try it – I click run, I click on skateboard, and right down here to the console, I can see that it logged that I’ve clicked the button. It’s a good start but I don’t want to actually just want to log to the console. What I really want to do is switch screens! So, let’s get rid of this “log into console” line right here and under UI controls at the very bottom, you can see a function right here for setting the screen. I’m going to go grab that, put it over here, and when the skateboard button is clicked, I want to switch to the skateboard screen. Now I’m going to do the same thing for the camel. Let’s go back to design mode and on the camel button, we’re going to insert and show code. Instead of logging to the console that the camel button was clicked, what we are going to do is we’re going to set the screen to our camel screen. There we go! Should we try it out, click run, and if I click camel – I win the game! Which is fantastic! If I reset my game and I run it again and I click skateboard – I die! Which is sad, but it makes sense, because I’m using a skateboard in a desert. So, hopefully you guys can invent your own games that are more fun and more interesting than this one and you can again check it out on our app lab page and there’s a list of apps and a longer “choose your own adventure” game that you can use to get started. Thanks! Subtitles by the Amara.org community


Leave a Reply

Your email address will not be published. Required fields are marked *