Before I became a programmer I loved to play games. I played games for many years before I even knew the most basic concepts about coding. However these days I see that people are trying to introduce their kids to programming and looking for ways to make programming concepts more approachable. I think that using existing games people love is a great way to do just that. That is why I wanted to start this new coding for gamers blog series. In this tutorial I will show you how to do that by walking you through the process of extracting a feature from a video game called The Long Dark and recreating it on your own. If you are reading this you might already have at least some interest in The Long Dark, and may have played it. But I will briefly explain the game just in case. The Long Dark came out on Steam several years ago and had a beta release that was primarily a survival simulator. The game takes place in the Canadian far north where a mysterious phenomenon has caused all of the power to stop working. In the original simulator, your goal was essentially to survive as long as possible by staying hydrated, nourished, rested, and avoiding freezing to death. You could choose between different environments to try your luck in, some which have a range of man made shelters and some which have nothing but a few caves dotting a barren landscape teeming with aggressive wildlife. An example of some aggressive wildlife. You can see the health meters at the bottom left By releasing a minimum playable version of their game early, The Long Dark developers gave players something to continually look forward to and give valuable feedback on as they added more features to create something truly spectacular. Now the game has a fully fleshed out story mode with multiple seasons and difficulties in addition to special challenges. Whether you’re developing a game or an application for a startup, the idea of slowly adding on features and polish over the course of time is the most logical and sustainable way to build a good product. It goes to show that when you learn to code with games like The Long Dark, you might be surprised by how many lessons will transfer over from games to other types of development. It goes to show that when you learn to code with games like The Long Dark, you might be surprised by how many lessons will transfer over from games to other types of development. Examining games from a developers perspective and extracting a feature to recreate can also help you get into video game coding, so it’s a win win. While its good to talk about strategy and general practices like building off of something small, I want to get into actual coding in this post. After all you can’t learn to code with games unless you actually write some code! In particular, I want to show you how we can take a feature from a game like The Long Dark and try to replicate it with Javascript code. I suggest starting with something simple, like a hunger meter. We could define a variable like fullness. fullness = ; let 100 Why fullness and not hunger? Certainly nothing is stopping you from calling the variable whatever you want, but in my mind it is easier to call it fullness because then I can set it to 100 and know that means “completely full.” Whereas if I used hunger, I might be confused. Does 100 mean 100 percent hungry? Hunger doesn’t make as much sense to measure by percentage as fullness. In The Long Dark, you get hungrier the longer you don’t eat. That means we need something to measure time. Since it’s a video game, time also goes by a lot faster than in real life. So let’s say every 30 seconds translate into 1 hour. We could use a Javascript function like setInterval that would get called every time 30 seconds have passed. You can read more about the function and test it out . here Note the double slashes in the code below indicate comments. setInterval( { 
   fullness = fullness - ; .log( , fullness);
}, ); ( ) function 5 //subtract fullness by 5 percent console "logging fullness" 30000 // 1000 is 1 second (in milliseconds) By assigning fullness the value of itself minus 5, I am essentially decreasing fullness by 5 percent. Then I am logging out the new fullness value to the console, so I can confirm that my function is working. Having to wait 30 seconds to confirm my function is working can be a little bit annoying, so you can reduce the number of milliseconds to 1000 temporarily for testing purposes. If you’re using a coding editor in the browser such as (I’ll be including a Codepen link a little further down) the console can be opened up by clicking on the “console” button in the bottom left corner of the editor Codepen So now we have a fullness value that decreases over time, but what about eating? In The Long Dark you can eat all sorts of things. If you scavenge you can find canned beans, peaches, even dog food (ew) to eat. Or you can go fishing or hunting. Each type of food has a different number of calories which affect how much your fullness meter gets filled. For now, let’s just create four foods. A granola bar, some canned beans, a pound of deer flesh, and a rainbow trout. Let’s say 200, 450, 800, and 150 calories respectively. deer = ; granola_bar = ; beans = ; const 800 const 200 const 450 Now you might be thinking we have a problem, and you would be right. If we are counting our fullness as a percentage and our food in calories, how will we add them together? Looks like we will have to make some changes to our existing code, after all. The average man needs to eat about 2,500 calories per day. For the sake of simplicity, let’s say that is the number that constitutes 100% fullness. maxCalories = ; currentCalories = ; fullness = ; trout = ; deer = ; granola_bar = ; beans = ;
 
setInterval( { 
   currentCalories = currentCalories - ; fullness = (currentCalories/maxCalories) * .log( , fullness);
}, ); const 2500 // maximum calories you can eat let 2500 //calories you need to eat per day let 100 // still keeping percentage for display purposes const 150 const 800 const 200 const 450 ( ) function 60 //subtract fullness by 60 because we burn 60 calories per hour while sitting 100 //calculate fullness percentage console "logging fullness" 30000 // 1000 is 1 second (in milliseconds) Above you can see I’ve added two new  variables, and , which make it very easy to do our math in setInterval to calculate the fullness percentage. Just divide by and multiply by 100. We also are subtracting 60 calories every 30 seconds because that is how many calories we burn per hour when we are sitting. Now we are ready to add an eatFood function. This one should be very simple. Just updating , right? maxCalories currentCalories currentCalories maxCalories currentCalories eatFood(food) {
   currentCalories = currentCalories + food;
} At first glance this would seem to be enough, but ultimately we will want to display the fullness data and update it every time changes. In that case, it makes sense to create a function for updating fullness as well, to avoid rewriting the math multiple times. Let’s take a look at the whole thing again (minus the variables). currentCalories setInterval( { 
   currentCalories = currentCalories - ; updateFullness()
}, ); updateFullness() {
     fullness = (currentCalories/maxCalories) * .log( , fullness);
}

eatFood(food) {
   currentCalories = currentCalories + food;
   updateFullness(); ( ) function 60 //subtract fullness by 60 because we burn 60 calories per hour while sitting 30000 // 1000 is 1 second (in milliseconds) 100 //calculate fullness percentage console "logging fullness" I moved the console.log message into the function so that you can see what happens to fullness when you eat food. In my , I have buttons that the user can click to eat the different kinds of food, but since I am sticking to Javascript for this tutorial there is another way you can call the function in the code for now. updateFullness Codepen example Just like we called inside the setInterval and eatFood functions, you can call by typing and just adding whichever food you want to eat inside the parenthesis. That means would pass the beans variable into function. updateFullness eatFood eatFood() eatFood(beans) If you throw in a couple of functions at the top of your code, you will notice that your log statements will become problematic. This is because we don’t have anything checking for fullness being greater than 100 percent. We can fix this by adding an if statement inside the function. eatFood() updateFullness We don’t want this to happen, since you cannot be more than 100% full updateFullness() { ( (currentCalories/maxCalories) * &lt;= ) {
        fullness = (currentCalories/maxCalories) * } {
        fullness = ;
    } .log( , fullness);
} if 100 100 100 else 100 console "logging fullness" This if statement will make it so that fullness gets updated to 100 if eating the additional calories would make fullness exceed 100 percent. Otherwise, the same calculation will be performed as usual. In my I also introduced a death state where if your fullness gets to 0 you can no longer eat food and your status displays as dead. The logic for that is very simple, just checking if fullness is 0 and then setting a variable dead to true. Then inside the function you add another if statement preventing being added unless dead is false. Codepen example, eatFood currentCalories Another thing you will notice in Codepen is additional if statements for judging what to display for the current hunger status as well as for what color the health bar is. I’ve essentially added a simple GUI for users to interact with. If you want to add this functionality, check out these resources for creating a and . The only additional Javascript that I am using is and changing the style and innerHTML of the selected element. You can read about that and . You can check out the Codepen  code and play around with it below. progress bar buttons document.getElementById here here There is a lot more you can do from here. You could create a hydration meter using some of the same code we already have. You could get closer to replicating the functionality from The Long Dark by adding a general health bar that begins to go down only when your hunger becomes very low. That would be more realistic since you obviously don’t immediately die when you didn’t eat 1 days worth of calories. I encourage you to explore what you can build on top of this code and can’t wait to see what you make! Hopefully this has helped give you some encouragement. If you’re hungering for more, check out my. next coding for gamers blog post . here If you enjoyed this article, consider following me on Twitter nadyaprimak or if you need more tips on breaking into the tech industry, you can read my book “Foot in the Door” in paperback or Kindle now. This post was originally published at www.nadyaprimak.com

CodePen

Twitter

Get my list of top creative coding resources for free!

Winner of Noonies 2020 for the award Hacker Noon Contributor of the Year - USER EXPERIENCE.

2020 - Hacker Noon Contributor of the Year in USER EXPERIENCE

Too Long; Didn't Read

Discover Saakuru: Web3 Mass-Adoption with 0-FEES

Coding for Gamers: The Long Dark

Too Long; Didn't Read

Companies Mentioned

Nadya Primak

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Coding for Gamers: The Long Dark

Too Long; Didn't Read

Companies Mentioned

Nadya Primak

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES