|
[ Download this article in eBook form ]
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.
The complete web page can be downloaded here.
There are quality JavaScript games available all over the internet. Unfortunately,
most of these games are so badly formatted a human being could not 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.
Learn How to Make Real Money from Video Games Now
Getting Started
Let’s run JavaScript Editor and create a new html file called guessinggame.html.
Switch to coding mode. The code within your html file should look like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator"
content="JS
Editor v7, http://www.c-point.com
/>
<title></title>
</head>
<body>
</body>
</html>
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:
<form id="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:
<table border="0">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
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. Insert this code underneath the p tags:
<p><a href="JavaScript:startGame()">Start a new game</a></p>
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:
<textarea name="Message" rows="7" cols="50" onfocus="blur()"></textarea>
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:
In the fourth row, first column we are going to add an input that the browser
to write to. Add this code:
<input type="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:
Replace the code in the first column, sixth row with this code:
<input type="text" name="Guess" size="30" maxlength="4" />
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:
<input type="button" value="Submit Guess" onclick="submitGuess(),document.forms[0].Guess.focus()" />
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:
<input type="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:
<script language="JavaScript" type="text/JavaScript">
and
</script>
The code above the ending head tag should look like this:
<title>Guessing Game</title>
<script language="JavaScript" type="text/JavaScript">
</script>
</head>
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 players 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 players guess is lower than the number, then do this
Hint = "too low";
outPut();
}
else if(document.forms[0].Guess.value == Num)
{
//If the players 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!
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.
Use Flash to make your own game
Uncover how you can make your own Flash game in just a few minutes
This guide will reveal to you how to make your own flash
game in AS 2.0 from scratch - with no prior scripting knowledge required.
Written By Damien D
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
|
