Learn JavaScript With This ONE Project!

foreign [Music] JavaScript by going through a complete project I'm going to explain to you all of the syntax what it does and how it works but I'm also going to show you my thought process when it comes to building this program and explain to you how to structure your code some best practices and a lot of other useful tips that you're not going to get in just a complete beginner tutorial now this video will be a little bit Advanced if you've never looked at coding before but it's definitely something you can still follow along with at a minimum it's going to give you a little bit experience and exposure and show you what it's like to actually complete an entire project now the project we're going to be building here is a slot machine the way that this is going to work is you're going to deposit some money so maybe 100 bucks 200 bucks whatever it may be you're then going to spin the slot machine by betting on a certain number of lines now in a slot machine you have something called reels those are kind of the vertical columns and those contain different symbols so we're going to be responsible as the programmer for coming up with what symbols are on those reels and then kind of spinning those which is really just randomizing what's on the reels and then generating some kind of payout if the symbols are matching in a row I'll explain this more when we get into the video but this is a really good project for introducing a little bit of complexity and really making you think about the code but not taking a ton of time all of this is going to happen in our terminal we're going to be using node.js and I quickly want to clarify here that I have ridden this project before in Python but I've never done it before in JavaScript and I don't have any cheat sheet in front of me so everything you see here is just me raw coding thinking about everything that I'm doing and explaining to my thought process as best as I can so with that said let's dive into the video after a quick word from our sponsor before we get started I need to thank lenode for sponsoring this video I've been using and working with lenode for nearly three years now and they've consistently been my go-to choice for hosting my applications and servers in fact right now I'm using the node to host the official Tech with Tim Discord bot a website multiple of my domains and a kubernetes cluster now lenode was just recently acquired by Akamai and as a part of this acquisition they're going to be adding more than a dozen new data centers around the world in the next year lenode makes it super easy to spin up servers with their one-click app Marketplace and have tons of written guides and YouTube videos on their channel to help you get started now if you're having any issues you can reach out to the 24 7 support team and actually talk with a real human being now the nodes pricing is simple with no hidden fees and full transparency and you can test out the node services for free by using the link in the description and claiming in a hundred dollar sixty day credit for any new accounts it's been an absolute pleasure to work with lenode over the past few years and one last thank you to them for sponsoring this video [Music] all right so let's dive into the project now the first thing to mention here is I do not at all support gambling I'm just doing this project because it's a really good one for beginners and to really dive into code and kind of see how to create a complete project but please do not gamble I don't gamble myself that I would never encourage anyone to do that regardless I'm going to quickly explain to you how a slot machine works in case you haven't seen it before if you already understand feel free to skip through but here we're going to do like a simplified version of one just to make it a bit easier for us so I have the whiteboard in front of me and I'm just going to draw out in a very messy manner here kind of the idea behind what we're creating so we're going to imagine here that we have three reels now in each of the reels we're going to have three symbols so maybe we have something like a b c a b c and then maybe we just do a now excuse my handwriting here this is with my mouse now what we're going to have here for our slot machine is three lines now whenever you play a slot machine there's a certain number of lines that you can win on usually it's like 80 lines or 60 lines or stupid amount in our case we're just going to do three and they're just going to be each row okay so these are the three possible lines that you could win on now you only win when you have three symbols that match in a row so in this case we would have a win but we would not have a win in either of these two rows because we don't have three symbols now each symbol will have a varying multiplier so if I bet say one dollar on the line and the symbol had a multiplier of five then that would mean that we won five dollars on that specific line and we're going to allow the user to bet on a certain number of lines so if they bet on one line they just bet on this so they need to have something in this section if they bet on two lines then they're going to be betting on both of these lines if they bet on three lines and they bet on all three of these and whatever bet amount they make is going to be multiplied by the number of lines that they bet on so if they bet one dollar on three lines then they bet three dollars in total and if they get symbols in any one of the rows then they're gonna win a certain amount of money based on what the multiplier is for that simple [Music] all right so let's dive into it here first we just have a little bit of setup I'm using node.js so make sure you download node.js I can leave a link for that in the description and then I'm using visual studio code feel free to write your code wherever you want now I've opened up a folder here on my desktop where I'm going to be writing the code and the first thing I'm going to do is create a new file so I'm going to say project dot JS this is my Javascript file then I need to set up a kind of node directory here because I'm going to install one package which is going to allow us to get some user input so I'm going to go here to my terminal notice I'm inside of the directory where I'm going to be working and I'm going to type npm init now this command will only work once you've installed node.js if for some reason it's not working and you installed node.js then restart vs code or your terminal or restart your computer come back in and then the command hopefully should work for you okay so when I type npm init it's going to walk me through kind of setting up all of this information you can fill it in if you want but you don't have to I'm just going to click enter through all of this and now you're going to see that we have a package.json file inside of our directory now that we have that I have the ability to install my package which I need which is called prompt and then sync so npm I prompt Dash sync this is what we're going to use to collect user input so go ahead and run that command again just installing that package to do this again you need node.js installed need to be in some directory and whenever you're in the directory type npm init npmi or npm install prompt sync have some Javascript file ready to go and now we can start writing our code foreign [Music] so the first thing I'm going to show you how to do here in JavaScript is collect user input but before I do that I quickly want to explain kind of the steps that we need to go through so that we understand what it is that we're going to be building before we start writing any code this is an important step whenever you're working on a project you want to kind of break it down into some sub components so you know what it is that you actually have to do and then you can prioritize those tasks so let's do some comments here I keep thinking I'm in Python using the pound symbol but the first thing that we need to do here when we're setting up a slot machine is we need to know how much money the user has to play with they're going to deposit or put some money into the slot machine so the first thing we need to do is deposit some money okay next thing we need to do is determine how much the user is betting on the slot machine so we need to collect a bet amount but before we do that before we determine the bet we probably need to know the number of lines that they want to bet on do they want to bet on one line two line or all of the lines which in our case is three so I'm going to make another comment here to determine number of lines to Baton okay and then three is collect the BET amount now next we need to actually roll the slot machine or spin the slot machine and then see if the user wants we're going to say spin the slot machine and then five check if the user won and then lastly after we check if they win we need to then give them the money right so give the user their winnings or in the case where they lost then we would take their BET right and then lastly we probably need to play again or handle a situation where the user has no money left okay so those are our seven steps so what I like to do now that I have these steps and I've kind of thought through the program a little bit is start going through them one by one it doesn't really matter the order that I complete them in but kind of creating little pieces of code or functions that Implement each step or each thing that we're doing so let's start with step one that kind of makes sense where we're going to collect a deposit from the user so to collect the deposit we're going to create a function a function is a reusable block of code that you can call that's going to do something for you so don't worry about it too much if you haven't seen functions before there's two ways to create them in JavaScript the first way is to write function and then to give the function a name in our case the name of the function is going to be if I could spell this correctly deposit then you're going to do two parentheses like this any arguments or parameters you have for the function are going to go inside of here these are things that the function may need to handle that you're going to pass in to the function for it to use while it's doing some code in our case we don't have any of those we just want to get a deposit and then we're going to open two curly braces like this or open a curly brace and close a curly base and then inside of these is going to be the body of our function which will run when we call this function so I can call the function by writing the name of the function and then putting two parentheses like this that's going to call the function trigger it to run function is going to do whatever is inside of the curly braces or the body of the function and then we have the ability to return something from the function so for example I could return one if I return that it's going to be returned to where the function was called so in this case if I had a variable I said const x equals deposit then what that means is that if I return 1 the variable X is going to be equal to 1 because that's what this function call returned hopefully that makes sense but that is your 20 second lesson on how functions work now this is the first way to make a function the next way to make a function is to do the es6 style which is to write a variable so in this case I'm going to do const which stands for constant meaning this variable does not change that's going to be the case for our function I'm going to give it a name I can't name it deposit because that's what this one is named but that's fine I'm gonna get rid of this so let's comment that out then I'm going to say this is equal to and then a set of parentheses then I'm going to kind of make an arrow here so an equal sign and then a greater than sign then I'm going to open my curly braces and this is exactly the same as this function right here at least that's the way that you can think of it so in fact we're going to use this style of function because this is kind of the newer style that most people are using works the exact same way is called the same way and we can return stuff from this function okay so inside of the deposit function what we need to ask the user to do is to enter a certain amount so how we're going to get the user input is using the package that we installed called prompt sync so the way that we're going to do that is import the package so we're going to say const which stands for constant we're going to say prompt which is going to be the name of the function we're going to use in a second this is equal to and then this is going to be required and then prompt sync like that and then make sure you add another set of parentheses here because what we actually need to do is require this package or this module that we're using that kind of imports it into the program then when you call this um with these parentheses here it's going to give you access to a function and it's a bit confusing that you can use to get user input okay so now that we have prompt here we're going to say const and then we're going to say let's go with deposit amount is equal to and then this is going to be prompt and then inside of parentheses we're going to put a string which we do two quotation marks for and we're going to say uh kind of what we want to ask the user so I'm going to say enter a deposit amount then I'm going to do a colon and a space and I'm just doing a space so that when the user starts typing they have a little bit of space from the cool and if I didn't do a space they'd kind of be typing their deposit amount right beside the colon we don't want that we want them to have a little bit of space okay and then I'm going to come here and just for testing purposes I'm going to call the deposit function okay so I know if you're new to programming this might be a little bit overwhelming but all we're doing here is asking the user to enter a deposit amount storing that in this variable and then I'm calling the function so when I call the function it's going to run the code inside of here and then it's going to ask the user input something they're going to input something and that's all we have for the program right now so how do we run this code well we're going to use node.js so we're going to go to our terminal make sure you're in the directory where your project file is or where your code is and you're going to run node and then the name of your file which in this case is project.js so it says enter a deposit amount and then notice my cursor is here and I can start typing so I'm going to type something like 100 perfect I've now entered my deposit okay so now that we have the deposit amount what we need to do is convert this deposit amount to an integer or to a number type in JavaScript because by default what's going to be returned here by the prompt is a string a string is anything that's inside of Double or single quotation marks so we're going to convert this to a number and the reason we want to do that is because we're going to have to be subtracting from it adding from it Etc and we also want to make sure the user entered a valid number for example if they enter negative 100 then they have no balance and well they can't play so the way that we convert this to a number is the following we're going to say const number deposit amount is equal to and then this is going to be parse float and then deposit amount now this parse float function is just going to take a string and it's going to convert it into its floating point value so if I had a string that was like 17.2 then that function is going to give us 17.2 pretty straightforward now if we have a string that is not a number so a string like hello and we use this parse float function it's going to give us something called not a number so Nan like that and if we get not a number that means that they didn't enter a valid deposit amount and we need to ask them to do that again or we can just quit the program and they would have to try again kind of up to you what you want to do there I'm going to make it so they have to enter the number again all right sorry for the cut there my cat was going a bit crazy so I had to deal with that anyways what we're going to right now what we're going to do now is check if this is a valid number so to do that we're going to say if and then we're going to use a function called is Nan now is Nan checks if something is not a number so I'm going to say if is Nan number deposit amount or and you represent or with the two pipes here two vertical lines on the keyboard or number deposit amount is less than or equal to zero then we're going to say console.log uh invalid deposit amount try again okay so we're just simply checking is it not a number if it's not a number or the number is a number but it's less than or equal to zero then this is invalid so we need to tell the user that hopefully that makes sense I don't think I need to explain that much more okay so let's quickly run the code and just make sure this works so I'm going to say node project.js I'm going to enter hello and then notice I get invalid deposit try again now if I enter a number like 10 all is good and if I enter a number like negative 10 then same thing I get in invalid number okay perfect now next what we need to do is return the number from this function we also need to make the user enter a number again if it's inbound so the way we do that is the following we're going to say well true and then we are going to put all of the code that we just wrote inside of this while statement now this wall statement is a loop this here is the condition for when we should continue looping so right now I'm saying while true which just means forever so it's essentially an infinite loop we're going to continue to do this so we're going to ask the user to enter deposit amount convert it and then we're going to check this now in the case in which this is a valid number so in the else case here we're simply going to return the number deposit amount which is going to break this while loop hopefully that makes a bit of sense but We're looping forever okay so we're just gonna continue to keep looping we do this we check if it's an invalid deposit amount if it is we're going to console.let like this and then we're just going to ask the user to do this again and continue asking them until they give us a valid amount now otherwise which is where this else statement comes in so if this is not the case then we're going to go in this else statement and we're going to return the number deposit amount to this deposit function call so to show you this I'm going to say const deposit amount is equal to deposit by the way I've said this before but cons stands for constant and it's how you declare a variable so constant deposit amount is equal to deposit and then I'm going to say console.log and then the deposit amount okay so now let's go here and let's run our code and check this out so node project.js enter a deposit amount let's go hello invalid enter again negative 10 invalid 10 and then it prints out 10 because that's a valid amount all right so we've just finished step one here to deposit some money I realized I spelled this wrong but that's okay now that we've determined uh what the user has deposited the next thing that we're going to do is write a function to get the number of lines that they want to bet on and then we're going to collect the bet so let's go ahead and do this we're going to say const get number of lines and notice that all of these different tasks I'm putting in a function so that's very clear where that code lives it's easy to go change it find it later on it just makes the code very structured and easy to understand okay number of lines let's do this we're going to ask the user to input number of lines that they want to bet on so we can really do the same thing that we did here we can kind of copy all of this code and paste it in but rather than a deposit amount this is going to be number of lines The Prompt is going to be enter the number of lines to bet on and then we can just kind of hard code in here between one to three okay and then we're going to say uh actually let's just do lines for this and then this can be number of lines and then here we can go and change this to lines okay so already we're doing the exact same thing we did before we're getting the number of lines we want to bet on between one and three we're then saying constant number of lines to equal to this and same thing we want to check if the number of lines is not a number or the number of lines is less than or equal to zero or the number of lines is less than or equal to three because these are the uh lines they could possibly bet on so actually sorry if it's no not if it's less than equal three sorry if it's greater than 3 my apologies I'll re-explain that so we're checking if is what they entered known number if it is okay that's invalid is what they entered less than or equal to zero if it is that's invalid is what they entered greater than three if it is it's invalid now we just need to change the message we're going to say invalid number of lines try again and then here we're going to return the number of lines now I went a bit faster here just because I've already kind of explained how a lot of this code works just note here that you can combine as many conditions as you want and you're just going to go through and check one by one so we check is this true no is this true no is this true no okay we go to the else statement if any one of these three are true it's invalid we print that and then we try again okay so now let's get the number of lines so I'm going to say const number of lines is equal to get number of lines like that and now we can run the code so first it's going to ask us for our deposit because we did that first then it's going to ask us for our number of lines and notice that I'm kind of writing these functions in the order in which I have them here doesn't really matter where I put them so long as I place them above where I'm using them so they need to be defined before I call them all right let's run our code so clear node project.js enter deposit amount let's do 100 and then we're gonna have to fix this prompt but enter the number of lines to bet on let's do four invalid let's do three all is good we can bet on three lines okay so let's move on here after I fix this prompt all right what is next collect a bet amount so we need to figure out how much the user is betting now the amount that the user can bet is going to be based on whatever their current balance is right they're going to have some kind of balance and that's going to be based on whatever they deposited so rather than having the const deposit amount here let's actually change this variable and let's say that this is let balance equal deposit now that's because the starting balance is going to be equal to whatever they start by depositing and then we're going to adjust the balance based on what they're betting and what they're winning now notice that's why I changed the type of this variable here to be let rather than having a constant I'm changing it to let now what lets me do is adjust the value of this variable so later on I can say add to the variable subtract it I can change what it's storing whereas if I have a constant I can't do that I can't change the value of a constant because it's constant but a variable using let you can change the value of it so that's why I needed to change the variable type here okay so we have the balance we have a number of lines and now we're going to write a function that allows us to get the total bet so we're going to say const get bet and the bet is going to be based on the balance that the user has because they can't have a bet that is more than their current balance so I'm going to take balance as what's known as a parameter what that means is I need to pass a balance to this function when I call it and now inside of the function we can use this balance variable to determine what the maximum bet is so same thing here I'm going to copy this code really we could probably write a function that you know reworks this but for our case it's fine to kind of copy it and just adjust it so I'm gonna have again well true now this time I'm gonna have const bet is equal to enter the total bet like that we're gonna have number bet just because I'm converting it now here we're gonna put bet and then again we just need to change a few of these things we're going to say number bet number bet and then we're gonna say number bet is greater than the balance this time because now the maximum they have is the balance not a fixed number like three and then here we're going to say invalid bet try again and then we're going to return the number back so I know this is fairly repetitive that's kind of why I'm going through it quickly but you get the idea these are three kind of input functions get the deposit get the number of lines get the BET make sure all of those are valid once we have all of that we can kind of do the more interesting stuff which is spinning the slot machine and calculating how much the user won so now let's call This Bat function so we're going to say const and then we're going to say bet is equal to and then this is going to be get the BET and the bet is going to be based on the balance perfect so let's test this out and make sure it's working clear node project okay let's enter deposit like 100 let's do three lines enter the total bet and let's bet two okay great now while I was doing this I just realized that the bet that you're going to have is going to be multiplied by the number of lines so this is actually not quite correct because right now we're only allowing you to uh we're allowing you to bet based on your balance but not based on the number of lines really the maximum bet you can make is whatever your balance is divided by the number of lines that you're going to bet on because that's how many uh places you're going to place the bet if you bet two really your total BET's going to be six because you're placing that on three lines so I'm going to change this here to say enter the bet per line okay and then we're going to now take in the number of lines in here we're going to pass the number of lines now we're going to make sure that the number is not greater than the balance multiplied by the lines uh sorry not multiplied divided by the lines and just make this clear we're going to put these in parentheses I guess actually we don't need the parentheses it just removed it for me so that's fine hopefully you're getting what I'm saying there since the bet is distributed between multiple lines based on the number of lines you bet on that's going to affect what the maximum bet can be okay now that we have this let's just try this one more time okay so here enter deposit let's enter 50. number of lines is three now let's try to bet say 40. invalid bet try again because that's going to be over based on the number of lines that we have now if we try 20 same thing it's invalid it's going to be over based on number of lines if we do 15 that's fine we can bet 15 per line okay perfect so we've done the first three things here which is deposit some money determine the number of lines collect a bet amount now we need to spin the slot machine this is where it gets a little bit more challenging but that's okay let's dive into it alright so as we dive into building the slot machine here I'm going to give myself a bit of room at the top of the program because I'm going to start defining some variables that are going to depict how big the slot machine is and how many symbols we can potentially have in each row so first let's just Define the number of rows and columns we want to have so really the number of reals and the number of symbols that will appear in each reel then we need to know what symbols we have in total so do we have five different symbols seven different symbols Etc and what is the value of each symbol as well as the quantity of each of them in the real that's what's going to Define uh kind of the payout structure the probability Etc I'm not going to make this balance I don't really know what I'm picking here it's a little bit random but I like to declare all of these as what I refer to as Global variables and I do all of my Global variables at the very top of the program so it's very easy to see them and to change them so all I need to do if I want to adjust say the slide size of the slot machine is go to the very top of the program change a clearly named variable to say four five some larger number and all of a sudden I have a bigger slot machine and my entire program will work you'll see what I mean but let's define these variables so first of all you'll notice I'm going to do this beneath where I have my prompt so the typical tradition is you want to have all of your Imports and kind of libraries at the top of your program then your Global variables then your classes and functions and then the main line or the other aspects of your program which is kind of what I'm following right now so I'm going to say const because all of these are going to be constants and the first variable I'm going to have is rows now I don't need to make this a constant but it's typically a practice of any of your Global variables that are constants are in all capitals I know it seems a little bit weird but that's what we're doing here so I'm going to say const rows we're going to have three rows and const calls is going to be equal to 3. okay next thing we need to Define is the symbols so first of all we need to know what symbols we're going to have and how many of them we can have in each real so each column and then we need to know what the value of each symbol is which is just going to be some multiplier based on your bet so we're going to create a map and the way we can do this is the following uh actually we're going to create an object it's kind of similar but you'll see we're going to say const symbols is equal to and actually I'm going to say symbols underscore count you'll notice that I'm going with snake case here which uses an underscore for kind of a space separator rather than camel case and that's because I'm doing this in all capitals and that's the convention anyways for my symbols I'm going to have A's which will be my most valuable symbol and we'll say there's only two A's in each reel okay I'm gonna have these we'll say there's four of those we're gonna have C's we can say there's six of those and then D's we can say that there is eight of them again I don't know if this is going to be balanced or not but these are the symbols that you can possibly have in each real or each column and we're going to randomly select from these number of symbols okay now this object allows me to have keys mapped with different values so I have a key a here mapped with the value two so that means if I were to do something like symbols count at a this would give me the value which is two hopefully that makes a bit of sense uh but that's like a very quick introduction to objects in JavaScript allow you to have keys or Properties or attributes associated with values okay all right next we're gonna have our symbol values okay now the values are going to be similar here but we're going to say a is five B is four C is three ND is 2. now this means if I get a line of A's I'm going to multiply the BET by 5. that's going to be the payout because of that line if I get a line of B's I'm going to multiply the BET by 4 Etc so this is the multiplier or the value of each symbol uh relative to what we're going to multiply it by okay so now that we have our constants what we need to do is create a function that kind of spins a slot machine now really spinning the slot machine is just going to be randomly selecting based on these counts what symbols we have in each reel then we need to determine if the user won anything okay so let's do this we're going to say const and we're going to say spin okay now for the spin we don't need to take in any parameters we can just generate uh the different reels so to generate the reels the first thing that we need to do is figure out how many symbols we have now we know that based on this but what I'm going to do here is I'm going to put all of the possible symbols that we could use inside of a list or inside an array and then I'm going to randomly select them out of the array and remove them from the array every single time that we use them while we're generating each reel so we're going to generate individual columns right that's what we need to do um yeah let's let's generate the columns and then you'll see what I mean all right so as I was saying let's generate an array that contains all of the possible symbols that we could have so I'm going to say const and then this is going to be symbols is equal to and then an empty array now notice that even though we're going to be adding elements into this array I still made this variable type a constant that's because I'm not going to change the value of the array I'm not going to actually change what array I'm using I'm instead just going to be adding elements inside of it I know that seems a little bit misleading or a little bit confusing this is something to note in JavaScript an array is what's known as a reference data type which means I can manipulate what's inside of the array without changing the reference to the array itself so I don't need to assign a new value to symbols I can just add stuff inside of this array and that's not going to violate the principle of this being a constant variable it's a little bit strange a lot of people get confused by that uh hopefully that gives you a bit of an explanation so what I need to do now is I need to Loop through all of the different entries that I have inside of my symbols object or my symbols uh count here okay now notice that I got rid of my quotation marks uh you don't actually need quotation marks for your keys or for your Properties or attributes in JavaScript you do in Python hence why I added them because I thought we're in Python but no we're in JavaScript okay so I'm going to make a for Loop here I'm going to say four and then this is going to be symbol of and then I'm going to say this is object Dot entries of and then our symbol underscore count okay so the way that you Loop through all of the different entries inside of an object and our entries are going to be this right so A2 B4 C6 d8 is you use this right you use symbol of object dot entries and actually we're going to say symbol and count of object dot entries and we need to put these inside of an array and we need to put our const here okay sorry I'm getting a little confused because I usually work in Python it's a bit different but we're going to say constant and then inside of an array we're going to say symbol and count of object.entries that's going to Loop through all of the different entries in our symbol count and it's going to give us first of all what the key is or what the symbol is and then what the value is associated with each of those so to quickly illustrate that I'm just going to console.log the symbol and the count and I'm just going to call this spin function here just so you can see how the looping Works before we go any further so let's quickly run this and notice I get A2 B4 C6 and d8 okay so I'm looping through all of them and now I'm just going to get out of this uh I guess I need to just enter some values here okay perfect so now we're out of that all right so that's how the looping works now that we have the symbol and the count we're going to add that many symbols into our symbols array so we're going to do another for loop we're going to say four I'm going to say let I equal zero I is less than and this is going to be count and I'm going to say I plus plus and then I'm going to say symbols dot push and I'm going to push the symbol into the array now this is just going to add however many symbols we have so in this case if we had two A's it's going to add two A's into this symbols array the way that you add them in is by pushing them into the array so typically in other languages you'll see append in JavaScript it's pushed that's how you insert a new element inside of an array and an array is just a collection of multiple elements so I could have a a b b b like that inside of the array okay hopefully that is clear so for every single symbol and for the count of those symbols we're going to have another for Loop and we're going to insert that many symbols into the array so now again just quickly before we go any further let's print out what the symbols array looks like after we run this code so let's call the spin function let's go here and run it and notice that this is our array okay so we have two a's Four B's six C's and eight D's the point of doing that is now that we are going to be able to uh one sec let me get out of this here I'll randomly select elements from the symbols array when we are inserting them in our reels okay so let's do this we're going to say const reels is equal to and then we're going to create three nested arrays now this is simply an array inside of an array you can do that it's valid just like we add elements inside of here we can have arrays inside of arrays and each one of these arrays is going to represent a column inside of our slot machine okay so if we had a a a really you'd visualize that like a a a okay so each one of these kind of nested arrays is a column and we're going to generate what's inside of them using this symbols array okay how do we do that well we need to go through each one of our reels so we're going to say four and then this is going to be let I actually yeah we'll say let I equals zero I is less than and this will be the number of columns that we have and then we're going to say I plus plus so this first for Loop here is going to be for each one of our reels so for every single reel that we have or every single column that we have we need to generate what's inside of it then for every single column we need to pick the three elements or the X elements whatever the number of roses that we have that are inside so then we're going to say 4 and we're going to say let J equals zero J is less than rows and then J plus plus like this so we have a nested for Loop the reason we need that is because we have nested arrays so for every single array generate the number of rows and number of elements that need to go inside of that array or inside of each reel hopefully that's making a bit of sense but that's kind of what we're doing here now in case you're confused by this syntax the way this works is we Define some counter variable that we can use while we're running through this for Loop to keep track of how many more iterations or Loops we need to perform we then set how many Loops we want to do so we say while I is less than the number of columns that's what this means it means while I is less than the number of columns keep looping as soon as it's equal to or greater than we're going to stop then we have what's referred to as our increment we're saying every time we do this Loop one time increment the variable I by One allowing us to keep looping keep track of what Looper on and then eventually exit the for Loop so obviously same thing is happening here uh for J I'm just using a different variable because we can't have the same variable for both of our loops all right now inside of here we need to randomly select elements from our symbols but remember that the elements that we can have or the symbols we can have in each real are for each real so what I actually need to do here is create another variable I'm going to say const real yeah yeah we'll say real symbols is equal to and then this is going to be an array now actually what this is going to be is an array and we're going to say dot dot and then symbols now what this is going to do is just copy the symbols that we have available to choose for each reel into another array the reason we're doing that is because for every single one of our reels these are all the available symbols that we have so what I'm going to do is randomly select a symbol and then I'm going to add that into the real and I'm going to remove it from the available symbols to continue to select so if I already use two A's in one real I can't have any more A's I need to remove them so I don't pick them again but when we move on to the next real we have to have those A's available for the next real so I can't be removing elements from this symbols list I need to remove them from one that's specific to each reel so inside of our for Loop remember this is for every one of the reels that we have we generate the available symbols then we're going to remove from them as we add the symbols into each reel I know this is a little bit confusing and I said real probably a hundred times there hopefully it's a little bit clearer why we're doing that but it's because each reel has has their own symbols that they can pick from so we need to have a copy of the available symbols that we're manipulating inside of the for Loop okay let's continue here I'm going to say that our symbol so I'm going to say const selected symbol is equal to and then I need to randomly select an element from this array now the way I randomly select an element from array is I randomly choose an index or a position in the array so quick recap here if we have some things in our array say we have a b c each one of these things has an index in the array now the first index is zero the next is one and the last is two so you always start at zero you count up by one fairly straightforward so what I want to do is randomly select one of these indices or indexes and then choose the element there remove it from the existing array and insert it into my real that's what we need to do so we need to randomly pick one of the indices now how do we randomly select an index well we need to use our random function so we are going to say uh actually this is going to be real symbols at the index now the way that you access elements at a specific index is you write square brackets and then you put 0 1 2 3 whatever the index is so for accessing the fourth element we put index three now the question is what is the random index so we can go here and say const random index is equal to and then in all capitals we're going to type math dot random and we're going to multiply this by whatever the length of our real symbols is so we're going to say real symbols dot length and then we're going to put around this math dot floor okay then here this is going to be random index like that all right what are we doing well we are generating a random index now what I've done is I've taken math.random and math.random is going to generate a random number between 0 and 1. so it's a floating floating point value between zero and one then we take that number and we multiply it by whatever the length of our symbols is that means that the maximum possible number that this expression is going to generate for us is going to be however many symbols we have it's the maximum possible number then we're going to say math dot floor now the reason we're doing math.floor is we're going to round this number down to the nearest or to the lowest whole number so if we had like 1.9 we're going to round it to 9. the reason we do that is because really the possible numbers that we can pick from the possible indices we can pick from is the length of our array minus one so we don't want to round up because that would give us an index that's possibly out of the array we need to round down so we get one that is less than the real symbols.length so again just to kind of clarify what's happening here this is going to generate a random number between 0 and then whatever the length of our reels is minus one and then we can use that to select the element or the symbol from our real symbols array I know it's a bit complicated here but that's why I wanted to do this project to give you a bit of a challenge so now that we have our selected symbol and we know the random index we're going to first say reals and then this is going to be at index I now index I is going to represent the real that we're currently working on so if we're working on the first real I zero so it's index 0. if it's the first real or sorry the second reel then I is 1 so it's index one so I'm going to say reals I dot push so I'm pushing into the interior array the selected symbol okay we're almost done last thing we need to do is remove this symbol so we can't select it again while we generate this real so we say reels symbols dot splice and we're going to splice at whatever the random indexes that we selected because that's the position that this element exists of that or this symbol exists of that and then we're going to put one now one just means remove one element so that's all we need for that and random index is the position at which we're removing that element so we're selecting the symbol at this index we're adding it into this array here and then we're removing it so we don't select it again when we continue generating this real and that's all we need for generating our reels now we can return the reels like that now I just want to quickly uh print out what we're going to get for our reel so I'm going to say const reels is equal to spin just to make sure this is working before I go on to explain too much more stuff I will walk you through this again but let's just quickly run this so I'm going to say node project.js and then notice this is what we get for our reels so c d d d a d d d now notice we get a lot of D's because we have eight of them available in our symbols cap if I run it again so let's just get out of this okay and run it one more time I notice that we get different values here in our reel so it is indeed random okay so that means now that we have completed these four deposit some money determine the number of lines collect a bet amount spin the slot machine now we need to check if they won which is fairly simple we need to give the user their winnings and we need to play again let me quickly recap what we did here then we'll get into those steps so we started by generating an array of all of the available symbols that we can pick from when we are going to choose what's inside of each reel randomly choose so this contains all the available symbols then we create an array here kind of temporary array that we're going to add to that has all of the different reels so we have one real second reel third reel we Loop through all the reels that we have which is represented by the number of columns now really I just realized uh it's a little bit flawed what we're doing here because if the number of columns is different than three we're going to get a bit of an error here so I'm just going to quickly fix this even though I don't love changing this all right now by saying reals.push and then I'm going to push an array here and now we can remove this the reason that's going to work is because for every single real or column we have we add one inside of here okay and then once we add it we can now push elements inside of that reel hopefully that fix uh makes a bit of sense anyways once we do that we then copy all of the available symbols that we have so we now have kind of a unique array to pick from for this specific reel then we Loop through all of the rows all of the rows is the number of symbols we're going to have in each reel and we randomly generate one of the available uh symbols we pick one of the symbols that are available and we insert that into our real so we say our random index is this we get our selected symbol so that's going to be whatever the symbol is at that index we push that into the current reel that we're working on which is represented by I and then we remove that from the available symbol so we don't select that again perfect okay then we return reels and we are all good let's continue now and work on generating or checking if the user won anything all right so let's go ahead and continue now first thing to mention here is that with our reels and by the way I'm just going to take these and move them down because that's kind of The Logical order we need here uh our reels look like this when we get them so we have a raise right and each one of our arrays let's just do a b c maybe d d d uh a a a uh these are our kind of vertical um columns right these are yeah our columns now what we want to be doing when we're checking if a user is winning is we want to check in the rows now right now based on the way that we have our data it's going to be a little bit difficult to check each row and see if every element in the row is um is the same so what we're going to do is we're going to transpose this array into all of the rows so again I know this is a little bit weird but these right now are our columns what we we want to have is an array that has all of our rows once we have the rows we can then check who's who's winning or what row is winning and we can then present that to the user so when we're looking at this right we have these as our columns but we want to instead have it like this where we have rows so our rows would look like this a d a and notice I'm taking a d a because that's what's going to be in row one these are all in unique columns then we're going to have b d a and then we're going to have c d a again if we look at Row 2 here that's b d a we look at Row three c d a so we need to turn our data into this format and then once we have that we can continue now this is called transposing a matrix or transposing a 2d array whatever you want to refer to it as so we're going to write some code that does that we're going to get the transposed um kind of Matrix reels wherever you want to call it then we can check who's winning or what rows are winning uh how much money they want Etc and we can continue from there so let's write a function here uh let's actually just call it const we're going to say transpose again this is going to give us the rows so we're going to take in our reels and we're going to transpose them so how do we transpose well first we need a new array so we're going to say const uh we'll just call this rows like that and for our rows uh that's fine for now so what we're going to do here is we're going to create a for Loop that goes to the number of rows that we have for each row so row 0 Row one row two or Row one two three whatever you want to refer to them as we're going to collect all of the elements from our columns that are in that row and then push that into the rows array so we're going to say 4 let I equal zero I is less than and then this is going to be the number of rows and then I plus plus okay then what we're going to do is say Rose dot push and we're going to push a new row because for every single row we need to have an array that represents that so we push those inside of here then we're going to say 4 let's J equal 0 J is less than and then this is going to be the number of calls and then J plus plus like this so for every single row Loop through every single column so now for every column that we have we're going to grab the uh the element that's in the first row in that column and push it into our rows array so we're going to say that rows at row I because that's the current row that we're building dot push and then we're going to push the reels at and then this is going to be column J at row I I know seems a little bit weird but we're accessing each of the individual columns so we're going through the three columns that we have or however many columns that we have so we're accessing that column then for each one of those columns we're getting the element in the row that we're currently building which is represented by I okay then we can simply return our rows and that's how you transpose now I'm going to print this out and you'll see what the transposition looks like and then it'll make this a bit more clear okay so we have our reels now I'm going to say const uh let's call it rows is equal to trends pose okay and then we're going to transpose the reels now we're going to just console.log the reels and then we're going to console .log the rows and you'll see the difference in how that transposition occurs so let's run this say node project.js okay let's run through this and here we go so we can see that we have all of our individual columns so CID c d c d b d now let's look at our first row remember this is kind of flipped so for our first row we have C C and then D that's what we want for our second row we have a d and then B okay and then for our third row we have d c b so now that we have those what we can do is simply print those out and we can kind of represent to the user what it is that they actually spun okay so we're going to make another function here that's going to print our rows so we're going to say const print we could say print slot machine or print rows is fine and we're going to take in our rows we're just going to print out all these elements in some kind of styled way okay so we're going to Loop through every single one of our rows and then prints we're going to say four and we're going to say let I actually do we need to go I I'm going to say for cons row of rows okay then we want to Loop through every single row and kind of build a string that represents that row and then print that out so I'm going to say let row string equal this is going to be an empty string and essentially what I want is this like a pipe B pipe C and we're going to build that uh using a for Loop going through each of the elements in our row now by the way this is iterating by item which means that I'm going to get an array here so I'm looping through every array every nested array every row inside of my rows array remember it's a two-dimensional array so this will be an array that I can then Loop through and get each of the elements okay so we have our row string here and I'm going to say four and this time I need to do um a different style for Loop here I'm going to say for const and then we're going to go with I symbol of row dot entries I think I can access dot entries on an array we're going to see if that works then we're going to do the following we're going to say row string plus equals and then this is going to be the symbol so when you do plus equals you're kind of concatenating a string so you're adding elements into the string so if I go plus equals a to my empty string I get a if I go a plus a then I get a a so that's what we're building here okay that's what we're doing with the concatenation then we need to determine if we're going to add our pipe operator or not now we're only going to add the pipe operator if it's not the last symbol that we have because again we have a b c we don't want to have a pipe here so we need to make sure we don't add that so we're going to say if I does not equal rows.length minus 1 because this is the maximum possible value I can be equal to then what we'll do is we'll say row string and then this is going to be plus equals plus equal story and then we're going to add a space and a pipe and a space I think that is correct and then in terms of this here sorry I'm just going to change this to say row dot entries and then this is going to say row dot length I don't want to use rows we're already doing that here we want to Loop through our individual row now that we have the row string we're going to say console.long log sorry the row string and now we're going to print each of our individual rows and they'll be nicely laid out and we'll kind of see each of the elements that's in each row and column hopefully that's making a bit of sense again we're going through every single Row in our rows that's going to give us an array representing the elements in that row we're then going to Loop through both the index and the element that exists in this row so if we have rows like a B C then what we're going to be getting here is zero so zero a 1 b 2 C because it gives us the index as well as the element we're then checking okay is the index the last index or the last element if it is then we are going to not put the pipe if it isn't then we're going to put the pipe and the separator in this string so we build this string up and then we can print it out here and that's fine for printing the rows so let's go print rows rows like that let's go here and clear and rerun okay let's do this here and there we go we get our nicely printed slot machine now in this case we didn't win at all but if we did win well that's what we're gonna handle next seeing if user one giving them their bet amount or whatever they want Etc okay so let's just quickly recap here we've done depositing some money determining the number of lines collecting a bad amount spinning the slot machine we then transpose the slot machine now that we have it transpose it's going to be really easy to check if the user won we're going to do that and then we need to determine their winnings uh to get back to them right okay so let's go ahead and do that so we're going to say const get winnings all right now to do this we're going to take the rows we're going to take the BET amount and we're going to take the lines that the user bet on that's what we need to know to be able to determine what they want if they only bet on one line we're only checking the first row the bet on two checking both those rows if they bet on three then we're checking all of the rows okay so let's go through this so we're gonna Begin by saying let's winnings equal zero and then we'll add to that whenever they win something all right so to do this we're going to Loop through all of the lines which is really the row indices that we want to be checking so we're going to say four and we can say let row equal zero row is less than lines row plus plus now the reason this for Loop is going to work for us is if lines is one that means we're only ever going to look at row at index 0. if lines is two we're going to look at index 0 and index one which will be the first two rows if it's three we look at zero one and two and that means that we're going to look at all of the rows that are inside of R well rows okay so now we're going to say const um symbols is equal to and then this is going to be rows at whatever the row index is all right so now that we have all the symbols we just need to check if all of them are the same so I'm going to create a variable here and I'm going to say let all same equal true now what we're going to do is if we find that one of the symbols is not the same we're going to make this variable false we're then going to use that later to determine if the user won in this specific row okay so we're gonna go four and then we're gonna say const symbol of symbols Again iterating by item here looking at each of the individual symbols all we're going to do here is we're going to say if the symbol does not equal symbols at index 0 then we're going to say all the same equals false and we're going to break out of the fourth there's a bunch of different ways to go about doing this what I'm doing is not necessarily the most efficient because we're going to be repeating a certain check but it's fine for the purposes of this tutorial so the reason I'm doing this is I'm saying okay I'm going to Loop through every single one of the symbols that I have now if every single symbol that I have is the same as the first symbol all of them are going to be the same so I'm just using the first symbol AS what it is that I'm going to compare against and again if all of them are the same as the first symbol then all of them must be the same so in the situation where one of them is not the same so symbol does not equal symbols at index zero then I'm going to say all same equals false and then I'm going to break out of this for Loop because there's no reason to continue looking if on one of the symbols is not the same now this break keyword as I just described is simply going to exit the for Loop so it doesn't matter what iteration you're at if you see this break keyword boom you're done iterating so we're setting all same equal to false and that means we did not win in this specific line or in this specific row so now we come down here after we've iterated through and if all the same is false we didn't win all same is true we did win because if it's true that means we got through here this was never the case and that means that all of the symbols are the same so we're going to say if all same then winnings and this is going to be plus equal the bet multiplied by and then this is going to be the not rows sorry the symbol values at symbols at index 0. I know a little complex here but remember symbol values is what we have all the way up here we have five four three two right this is the multiplier so we need to find that multiplier uh and multiply that by our bet so if we had a row of A's then we're going to take whatever our bet is and we're going to multiply it by five again we're only doing that if all the symbols were the same we're determining what the symbol is that we want to look for the multiplier for by just grabbing the first symbol in the row at this point we know that all of them are the same so we could really grab any index from the row but we know we're always going to have at least one symbol uh so this is fine to do okay so that's actually all we need for this now we're going to return our winnings all right uh hopefully that is all clear I think that that is correct if I made any mistake of course I will fix that and also let me just get rid of this actually no we want the const.log sorry I don't know why I was gonna remove that all right so now after we print our rows we want to determine what the uh the winnings is we're going to say const winnings is equal to get and did I call this winnings yes and then what do I need to pass here my rows my bet and my lines so we're going to say rows we're going to say bet and then we're going to say lines now I just want to confirm here what the bet is actually going to be because if the bet is the total bet that's not what we want we want the BET per line so let's look at get bet okay so get bet uh return number bet yes okay so it looks like the bet that we're returning here is the bet that we have per line which is what we want uh because that's what we're multiplying by if we have an entire line okay so now we have our winnings now I'm just going to print you one and then we can say comma and a dollar sign and then we can say plus and sorry this is not print this is console.log I'm writing in Python right now and then we can say plus winnings and I don't know if we have to dot two string or not uh but I'm going to put this dot two string okay so we have cost winnings equals get winnings rows bets lines it tells us how much money we won so we're gonna get that and we're gonna print out U1 and then whatever that dollar amount is then we're gonna have to kind of continue this game a little bit but for now this should give us one round or one spin of the slot machine so let's try this okay enter a deposit amount let's deposit 100 let's bet on all three lines let's enter the BET per line of maybe ten dollars and we got an error here it says lines is not defined okay so that's at line 144 uh lines here Ah that's because we need number of lines okay so that was the issue let's quickly fix that let's come back here and Run 100 3 and then ten and we won zero dollars okay let's try it again 100 3 10 you won zero dollars uh okay hopefully we're gonna win something so let's see here three ten you won twenty dollars okay perfect and the reason we won twenty is because we uh bet ten dollars on three lines and we won with this line here giving us twenty dollars because we had a two times multiplier with the D's now if we want to multiple lines of course we'd get the winnings for all of them all right so that is really the core Logic for our game now what was the last thing we need to do here we need to give the user their winnings and we need to play the game again so let's work on that uh and once we do that then we're gonna be finished this game all right so how are we going to turn this into a fully functioning game we have the core logic here but after we determine what the user wins we need to give them those winnings we also need to subtract whatever their bet is um from their balance right so let's make a function let's say Define are not defined again I keep writing in Python sorry guys we're going to call this game now this will just be one round uh will this be one round of the game no it's okay this can be the entire game so we're gonna go game and then we're gonna call the game function down here uh just to kind of clarify where everything is for our code okay so we start by determining the bounce that's fine then we get the number of lines the bet the reals the rows Etc now all of this stuff here we're gonna do no matter what right we're just gonna keep playing if the user wants to continue playing so I'm going to say while true here and then I'm going to do all of this okay now we're going to add some more code obviously but we're going to keep doing this if they run out of money then we are going to break or if they say they don't want to play anymore then we're going to break the while loop and kind of get out of it so we start get the number of lines we get the bet we get the reels we get the rows we print this out we get the winnings now let's start handling some logic here so after we collect what the user's bet is we are going to take the balance and we're going to subtract so minus equals this means take the balance and subtract from It Whatever the bet is multiplied by the number of lines because this bet is per line so whatever number of lines I bet on that's what we're removing okay so we remove that from the balance subtract it then we generate our reels we print the rows we tell the user what they want and then we have to add this to their winnings so we're going to say balance plus equals winnings perfect now at the top here we should probably always tell them what their balance is so they know what it is before they spin again so we're going to say print you have a balance of and then we're gonna do a dollar sign and then we're gonna do a plus and then we're going to put the balance so that it looks like it's money okay so we print what their balance is sorry this needs to be console.log I'm gonna keep making that mistake we have the winnings and now all we need to do down here is we need to check if they have zero dollars left if they do then we are going to quit the game or we're going to ask them do you want to walk away do you want to stop gambling Etc if they say yes then we're gonna break so I'm gonna go here I'm gonna say if the balance is we can say less than or equal to zero but really it's never going to be able to be at that but that's fine we'll say if it's less than or equal to zero then we're going to break but first we'll go console.log you ran out of money exclamation point okay and then we're going to say after this we're going to ask the user if they want to play again so we're going to say cons play again is equal to prompt do you want to play again question mark and then we're going to accept as an answer either y or n and if they type anything other than why then we are going to quit so I'm going to say if play again does not equal y then we can simply break notice that when you're just doing a one line um kind of if statement or you have a one line body you don't actually have to add the curly braces here you can just write it directly after the if statement so if they didn't type yes to wanting to play again then we're just going to break and leave the game otherwise we just keep playing so if they run out of money we quit or if they tell us they want to leave then we break okay hopefully that's clear Let's test our game make sure everything's working uh and then that's gonna pretty much wrap up this project so let's go here node project.js let's deposit 100 we have a balance of 100 enter the number of lines to bet on let's bet on two lines enter the BET per line let's do five dollars you won zero dollars okay do you want to play again yes you have a balance of ninety dollars and to the number of lines to bet on let's bet on three lines a per line of ten dollars you won zero dollars do you wanna play again all right this isn't going too well for us you have a balance of sixty dollars that's a number of lines to bet on three bet per line two we won six dollars so I guess we had a three times multiplier there with our C's play again and you get the idea we can continue playing this obviously we could clean up the terminal a little bit make it a bit cleaner and kind of easier to understand let me just go through this here so I can quit and exit but I think that is going to do it for now all right so let's quickly run through everything one last time I'll just like kind of high level overview the code and everything that we did by the way all this code will be available from GitHub then we're going to wrap up the video so first of all we have prompts or requiring this module so we can get some user input we Define some Global variables here we do them in all capitals just so it's clear there constants and they're at the top of our program okay we have our function deposit talked about that continually ask the user for a valid deposit get number of lines get the number of lines or rows in this case that the user wants to bet on get the BET same thing we're going to get a valid bet amount per line based on the balance uh that they have and the number of lines they are betting on next we are going to spin the slot machine to do this we need to generate all of the possible symbols in each wheel we then need to randomly select them put them on a real uh and that's what we've done okay then we have transpose this is kind of a helper function that's going to convert all of our columns into all of our rows so we can better use this information it's easier for us to check if the user want anything and it's easy for us to kind of print out this information next we have print rows again this is just going to print out all of our rows and kind of nice fancy formatting then we have get winnings determining all of the winnings in user one from the specific rows or reels that they had in the slot machine lastly we have our game function where we continually play the game until the user runs out of money or until they tell us they don't want to play anymore alright so I hope with that said you guys have learned a lot in this video I know this is not perfect again I was doing this just from scratch I didn't have any cheat sheet this was just me thinking about it on the Fly I wanted to show you how I think about problems how I solve problems how I structure the program and hopefully you guys found some value in that if you like these styles of videos let me know in the comments down below I always appreciate all of your support and your feedback really you guys the ones who give me all the kind of ideas for videos to make and someone on a previous video said hey you should make a video like this for JavaScript so that's what I did regardless I hope you guys enjoyed if you did make sure to leave a like subscribe the channel I will see you in the next one [Music] foreign