| If the code doesn't look like that then simply copy the | | | | the last title tag. Add these two tags and separate |
| code into your web page and replace any existing | | | | them by a line: |
| code. | | | | The code above the ending head tag should look like |
| For those who are very new to HTML I will provide a | | | | this: |
| nice explanation of some of the features below. More | | | | Guessing Game |
| advanced people can of course skip over to the meat | | | | Below I will describe some of the things about |
| of the article. | | | | JavaScript. More advanced people can of course skip |
| Some things about HTML: | | | | over to the implementation of the code. |
| In case you're wondering, HTML stands for Hypertext | | | | The Nuts and Bolts of JavaScript: |
| Markup Language. It's basically the magic behind the | | | | JavaScript goes in between script tags. These script |
| client side of most web pages. The client side is what | | | | tags can be in the head or in the body of the html |
| the end user sees. | | | | document. |
| These two arrows represent a tag. Tags usually | | | | Comments in the script tags start with // and continue |
| come in pairs. One tag would look like and the end tag | | | | for the rest of the line. This is to help the coder to |
| would look like . | | | | remember and understand what their code is doing. |
| This tag isn't necessary, but for completeness sake is | | | | FunctionName(){}This a JavaScript function. A function |
| included here. This tag is usually found above the first | | | | holds code within the curly braces { and }. The function |
| html tag. | | | | can only be executed by another part of the page. |
| Your website's html code usually goes in between the | | | | JavaScript can access variables that are defined in |
| and tags. | | | | other places on the page, such as input fields within |
| Important hidden (to the user) stuff goes in between | | | | forms. |
| the and tags. These things would include the Title tags, | | | | Let's add the final elements. Insert this code under the |
| Meta tags and possibly JavaScript tags. | | | | first script tag:function startGame() |
| The meat of your web page would usually go | | | | { |
| between the and tags. | | | | // Reset hintdocument.forms[0].Hint.value = "Waiting for |
| We are going to build a number guessing game. The | | | | guess..."; |
| computer will pick a number, and the user will guess | | | | // Set counter to 0document.forms[0].counter.value = 0; |
| the number with hints from the computer until they get | | | | // Give instructionsdocument.forms[0].Message.value = |
| the number right. | | | | "The computer will pick a number between 1 |
| Start by putting an appropriate title in between the title | | | | and\n1000." |
| tags. I would recommend something obvious like | | | | + " At the guess prompt, type in your guess,\nthen |
| Guessing Game. | | | | press Submit Guess." |
| Add the following code underneath the | | | | + " Your computer will tell\nyou whether your guess is |
| tag:name="Game"> | | | | too high, too low, or\ncorrect." |
| Forms are basically constructs that allow the user to | | | | + " Watch the Guess Counter to see how |
| enter data and to receive output as well. | | | | many\ntimes it takes for you to guess the number." |
| In between the form tags create a table with 2 | | | | + " You\ncan submit a guess whenever you are |
| columns, 7 rows and a border of 0. If you were using | | | | ready."; |
| JavaScript Editor, then you just need to go to Insert / | | | | // Choose number |
| Table and input the correct numbers. | | | | Num = Math.round(Math.random() * 1000); |
| If your program cannot create a table I have included | | | | // Focus on guessdocument.forms[0].Guess.focus(); |
| the code below: | | | | } |
| There are some important things about tables that | | | | This is the function that is executed when the user |
| beginners should know about. More advanced users | | | | clicks on the Start a new game link. This function |
| can skip the blue section below. | | | | basically resets the game and initialises the guess |
| Some facts on tables: | | | | counter and the random number to their starting |
| Tables begin and end with theandtags. | | | | values. For more detail see the comments above |
| The tr tags are tags used to denote rows. These | | | | each statement. |
| rows are split into columns. | | | | Notice how this function accesses the various visual |
| The td tags are the columns within the rows. These | | | | objects that are within the form that we created. |
| can be called cells, which store data within them. | | | | Insert this code underneath the previous code:function |
| Note: Things like are used to denote special | | | | submitGuess() |
| characters. in this case is used to represent white | | | | { |
| space. | | | | // Update counter, increase its value by |
| Below the first body tag but above the form tag add | | | | onedocument.forms[0].counter.value++; |
| in the tagsand | | | | // Focus on guessdocument.forms[0].Guess.focus(); |
| . These are heading tags, so anything written in | | | | // Process guesses, see what to tell the |
| between them will have the format of a Heading 1. | | | | playerif(document.forms[0].Guess.value > Num) |
| Write a nice title in between the two tags, something | | | | { |
| like The Number Guessing Game. | | | | //if the player's guess is higher than the number, then |
| Underneath the h1 tags insertand tags. Text in | | | | do this |
| between these tags will appear in its own paragraph | | | | Hint = "too high";outPut(); //executes this function |
| format. Write this instructional text in between the tags: | | | | }else if(document.forms[0].Guess.value < Num) |
| This is a random number guessing game. The | | | | { |
| computer picks a number and you try to guess it, with | | | | //if the player's guess is lower than the number, then |
| the computer giving you hints along the way. | | | | do this |
| Insert this code underneath the p tags: | | | | Hint = "too low";outPut(); |
| Start a new game | | | | }else if(document.forms[0].Guess.value == Num) |
| The text within a tags acts as your everyday link. href | | | | { |
| defines what this text links to. In this case the text | | | | //If the player's guess equals the number, then do this |
| doesn't link to another page, but rather executes a | | | | Hint = "correct";playAgain(); //executes this function |
| function called startGame. Later on we will define this | | | | } |
| function in JavaScript. | | | | } |
| Turning the Tables | | | | This is the function that is executed when the player |
| Now we're going to fill our table with the visual stuff | | | | clicks on the Submit button. |
| necessary to make the game work. | | | | The function increases the guess counter by one, |
| In the first column of the first row get rid of and insert | | | | does a comparison of the player's guess and the |
| this code: | | | | number, and then executes the relevant function to |
| Messages and instructions: | | | | display the results. For more details see the comments |
| In the first column, second row replace the code with | | | | within the code. |
| this: | | | | Time for the last two functions, which will output the |
| The textarea tag is basically an area of text that the | | | | necessary information to the user. Insert these two |
| browser can write to. The user usually cannot write to | | | | functions underneath the last function:function outPut() |
| this area. The rows and cols in this case determine the | | | | { |
| size of the textarea in units. | | | | // Output the hint, which combines text and variables |
| In the first column, third row replace the code with this | | | | togetherdocument.forms[0].Hint.value = "Your guess of |
| text: | | | | "+document.forms[0].Guess.value+" is "+Hint+". Guess |
| Hint from computer: | | | | again.";document.forms[0].Guess.value = ""; |
| In the fourth row, first column we are going to add an | | | | }function playAgain() |
| input that the browser to write to. Add this code: | | | | { |
| The input tag is a one-line space that the user and | | | | //This displays the victory text and prompts the user |
| browser can write into. In this input however we will | | | | for another gamedocument.forms[0].Hint.value = "Your |
| not record what the user writes down. We are using | | | | guess is correct!"; |
| an input in this case instead of a textarea because we | | | | //this opens a dialoge window for the user to |
| only need one line of space. | | | | confirmvar again = confirm("You guessed that the |
| Replace the code in the first column, fifth row with this | | | | number was " +Num+ " in " |
| text: | | | | +document.forms[0].counter.value |
| Your guess: | | | | + " guesses.\nDo you want to play again?") |
| Replace the code in the first column, sixth row with this | | | | //if the user confirms then another game is |
| code: | | | | startedif(again){startGame()}; |
| This is the input field that the user will use to guess the | | | | } |
| number. Later on we will access the text that's in it | | | | These two functions output the information to the user. |
| under the name of Guess. | | | | Notice that these functions are actually executed by |
| Replace the code in the first column, seventh row with | | | | other functions. For more details see the comments. |
| this: | | | | Well done, you just finished your first JavaScript game! |
| This is the button that when clicked will execute the | | | | If you were using JavaScript Editor, you could reformat |
| function submitGuess, and will also put focus on the | | | | the code to your liking by going to Cleanup / Reformat |
| Guess input. | | | | JavaScript Code. To find out more about this amazing |
| In the fifth row, second column replace the code with | | | | tool, click here now. |
| this text: | | | | There you have it, a fully-fledged game that you can |
| Guess counter - See how many times it takes for you | | | | put on your website. As a final gift to you for reading |
| to guess the number | | | | this article I have included the entire web page |
| In the sixth row, second column replace the code with | | | | containing the game, which you can use for whatever |
| this code: | | | | purposes you want, private or commercial. You must |
| This is a small input field that will be used in a similar | | | | however give credit to for using any part of the |
| fashion to Hint. It will be used to show the number of | | | | source in your projects. |
| guesses without the user needing to type anything into | | | | The complete web page can be downloaded here. |
| it. | | | | I hope this is one of the many JavaScript games you |
| Well done, we've got all the visual elements down for | | | | will have fun making and I wish all the best for all you |
| this game! | | | | budding web designers. I hope this has helped you |
| If you haven't tested the page, you should load it up | | | | learn some of the basics of how to create games |
| right now. It should look something like this. | | | | using JavaScript. |
| Making it Work | | | | After you have had a chance to sit back and absorb |
| Time to add the final touch to our game: the | | | | this article, please send us your comments and |
| JavaScript. | | | | suggestions - your feedback is greatly appreciated. |
| Make some space between the bottom head tag and | | | | Want to make your own games quickly and easily? |