Variables

Can store values and used like values.

Give them names to help you remember and keep them constant if never change:
let hoursOnPhone = 16
hoursOnPhone = hoursOnPhone + 2
const hoursToSleep = 24 - hoursOnPhone

Arrays

Are just lists of values, can be assinged to variables and have a length.

let love = ["cake", "donut", "pie"]
love[1] = "ice cream"
love.length


Objects

Have values as properties and functions that apply to them.

let myself = {name: "Melina", age: 16}
myself.age = 17
myself.name.length
myself.name.substring(2)


Conditionals

Run some code but only if you should.

let x = 3
if (x * 2 + 7 > 12) {
  x = 4
}


Iterations

Run a piece of code many times.

let talking = ""
for (let i = 0; i < 5; i++) {
  talking = talking + "blah "
}


repl.it

To code and use the game.

We will use repl.it a site that lets you code online and hosts your project Go to this link and click “fork” to make your own copy of the game to hack.

Open the link at the right and see the game in action.

Web game

A web game is just an HTML page that is made up of a main simple HTML file which then includes a styling CSS file where we can control how the game will look, and the main javascript code file that implements how it works.

CSS

Let’s start with the CSS file. It has lots of parameters that control, colors and the size of the minefield squares. Change them and see what happens - don’t forget to reload. Did you notice the comment above the line “color: transparent”? Change this and see the result. Yes the board is always there right from the time that we start to play but the text has invisible color!

Javascript

Now let’s move to the javascript code. As you can see there are many comments that explain every little part. You can copy paste each piece of the code in the developer console and see what it does. Have a look at the variable mineSize, change it and see what happens. Now how a look at the function putInTheBombs and the line putInTheBombs(15). Can you figure what it does? What do you think will happen if you change 15 to 0 or 100?

Pick your Emoji

Moving on you will see the function that creates the HTML elements for the board square buttons. Did you see that we use an emoji for the bomb? Emojis are cool right? Find out and replace the bomb with a different emoji.

Opening empty

Then have a look at the function reveal that is called whenever you click on a square. Notice that sometimes it calls itself. This does happen when you click on an empty square and all the empty squares around it open up as well.

Recursion

This is called recursion and it is also used in math. It’s pretty powerful. Let’s say that you have a function f where
f(0) is 1 and f(i) = 2 * f(i-1).
So f(1) = 2 * f(0) = 2 and f(2) = 2 * f(1) = 4.
Try to guess how much would f(50) would be. Now try to calculate it. Not easy right? Don’t waste your time - code it in the developer console:
function f(i) {
 if (i == 0) return 1;
 else return 2 * f(i - 1);
}
Now run f(50). Are you excited to try f(10000)? Sure go ahead.

Go code!

Enough with the math. Get back on the code and be creative. Don’t worry about breaking things, you can always use “undo” or even fork again the project clean. Do you feel a bit of a hacker now?

Looking for more?

If you are looking for more check out my final version of minesweeper with additional corrections and my next example of the well known game hangman.

Final, checkout my blog to learn more about how did this site came to be.