The game uses a handful of concepts in programming like loops, conditionals, functions, arrays and more to help show how things work under the hood. I hope you enjoy the game but more importantly learn a little programming in the process!
Files Involved
- findit.html: This is the markup file which is directly accessed in the browser. This page sets up a basic user interface. A important aspect of this markup page is the <head></head> section of the page. This sets up our design file (findit.css) and our logic file (findit.js).
- findit.css: This file contains the styling for our game including colors, sizes, borders and more. The type of file is a cascading style sheet file denoted by the .css at the end of the file.
- findit.js: Here is where the real fun stuff takes place. This is the javascript file for our game and contains the logic which handles starting and stopping the game, adding and removing points, saving scores, and randomly assigning locations on the game board for our letters and numbers.
You can view the game here at www.broadlyapplicable.com/findit. Using view source you can see the html markup created for the game. Below are the includes for the styling css file and the logic javascript file:
<head>
<link rel="stylesheet" href="http://www.broadlyapplicable.com/findit.css" type="text/css" />
<script type="text/javascript" src="http://www.broadlyapplicable.com/findit.js"></script>
</head>
You can view those files directly by replacing the url .html part with .css or .js. Here are handy links for you also:
Looking at the logic file (findit.js) here are a few of the important methods and items to study and understand. Notice I have left a few console.log("..."); lines in the script. These output to your browser console. If you use chrome for example you can hit F12 (on Windows) or View/Developer/Developer Tools on a Mac to access the browser console. Here you can log any message like variable values so you can see what is occurring in the application.
Some concepts found in the game:
- Looping / Iterating
- loadTable()
- This method loops over the available letters or numbers array and creates buttons for the game which can be clicked. It also uses a random number generator to get the color of the button border. This method calls another method called shuffle(array) and changes the order of the letters and numbers so each time you play the layout is different.
- showScores()
- This method iterates on the stored scores in your local browser database and displays the initials and score.
- askQuestion()
- This method is used to determine what to display from the list of available letters and numbers and uses a while loop to continue checking each randomly chosen value against the previously used values until one is found. Once that happens a variable called badQuestion is set to false which breaks the while loop and returns the question.
- Conditionals (if / else statements):
- determineLetterOrNumber(itm)
- This method takes the item chosen that is passed into the method and checks the number and letter arrays to determine if the item is a letter or number. This is used when asking the question "Find the Letter or Find The Number ..... ".
- testForFinishGame()
- This method checks the array of items already chosen against the available numbers total, when these numbers match you have successfully cleared the board and the game is finished.
- Variables
- numbers : This is an array of numbers.
- letters : This is an array of letters
- lettersAndNumbers : This is a array created by combining the values from the letters and numbers array.
- removedLettersAndNumbers : This array contains items which have been chosen and clicked on already. (notice in the startGame() method I set the length of this array to 0. This removes all the items from the array).
- started : This is a true/false value which allows the game to know if it is currently running or not.
- stopTimer : This value is used in the startTimer() method to set to true or false when creating the inner function for onTimer().
- questionIndex : The index position of the chosen letter/number to find.
- questionValue : This holds the letter or number you are trying to find.
- points : this one should be obvious :)
- HTML 5 Local Storage
- supports_html5_storage() : This methods determines if we can use the browsers local storage system to persist your scores from game to game.
- getScores() : Retrieves your scores from local storage.
- showScores() : Displays scores at the bottom of the game.
- saveScores() : Saves your score in local storage
- CSS Manipulation
- updateStartButton() : This method changes the start/stop button text and color
Comments and questions are always welcome, I hope you enjoy the game, please pull the source down to your local machine and hack away!
This application code has been uploaded to github. Please visit https://github.com/dtbell99/FindIt for the most recent source code.
This application code has been uploaded to github. Please visit https://github.com/dtbell99/FindIt for the most recent source code.
No comments:
Post a Comment