Use this 10-minute guide and
find out how to create games using javascript!
Are you tired of searching through the web for how to make JavaScript games,
only to have people unceremoniously dump JavaScript code into your lap- with
no comments or explanation?
This guide is going to change that. This guide is all about how to
create games using JavaScript.
Within the next few pages you will learn exactly how
to make a fully-functioning JavaScript game, with any tricky bits explained
in everyday language that you can understand.
As a 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.
There are quality JavaScript games available all over the internet. Unfortunately,
most of these games are so badly formatted a human being couldn't possibly interpret
the gibberish on the screen.
Use Antechinus® JavaScript Editor to
reformat the code used in games quickly and effortlessly to your liking.
JavaScript Editor also includes many other functions to make designing JavaScript
games easier and more enjoyable.
JavaScript Games are Only the Beginning
JavaScript games along with other types of web-based games can be used to make you real money in ways
you wouldn't expect.
I recommend seeing the
online
video course "How to Make Money from Video Games" to find out how you can make
real money from your games.
If the code doesn’t look like that then simply copy the code into your
web page and replace any existing code.
For those who are very new to HTML I will provide a nice explanation of some
of the features below. More advanced people can of course skip over to the meat
of the article.
Some things about HTML:
In case you’re wondering, HTML stands for Hypertext Markup Language.
It’s basically the magic behind the client side of most web pages. The
client side is what the end user sees.
<> These two arrows represent a tag. Tags usually
come in pairs. One tag would look like <tagname> and the end tag would
look like </tagname>.
<!DOCTYPE> This tag isn’t necessary, but for completeness sake
is included here. This tag is usually found above the first html tag.
Your website’s html code usually goes in between the <html>
and </html> tags.
Important hidden (to the user) stuff goes in between the <head>
and </head> tags. These things would include the Title
tags, Meta tags and possibly JavaScript tags.
The meat of your web page would usually go between the <body>
and </body> tags.
We are going to build a number guessing game. The computer will pick a number,
and the user will guess the number with hints from the computer until they get
the number right.
Start by putting an appropriate title in between the title tags. I would recommend
something obvious like Guessing Game.
Add the following code underneath the <head> tag:
<formid="Game" name="Game">
</form>
Forms are basically constructs that allow the user to enter data and to receive
output as well.
In between the form tags create a table with 2 columns, 7 rows and a border
of 0. In your JavaScript Editor, go to Insert / Table and input the correct
numbers.
In case you have troubles creating your own table I have included the code
below:
There are some important things about tables that beginners should know about.
More advanced users can skip the blue section below.
Some facts on tables:
Tables begin and end with the <table> and </table> tags.
The tr tags are tags used to denote rows. These rows are split into columns.
The td tags are the columns within the rows. These can be called cells, which
store data within them.
Note: Things like are used to denote special characters.
in this case is used to represent white space.
The form and table in between the body tags should look something like this
Below the first body tag but above the form tag add in the tags <h1> and
</h1>. These are heading tags, so anything written in
between them will have the format of a Heading 1. Write a nice title in between
the two tags, something like The Number Guessing Game.
Underneath the h1 tags insert <p> and </p> tags. Text in between
these tags will appear in its own paragraph format. Write this instructional
text in between the tags:
This is a random number guessing game. The computer picks a number and you
try to guess it, with the computer giving you hints along the way.
The text within a tags acts as your everyday link. href defines what this text
links to. In this case the text doesn’t link to another page, but rather
executes a function called startGame. Later on we will define
this function in JavaScript.
Turning the Tables
Now we’re going to fill our table with the visual stuff necessary to
make the game work.
In the first column of the first row get rid of and insert this
code:
Messages and instructions:
In the first column, second row replace the code with this:
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:
<inputtype="text"name="Hint"size="45"/>
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 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:
<inputtype="text"size="2"name="counter"/>
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!
Load up and test the page. 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:
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:
functionstartGame() { // 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:
functionsubmitGuess() { // 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 } elseif(document.forms[0].Guess.value<Num) { //if the player’s guess is lower than the number, then do this Hint="too low"; outPut(); } elseif(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:
functionoutPut() { // 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=""; }
functionplayAgain() { //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 varagain=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!
There you have it, a fully-fledged game that you can put on your website.
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 some real money from video games? You’re going to need the right information, or else your efforts will fall flat.
This online video course along with the included bonuses gives you the information you need to steer away from potential hazards and get you on the path to making real money.
The source code is free for private and commercial purposes. However, no part
of this page can be reproduced on another website without the written permission
from GameInnovator.com
