CS 105 MP3: Number Sorting Game | Complete Solution

MP3: Number Sorting Game

Due: Tuesday, Sep. 29th by 8:00pm

Let's do this!

Part 1: Creating a new function

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.

Part 2: Calling the function

Your new function will need to be called every time the player clicks a tile. You can achieve this by 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>.

Part 3: Getting stuff from the keypad

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.

Part 4: Writing stuff to the keypad

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";

Part 5: Remembering the tile

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.

Part 6: Changing the color of an object

Each object has many properties and a <td> 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.

Part 7: The winning condition

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?
 
Submit your MP3 here!