Learning JavaScript Through Soccer: How to Create a JavaScript Soccer Game

Learning JavaScript requires great focus and enthusiasm for technical challenges. When I think back to the first time I learned the popular coding language, I remember having trouble being excited about the various tutorials and books I had to read. It almost felt like I was back in elementary school, slogging through Algebra.

Thinking back on that time, from where I now stand as a veteran coder, I thought about what I would have wanted as a learning resource to make JavaScript easier and more fun. I decided the best option would be to incorporate a fun game that already existed into one about learning coding.

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!

So I set out to make a comparison that would provide potential young readers a more fun way to learn. I called it JavaScript Soccer!

Over the next few graphs, I will help teach readers about how to get started with a rudimentary version of a soccer game made only with JavaScript. It will require a bit of imagination and a couple of big technical leaps. But I think it’s doable for most people getting started learning about the language.

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:
–> Barcelona  
or  
–> 3
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.

NOTE: To make long words easier to read, JavaScript uses camel case, which is TK. So, instead of queensparkrangers, we would write queensParkRangers.

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:

“iLoveSoccer”

And also numbers, like this:

“10Players”

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.

How do we create variables? Easy – just by using the JavaScript keyword var

What’s a ‘keyword,’ I hear you ask. Well, as JavaScript has special words that can’t be used for names of variables (or functions, which we’ll talk about later). In other words, they’re specially reserved for the language. Some keyword examples are ‘var’ and ‘goto’. There are over 60 of these reserved words which will be familiar if you’ve programmed before. If not, don’t worry.

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

If you’ve got the eyesight of a great referee (is there one?!), you probably would have noticed a semicolon at the end of the line of code (or ‘statement’).

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:

And if and when a team scores we’ll let JavaScript work out the new score. It can do all the math for us; in this case, addition. We don’t need to create any new variables, we just increase the contents of the variable of teamOneScore by 1 by using the plus and equals sign. Let’s pretend that LA Galaxy have scored:

Here’s the before:

… and it’s a …

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:

Also we’d have just joined (or glued) the string (the team name) with their score. This is called a string concatenation in JavaScript – and we don’t want to ‘glue’ the team name to the score.

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.