The first step was to think of a game that had a lot in common with coding. That sport was soccer, or as they call back in the UK, football.
I’ve been following football since I was very young – I even got my mum to sew a number 7 on my Liverpool shirt so I could pretend I was Kenny Dalglish! It was accidental how I connected the two: it just kind of clicked one day and just knew that it would be a really unique and fun way to learn coding. It turns out I could use loops for timing the game, variables for team names, arrays for substitutions!
I’d like to add that I’m learning about how to create a tutorial of this type for the first time, so if I make the odd mistake, I’ll make sure it’s not so bad and easily explainable. If one of the commenters has a better idea about to improve the post, please let me know and talk soon.
Are you ready for kick off? Let’s do it!
Strings and Values
NOTE: Where you see this arrow in green, like this:
this shows you the code output.
In other words, this shows you what the code does!
We’re going to start by understanding strings and values. Strings are values which can hold almost kind of character, such as letters. For the purposes of our game, we’re going to have a match between two teams, my hometown LA Galaxy and the formerly best team in the world, Barcelona FC. First, we’ll store their names in two separate variables, teamOne for the LA Galaxy, and teamTwo for Barcelona. Variables are great – they can store information, so they’re like containers, and the information can be changed (hence their name).
We’ve set up two variables here, which in our soccer example will hold team names. But we could create as many variables as we need – and with all kinds of different variable names. We just need to make sure that they all have different names. We’re the manager here so we get to choose!
Variables should be one word long, but without spaces. But how do you write Queens Park Rangers as a variable? You’d use camel case, where you capitalise the initials of the 2nd, 3rd, etc words.
Also, as the team names contain letters, they go inside quotes, making them strings. The quotes store information, so we can change the information later on if needs be. By the way, strings are values which can hold almost any kind of character, such as letters:
And also numbers, like this:
These names can be changed because it gives us the option to change the information in future. Imagine if we’d spelt something wrong, like Ronald instead of Ronaldo. As well as a very irate footballer we’d have to make sure we corrected ALL our code. And code can run to 1,000s of lines. That’s the beauty of strings – we can just correct it once in the string and then the variable contains the updated, correct information.
As we can create variable names ourselves, we want them to be as descriptive as possible, so when we come back to our code after a few weeks, or even months, we can understand the code better.
Here’s a good guide if you want more information: https://www.w3schools.com/js/js_reserved.asp
And if you miss it off? Well, it’ll break your code and it’ll be game over before you’ve even started. Chances are, if your code doesn’t work it’s probably because you’ve missed off a semicolon.
Also, you might notice that some full stops are missing at the end of sentences which feature code. This is deliberate, to keep the code as clear as possible.
So now we have a variable called teamOne which contains the team name LA Galaxy and another variable called teamTwo which contains the team name Barcelona.
Why use variables? It’s just easier to keep track of things as your code gets longer and longer. And codes for programs can get quite long. Easily hundreds of lines for very small programs and thousands can be very common. Also, imagine you made a typo in your team’s name. D’oh! If you hadn’t created a variable like teamOne to store the team’s name in, you’d have to trawl through all your code, replacing every single occurrence of the wrong team name with the right one. By creating a variable, you just need to make the one alteration.
The scores will change (we hope) and so we’ll and assign the number of goals each team scores to two new variables: teamScoreOne and teamScoreTwo.
Also, as it’s the start of the game, there are no goals. Let’s assign 0 goals to LA Galaxy using a new variable called teamOneScore
In programming talk, we would declare a variable and then initialize it. In soccer talk, we’d just give it a name and a value – and do both at the same time.
We can check this:
Let’s give Barcelona 0 goals too:
Here’s the before:
How do we add 1 to teamOneScore? Like so:
It’s shorthand for this:
Remember we came across the equals sign earlier? It was playing the role of assigning values to variables. Now it’s jumped back into its more familiar position that we all recognise from maths’ sums.
So this pesky equals sign:
is like a team’s star forward on a night out – one to keep an eye on!
As we’re just increasing the score by one – and if we’d started with 0 again – we can even write it like this with two plus signs ++.
This is by far the easiest way to go when we’re increasing numbers by the same amount each time, so let’s use it in future.
So, now we’ve added one goal to the variable teamOneScore we get:
We’ll make the team and score look a little more attractive to look at now (and by attractive I mean it’s easier to read):
Woah! There’s a colon, some plus signs and quote marks. What’s going on here? Basically, it’s just a long-winded way of showing the team name, a colon, a space and then the score. If we had just put this…
…we’d have got this, which wouldn’t have looked so good:
So, to recap, this looks much nicer, so let’s stick with it:
Anyway, back to numbers. A match lasts 90 minutes (if there’s no injury time) so we’re going to need a new number to keep track of time, otherwise we won’t know when time’s up. Let’s create and declare a new variable: timePlayed
We’ve had our fun, but we’ve not yet started the season and the fans are getting restless. Yes, that was a preseason game! So which players will make it into the team for the season? Who will score first? In the next post we’ll start from 0-0 and look further into the wonderful world of arrays.