Fun way to learn for middle and high school students
Hack your own minesweeper web game
No prior coding knowledge required
![Chonken](chonkenfly.png)
![Chonken character](chonken.png)
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](bowlingball.png)
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](js-phred.png)
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](chrome.png)
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](devconsole.png)
![Javascript logo](javascript.png)
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](values.png)
![Variables](variables.png)
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](functions.png)
![Arrays](arrays.png)
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.png)
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.png)
Conditionals
Run some code but only if you should.
let x = 3
if (x * 2 + 7 > 12) {
x = 4
}
![Iteratios](iterations.png)
Iterations
Run a piece of code many times.
let talking = ""
for (let i = 0; i < 5; i++) {
talking = talking + "blah "
}
![Chonken character](chonken_bomb.png)
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 site](repl.png)
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.png)
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](js.png)
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](emoji.png)
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](js-1.png)
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.png)
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:
Now run f(50). Are you excited to try f(10000)? Sure go ahead.
function f(i) {
if (i == 0) return 1;
else return 2 * f(i - 1);
}
![Go code](go-code.png)
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](hangman.png)
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.