Take a look
You will see a 3x3 matrix filled with the numbers 1 through 9. Each number exists exactly once. This may look like an older phone's key pad after your little brother (or sister, dog, hamster or whoever else is up to no good in your home) got a hold of it and switched all the keys around. see image.
What's this game about?
The point of this game is to put them back in order by swapping out pairs of tiles until you get to this nice familiar layout. see image.
To do this, the player will click on one tile he/she wants to swap. The tile should turn orange (color #D35400) in response. see image.
The player then clicks a second tile and the game board will flip the two clicked tiles like so: see image.
he player then must continue to swap tiles until he gets all of them into the right place. At that time, an alert box should appear that tells the player what a nice job he/she has done. see image.
Your turn
Now you get to make it all happen!
Let's do this!
In numbers.js, you will need to create a new function called processClick(). This function will take an argument that will allow you to tell it which tile was clicked, so it will need to look something like this function processClick(tileId){}. This will create a variable called tileId that you can use anywhere inside the function (within the curly braces), but not outside of it.
Your new function will need to be called every time the player clicks a tile. You can achieve this by editing the numbers.html file and adding an event handler to each different cell in the keypad table. In HTML, a cell is defined by the < td> tag and since we are waiting for a click, we need to insert an onClick handler to each of those cells. In generic terms, this will look like this (You must change this code to fit your needs; Just copying and pasting this example will not do you any good) : < td id="myCell" onClick="myfunction(this.id);"> The this.id part forwards the id of the cell to the called function so it can properly process the click. By the way, this always refers to the object you are currently dealing with, so in this case the applicable < td>.
You will need to read the content of each clicked cell so that you may swap them around. Once you get the hang of it, it is actually not that hard to get the content in Javascript. The entire page is considered a document and everything in the page lives under the document object. We can use document.getElementById(desiredId) to get any item (technically speaking any "object") from the page. You already know the id of the clicked tile as it was passed to the function from the event handler. So you could use document.getElementById(tileId). This will give you the < td> object for the clicked tile. This tile itself has a property (which is sort of like a variable) called innerHTML. So document.getElementById(tileId).innerHTML will get you the number that is in the currently clicked cell.
Now that you know how to read from innerHTML, writing to it won't a big deal. You can write "I love my cat" to a cell by just assigning that text to innerHTML, like so:document.getElementById(tileId).innerHTML="I love my cat";
The only slightly tricky part is keeping track of the clicked tile. When the player clicks one, you need to know whether he already clicked one before (whether there is an orange tile). If so, you need to perform the swap and turn the tiles white again. If not, you need to turn the clikcked tile orange and somehow remember the fact that this tile was clicked.
You can do this in many ways. However, to make it a little easier for you, we have defined a global variable called clickedcell that initially holds an empty string "". You may use this variable to remember what tile the player has clicked (do not use var to recreate it). Obviously you need to also empty it out after each swap.
Each object has many properties and a has things such as innerHTML and also one called style. This lets you change just about everything about how the object looks, including its style.backgroundColor which you can read and write the exact same way as innerHTML.
Oh, one more thing, colors are defined in hexadecimal RGB space. So orange is #D35400 and white is #FFFFFF. Play around with it a little and see what cool colors you can come up with.
The last thing on your to-do list is the winning condition. Every time a user swaps two tiles, you must check whether all of them are in the right place. If so, you will need to congratulate the user by displaying an alert message.
And that's pretty much it.
You have just programmed your first real game pretty much from scratch (not the programming language). Amazing, right?