Find out how to create games using javascript in 10 minutes!
Cut and paste the code below:
The textarea tag is basically an area of text that the browser can write to. The user usually cannot write to this area. The rows and cols in this case determine the size of the textarea in units.
In the first column, third row replace the code with this text:
Hint from computer:
In the fourth row, first column we are going to add an input that the browser to write to. Add this code:
The input tag is a one-line space that the user and browser can write into. In this input however we will not record what the user writes down. We are using an input in this case instead of a textarea because we only need one line of space.
Replace the code in the first column, fifth row with this text:
Your guess:
Replace the code in the first column, sixth row with this code:
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 under the name of Guess.
Replace the code in the first column, seventh row with this:
This is the button that when clicked will execute the function submitGuess, and will also put focus on the Guess input.
In the fifth row, second column replace the code with this text:
Guess counter - See how many times it takes for you to guess the number
In the sixth row, second column replace the code with this code:
This is a small input field that will be used in a similar fashion to Hint. It will be used to show the number of guesses without the user needing to type anything into it.
Well done, we’ve got all the visual elements down for this game!
If you haven’t tested the page, you should load it up right now. It should look something like this.
Making it Work
Time to add the final touch to our game: the JavaScript.
Make some space between the bottom head tag and the last title tag. Add these two tags and separate them by a line:
The code above the ending head tag should look like this:
Guessing Game
Below I will describe some of the things about JavaScript. More advanced people can of course skip over to the implementation of the code.
The Nuts and Bolts of JavaScript:
JavaScript goes in between script tags. These script tags can be in the head or in the body of the html document.
Comments in the script tags start with // and continue for the rest of the line. This is to help the coder to remember and understand what their code is doing.
FunctionName(){}This a JavaScript function. A function holds code within the curly braces { and }. The function can only be executed by another part of the page.
JavaScript can access variables that are defined in other places on the page, such as input fields within forms.
Let’s add the final elements. Insert this code under the first script tag:
function startGame()
{
// Reset hint
document.forms[0].Hint.value = "Waiting for guess...";
// Set counter to 0
document.forms[0].counter.value = 0;
// Give instructions
document.forms[0].Message.value = "The computer will pick a number between 1 and\n1000."
+ " At the guess prompt, type in your guess,\nthen press Submit Guess."
+ " Your computer will tell\nyou whether your guess is too high, too low, or\ncorrect."
+ " Watch the Guess Counter to see how many\ntimes it takes for you to guess the number."
+ " You\ncan submit a guess whenever you are ready.";
// Choose number
Num = Math.round(Math.random() * 1000);
// Focus on guess
document.forms[0].Guess.focus();
}
This is the function that is executed when the user clicks on the Start a new game link. This function basically resets the game and initialises the guess counter and the random number to their starting values. For more detail see the comments above each statement.
Notice how this function accesses the various visual objects that are within the form that we created.
Insert this code underneath the previous code:
function submitGuess()
{
// Update counter, increase its value by one
document.forms[0].counter.value++;
// Focus on guess
document.forms[0].Guess.focus();
// Process guesses, see what to tell the player
if(document.forms[0].Guess.value > Num)
{
//if the player’s guess is higher than the number, then do this
Hint = "too high";
outPut(); //executes this function
}
else if(document.forms[0].Guess.value < Num)
{
//if the player’s guess is lower than the number, then do this
Hint = "too low";
outPut();
}
else if(document.forms[0].Guess.value == Num)
{
//If the player’s guess equals the number, then do this
Hint = "correct";
playAgain(); //executes this function
}
}
This is the function that is executed when the player clicks on the Submit button.
The function increases the guess counter by one, does a comparison of the player’s guess and the number, and then executes the relevant function to display the results. For more details see the comments within the code.
Time for the last two functions, which will output the necessary information to the user. Insert these two functions underneath the last function:
function outPut()
{
// Output the hint, which combines text and variables together
document.forms[0].Hint.value = "Your guess of "+document.forms[0].Guess.value+" is "+Hint+". Guess again.";
document.forms[0].Guess.value = "";
}
function playAgain()
{
//This displays the victory text and prompts the user for another game
document.forms[0].Hint.value = "Your guess is correct!";
//this opens a dialoge window for the user to confirm
var again = confirm("You guessed that the number was " +Num+ " in " +document.forms[0].counter.value
+ " guesses.\nDo you want to play again?")
//if the user confirms then another game is started
if(again){startGame()};
}
These two functions output the information to the user. Notice that these functions are actually executed by other functions. For more details see the comments.
Well done, you just finished your first JavaScript game!
If you were using JavaScript Editor, you could reformat the code to your liking by going to Cleanup / Reformat JavaScript Code. To find out more about this amazing tool, click here now.
There you have it, a fully-fledged game that you can put on your website. As a final gift to you for reading this article I have included the entire web page containing the game, which you can use for whatever purposes you want, private or commercial. You must however give credit to GameInnovator.com for using any part of the source in your projects.
The complete web page can be downloaded here.
I hope this is one of the many JavaScript games you will have fun making and I wish all the best for all you budding web designers. I hope this has helped you learn some of the basics of how to create games using JavaScript.
After you have had a chance to sit back and absorb this article, please send us your comments and suggestions - your feedback is greatly appreciated.
Want to make your own games quickly and easily?
Find out which game creation tool is best for you to make your own games:
Top Game Creation Tools
Written By Damien D
Author: Damien D is an entrepreneur in game design and in gaming as a whole, who focuses on bringing the latest and greatest information on gaming and game design.
Go here for his website:
Game Innovator
Terms: Articles may be reprinted provided content is not edited and links are kept live
Source: www.articledepot.co.uk
