Build an iOS Game Guess-A-Number using Xcode 13.0 (UIKit)

okay uh we will be building a guest number game using xcode so let's open up xcode so we're using version 13.0 this time so we'll create a new xcode project and this time it's an ios application ios and app so this is guess a number okay so this time we'll be using ui kit and the mvc model however we are not using any mvc model in this example we will be doing it in the second example so we'll be using storyboard and using the swift language and we are not going to do any unit tests and then you can save it wherever you like so i'm just going to put it on desktop for now okay then you're all set so on the left hand side you see the navigation menu so it will show you all the files that you have so in an older version it call it is called main dot storyboard so but here it's called main so it's the same thing if you're using an older version so first we can change the simulator to for example user iphone 12 for max so this one changed also so using a 13 with my 12 and oh well all right even in 12 so why not use the 13 then so we can use the 13 pro max so we match so you know guess a number game so we will be building uh we'll be using some of the component so you open up the library by using uh let's see here so yeah go to menu and show library so you shift command and l this is your key so shift command l so we can see it by key stroke it's gone okay back to here so it bring up the library so we will first need the label so put it in here so make it a little bit bigger um all across the screen and then make my text to different things i guess a number between zero two nine how about that center now we can make it a little bigger so to fill up next we're not gonna change it so because this default default color is transparent so how about a background color so that you can actually see this is this area belongs to this label and then we will need another label so this label will display the message to you and again make it a little bit bigger so this time just uh please enter a number so i'm gonna make the lid a bit bigger and see okay so change the background color against um well it's good enough okay so please enter a number then you need a place for user to enter a number so those are called text text field okay so then you click and drag it here so then here how about i put a number first so that you can actually see some number in here so then we make it bigger it's good enough now making the center okay and again change the background color so that we can see the area so we use the orange line okay so after that of course you need to have a button for use of the click so again bring up the library so this time just a simple button so you make the button a little bit bigger so this time i will change the text to yes okay and then background color this time just go down the list maybe red not good enough okay um let's see he said no font so maybe attribute so then we can make it bigger okay okay so now we have our interface done so we have to link it to our code so we're using a storyboard using the mvc model so here is actually a view and for each view it will come with a view controller so for this real controller it's corresponding to here you can see that this here right this real controller is corresponding to this wheel so you get more views then you have more view controllers so first click on here to see the code so there's some code generator for you so we'll dip load so after the reload you may want to do some more setup so for now we are not doing anything but we will link the component in the view to our controller so we can what we can do is we can hide this part we donate this for now so we got more room and then we can add another pen so maybe i make it a little bit bigger so on this side um i might want to change it to something else here and we want to change it to the main so and i do not need design for now so i got bigger room so this time how do i link them together so i only link the component that i need to change or get the data from so that means that for the top label here it's not going to change so i'm not going to link it to my code but for the rest of the three components i will link it so to link them together you must use the key so click on the ctrl key and then drag it oops drag it so you say blue line right so just put it somewhere inside your function and this time i call it message label okay so this is a ui button this is a weak storage and click on that so maybe i move here back so that you can see it in one line so and then here we will need to get the data that the user enters so click the ctrl key and then drag a key drag it to the code area so this time it's in the outlet so i call it user num headsphere and connect them so you must do this using the ctrl key otherwise it will not work so if you just type these two right it will not work so you must connect them using the ctrl key and so what happened next so what we can have is the button it's an action so when you say click the button it's gonna do something so it'll be an action so we have to connect them again so click the control key and then let's do this okay um drag it to here you say blue line right so and this time it's an action so the name uh we call it guess now we guess button click and make sure that there's a ui button if you use any it will not work so make sure it's ui button and then connect them so now you have the outlet you have the action right so if you remember mvc model when the controller need to communicate with the view there is an outlet and also if there's something happens in the view they will use an action to trigger the controller so now we have all the basic setup so what happened to our logic so well user has to guess number right so we better have a number right so we need to define a variable which is called dc should num so this will be an integer of some random number in the range of 0 to 10 0 less than 10 okay so this is our random number so now we have a random number so what happened when user click the button so well of course first we will need to get the number from the text field that user entered so we'll get a number so for example user num will equal to the user num text field not text so you see that the text is this is an optional string right so text right so we have to unwrap it however this is a text it's a string then oh so so now uh forget about this warning so because it's telling me that um when you define variable you're not using it so we'll use it later so um so we can come back here so this time it's an optional string but our sql number is an integer so what happens is we need to pass it into an ins okay because into the int when you use the option key you can look at it so uh it's an inch height so but when you cast it actually is an optional so we have to unwrap it so this time we will get the number that the user enter in the text field so then we can do some simple comparison so if the user num is equal to the secret number then what happened so well we have to display message right so the message label of text will equal to uh you wait and guess a new number okay so and of course we have to um we set the secret number hour is otherwise it will be the same or the rate right so secret number equals to the same thing integer a random number between 0 2 10 not including 10. then we can do an elsif the username is greater than secret number so then we have display the text right so this time using them is greater than a secret num so that means you have to guess a smaller number right so too big yes a smaller number okay and then else so we don't have the if anymore because it's not equal it's not less than it must be smaller than so this time message label will equal to so this time too small yes a big number okay so then what we can do is run the program as yeah and see if it's working so once you run and of course you will need to compile it and wait a little bit up here so it will take a while to run so just be patient and once it's open then keep it in there so that you don't have to wait again so okay let's see so [Music] so how about i just use a five thank you guess too small so if better number eight still too small must be nine then still too small what happened so we make some mistake i guess too small else if equals greater than [Music] so we make a mistake here let's see probably seems too small all the time it's great 10 is not going to be 10 right oh ah so i make a little mistake here so because this is including 10 so not including 10 is this one so sorry about the mistake so that's why it doesn't work and it happened the first try so this time you run again so this time five so too small eight too big seven two back then six so you win guess a number so again so it's too big so it looks like it's working so but however we will look at some of the examples of how to make this game better in the next video so okay see you in the next video

Channel: Ivan F

Views: 302

Keywords:

Id: ICKFVcspfyI

Length: 16min 41sec (1001 seconds)

Published: Fri Sep 24 2021