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