Fun way to learn for middle and high school students

Hack your own minesweeper web game

No prior coding knowledge required

Chonken
Chonken character

Hello there !

Chonk! My name is Phred the chonken! I'm going to teach you how to code your own cool games on the web. Trust me, you will not believe how easy it is !

A web-app is nothing more that a web page so we will do it all right here using the browser.

Bowling ball character

Bowling ball video

To warm up, make sure to check out the adventures of my friend “Bowling ball” from “Object Outrage” where he explains the code to his other friend “Sapphire”. It’s hilarious.

Chonken character

Super quick introduction to javascript

We're going to start our tutorials with a quick intro to javascript. It'll make the rest of the project way easier if we get the basics down. Don't worry, I'll keep it brief so we can get to the games!

And on top of that, we're going to be "hands on" from the start.

Chrome logo

What you will need

To start, we're going to need a desktop or laptop computer, your phone or tablet will not be enough for this.

For the best results, use the Chrome browser. If you don't have Chrome installed, you can get it from here - its totally free!

Now, we need to open the developer console

Click on the menu options shown below.

Chrome logo
Javascript logo

What we will cover

  • Values: like numbers and more
  • Variables: can store values
  • Functions: can calculate values
  • Arrays: lists of values
  • Objects: have properties
  • Conditionals: if this then that
  • Iterations: keep on running

Values

Values in javascript are not only numbers. They can be text or just "true" or "false"

Operations

You can do math operations with values. Type in the dev console:
1231 * 32 + 142

Not only numbers

You can do operations on other kinds of values.
"Hello" + "Bob" and
3 * 5 == 15
("==" stands for "is equal")

Values
Variables

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

Functions

Are like in math, take input and return output like f(x) = 2 * x + 3


function f(x) {
  return 2 * x + 3
}

Or simpler:
let g = (x) => x + 7

Other parameters


(name) => 'Hi' + name


(l, w) => l * w

Values
Arrays

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

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

Conditionals

Run some code but only if you should.

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

Iteratios

Iterations

Run a piece of code many times.

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

Chonken character

Time to code !

Chonk - Chonk! OK guys time to move on.

We are going to build the minesweeper game. It's a classic game, I'm sure you've seen it before.

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.

Repl site

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 code

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 code

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?

Emoji

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.

Javascript code

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

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

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?

Hangman

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.