Your Favorite Games
Incremental Lesson 6 - Your First Building
About this tutorial
In lesson 5, we introduced the concept of timers and used one to automatically increment the player's money value by 1 every second. In this lesson, we'll be discarding that and replacing it with a building that the player can purchase.
Buildings are an important aspect of incremental games. They can be referred to by many names, but the concept remains the same: automate production. In our case, we're going to create a building called "Lemonade Stand" and require the player to purchase it before it starts making money for the player.
First things first, we need to decide a few things about our building. We already have the name: "Lemonade Stand". Now we need to know how much it costs to build and how much money it makes per second. We'll make it cost "10" for now and provide "1" per second. We also need to keep track of how many the player has. Let's create a few more variables for our building. Add the following lines to your javascript file below your timer variable:
We're going to use a fairly standard naming practice here in which we use the same name for each variable and change the end depending on what we want to use the building for. The first variable, we'll just call it name for short, contains what is known as a string. A string is a series of letters, numbers, and symbols put together. Strings, in javascript, are declared just the same as any other variable, except that the string itself is contained within " ". The other three variables, cost, persec, and qty are all numbers (integers), the same as we have used before.
Now that we have the information about the building, what do we do with it? Let's put it on the screen for a start. Open your HTML file and find the "buildings" div. We're going to have to add a few more lines in here. See if you can do it on your own, as it's all things we've covered already. Don't worry if you can't, we'll still provide you with the answer.
This will provide you with the interface with which you can allow your player to buy a lemonade stand. If you didn't manage to create all that on your own, don't worry, you can just copy out the code below and place it inside the "buildings" div.
Now, you may have noticed that we've called a new function, BuyLemonadeStand(). We're going to create this function now and use it to allow the player to buy new lemonade stands. Open up your javascript file and create the new function. We're going to introduce a new programming concept here, "Logic", with the "If/Else/Endif" statements.
An "IF" statement allows javascript to compare values and determine if they are the same or not. This may not seem like a very useful thing to begin with, but it becomes more and more powerful the more complex your game becomes and is the core of programming. We're going to use it now to make sure that the player has enough money to buy a lemonade stand before giving it to them. Add the line below inside your new function and see if you can understand what's going on.
First of all, notice how the line ends with {? This is the same as functions, and denotes that if the if statement before it is true, everything within these braces must be run. What about what's between the ( )? This is where you place your comparisons. In our case, we're comparing the money that the player currently has to the cost of the lemonade stand. The two symbols ">=" denote the comparison "is greater than or equal to". There are a number of combinations you can use here, but for now, this is what we need. So if the player's money is greater than or equal to the cost of the lemonade stand, run whatever is inside the { }.
Once we've determined whether or not the player can afford the lemonade stand, we can take the money away from them and give them their new building. See if you can work this out on your own. If not, check out the code below and add it inside your if statement.
So we've taken the money away from the player and given them the new building. Save and check out your new file in your browser. Click until you have enough money and buy your building. Notice that when you buy, your money takes a moment before it updates, and nothing else seems to happen? We need to tell the browser what to do.
First of all, let's tell the browser to update the player's money and the building quantity on screen. You should be able to handle this, but if not, check out the code below.
These work the same as the changes we made before, and needs to go in your if statement after your variable changes (money and building quantity). Now if you save, you'll see that your money and quantity update as soon as you buy a building, but nothing else happens after that. You need to add into your timer to update the player's money.
We're going to change the "Tick()" function next. First things first, we need to remove the line that adds money, since we're replacing it with a building. Stay on that line, because now we're going to do a little maths to work out how much to award the player. The way we do this is to take the money that the player has and add to it the number of lemonade stands multiplied by their per second value. It's a bit of a mouthful, but it's pretty simple to do. Just remember basic mathematics, order of operations, brackets come first!
Simple right? Since we have already added the line to update the money display in an earlier lesson, we're done with our javascript! Save and reload the page to see your changes take effect.
It works like a charm, keeps track of how many lemonade stands you have, and rewards you with more money with each one you buy. Feel free to make a few more changes to your HTML file to provide a little more information to the player about what the numbers mean and a little more CSS to line things up a little nicer. The files for this lesson will already have these changes in place to make things easier for you.