Until now I explained how you should first think about your game, write documentation, and only then start checking about the code / engine. It may seems stupid at first that you should start by describing on paper or on a file what you want to do, but believe it is useful. As you may not have really a full picture of the process, I will here do with you all those steps from idea, design and coding of a simple game everyone of us played at least once in the life: an hangman.
Yet to teach also something on the side, I will use UML (a standard for programing design) for the game flow and use Javascript to realize the game itself. Using Javascript as the advantage that anyone with a browser and a text editor is able to code and see the result (without any additional tool) and will provide also some information about how Javascript works and how it can be used.
So to have an hangman running what is needed? Or what is an hangman? Even for something that simple you need to clarify your mind to be able to code it later on.
An hangman is a game where somebody (in this case the computer) pick up a word randomly and let the player guess it. Only a limited number of trials is allowed until the game is lost. Yet instead of guessing randomly, the player ask if a letter is part of the word, if yes the computer will say where this letter is (if any), or say it is not containted by the word. Once all letters have been found and therefore the word guessed, the player win.
Here you see the a UML diagram for the game, balloons are the different "activity" or code to do, and the diamond shape are "if" conditions. It needs to be readed from top to bottom and follow the arrows
As you see even for such a small game you end up with a diagram which is not that small you may wonder then how it will look like for bigger projects, actually the level of details of your diagram depends on the complexity of your project you start with a very rough diagram and if something need to be more detailed as it's not clear then you make futher diagrams which describe more in detail this part. Diagrams must clarify things not make it harder to understand so think about how much you put in your diagrams!
Let's try to code the first step which should pick a random word:
HTML Code:
<html>
<head><title>Simple Javascript hangman</title></head>
<body>
<span id='word'></span>
<input type='button' onclick='getWord()' value='Generate word' />
<script>
var words=['computer','telephone','screen','bunny','octopus','fishbone','diagram',
'definition','illustration','magazine','helicopter',
'airship','balloon','glider','turbine','development'];
function getWord()
{
var w=Math.floor(Math.random()*words.length);
document.getElementById('word').innerHTML=words[w];
}
</script>
</body>
For those not knowing Javascript, Javascript is a language which is NOT releated to Java, and runs purely on the browser. Which means the source of your code is transfered to the browser which makes it possible for everyone to read it / copy it and even modify it. There is some tricks to make it harder to read, but still the code will be sent to the browser. In our case I decided for simplicity to include the script within the HTML itself even if you can split the 2. To define Javascript blocks you simply open the <script> tag put whatever you want there and close the tag when you are done. This is the short form of it, where you do have more strict forms if you want to be more... standard.
This first script will simply pick a random name every time you press the "Generate word" button. To do so, the script have a "dictionary" of possible words stored in the "words" variable (line 8). With the keyword var, Javascript define a variable. You can in most case drop this keyword and it will work as well. The [ character after the equal sign define an array definition and is actually the JSon form for data definition. You may define your array differently but this one is one of the shortest form.
On line 12 you see a "function getWord()" which defines the function getWord. This function can be then used anywhere in the page and also by other scripts within the same page.
Line 14 pick up a random number to choose a word within our dictionary of words.
Line 15 recover from our HTML page the span tag called with the ID word and put as content inside the word out of our dictionary. This modification of the page is the first step of any dynamic HTML as you see that you can modify the page even after the page has been loaded. Ajax sites and others do all work by modifying the DOM (document object model) which is nothing else as the page itself, exactly like we do here in this example. However the modifications can be done in different ways, for example by adding new tags to the page or changing bigger blocks and not only by modiying the innerHTML of an element.
Displaying the "work" area:
It's time to implement the second step of our diagram which should show how many characters instead of displaying the word. Which means, the code need to pickup a random word, and show the place holders for the letters.
HTML Code:
<html>
<head><title>Simple Javascript hangman</title></head>
<body>
Word to guess: <span id='word'></span><br/>
<input type='button' onclick='getWord()' value='Generate word' />
<script>
var words=['computer','telephone','screen','bunny','octopus','fishbone','diagram',
'definition','illustration','magazine','helicopter',
'airship','balloon','glider','turbine','development'];
var myWord="";
var wordDisplay="";
function getWord()
{
var w=Math.floor(Math.random()*words.length);
myWord=words[w];
wordDisplay="";
for(var i=0;i < myWord.length;i++)
{
if(wordDisplay != "")
wordDisplay+=" ";
wordDisplay+="";
}
document.getElementById('word').innerHTML=wordDisplay;
}
</script>
</body>
The modifications with the previous version are not big, beside that now we do generate a string containing underscores and "spaces" and we display that one.
Next step initialize the number of possible faults.
HTML Code:
<html>
<head><title>Simple Javascript hangman</title></head>
<body>
Possible faults: <span id='faults'></span>
Word to guess: <span id='word'></span><br/>
<input type='button' onclick='init()' value='Generate word' />
<script>
var words=['computer','telephone','screen','bunny','octopus','fishbone','diagram',
...
Current poll
Sections
by
Recent Articles
Dark Mafia Template - Game [SALE]
Thread Starter: W3Theory || PeterHello MWG,
Last Post By: W3Theory || Peter Today, 02:53 AMSo, due to some conflicts with my timing I was not able to finish this in time to the requested date and thus it is back up