My Community

Tutorial 1 Designing a Game Using Javascript

ChrisRansom

  • *********
  • 466
  • Christopher Michael Ransom The 1 and only.
    • View Profile
    • Draft Utopia
    • Email
Tutorial 1 Designing a Game Using Javascript
« on: August 22, 2014, 02:02:18 PM »
I am new to javascript as well.  I would like to site http://www.draftutopia.com/draftutopiaMadLibs.html and http://aharrisbooks.net/h5g/ as my two sources to cite.  Most of my game design lessons will come from the How to Program Games In HTML written by Andy Harris.

With that being said.  I'll post the code to designing a game using javascript by listing some examples from the game by using the code from the Mad Libs game I created.
My name is Chris Ransom and I am the creator of Draft Utopia.  I run the podcast, website, and forum for Draft Utopia.

ChrisRansom

  • *********
  • 466
  • Christopher Michael Ransom The 1 and only.
    • View Profile
    • Draft Utopia
    • Email
Re: Tutorial 1 Designing a Game Using Javascript
« Reply #1 on: August 22, 2014, 02:05:14 PM »
The Draft Utopia Mad Libs game has an html, css, and js file for each component of the game.  The CSS file is irrelevant compared to the HTML and Javascript files which show similarities and patterns.
My name is Chris Ransom and I am the creator of Draft Utopia.  I run the podcast, website, and forum for Draft Utopia.

ChrisRansom

  • *********
  • 466
  • Christopher Michael Ransom The 1 and only.
    • View Profile
    • Draft Utopia
    • Email
Re: Tutorial 1 Designing a Game Using Javascript
« Reply #2 on: August 22, 2014, 02:08:54 PM »
Here is the CSS code it is irrelevant to the game we're designing yet is part of the HTML code.


h1 {
  text-align: center;
}

fieldset {
  width: 600px;
  margin-left: auto;
  margin-right: auto; 
}

label {
  float: left;
  width: 250px;
  clear: left;
  text-align: right;
  padding-right: 1em;
}

input {
  float: left;
}

button {
  display: block;
  clear: both;
  margin-left: auto;
  margin-right: auto;
}

#output {
  font-size: 150%;
  text-align: center;
  width: 400px;
  margin-left: auto;
  margin-right: auto;
}
My name is Chris Ransom and I am the creator of Draft Utopia.  I run the podcast, website, and forum for Draft Utopia.

ChrisRansom

  • *********
  • 466
  • Christopher Michael Ransom The 1 and only.
    • View Profile
    • Draft Utopia
    • Email
Re: Tutorial 1 Designing a Game Using Javascript
« Reply #3 on: August 22, 2014, 02:20:39 PM »
With this HTML Code I listed the code for my Javascript game without the CSS background for my website by combining my code with the original game code.

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
   <title>draftutopiaMadLibs.html</title>
    <link rel = "stylesheet"
          type = "text/css"
          href = "draftutopiaMadLibs.css" />
    <script type="text/javascript"
            src = "draftutopiaMadLibs.js">
    </script>
</head>
<body>
    <h1>Draft Utopia Mad Libs Game</h1>
   <form action="">
        <fieldset>
            <label for = "txtBoy">Boy's name</label>
            <input type = "text"
                   id = "txtBoy" />

            <label for = "txtGirl">Girl's name</label>
            <input type = "text"
                   id = "txtGirl" />
               
            <label for = "txtGeol">Geologic formation</label>
            <input type = "text"
                   id = "txtGeol" />
               
            <label for = "txtVerb">Verb</label>
            <input type = "text"
                   id = "txtVerb" />
               
            <label for = "txtContainer">Container</label>
            <input type = "text"
                   id = "txtContainer" />
               
            <label for = "txtLiquid">Liquid</label>
            <input type = "text"
                   id = "txtLiquid" />
               
            <label for = "txtBodyPart">Body Part</label>
            <input type = "text"
                   id = "txtPart" />
               
            <label for = "txtGerund">ing verb</label>
            <input type = "text"
                   id = "txtGerund" />
               
            <button onclick = "tellStory()"
                    type = "button">
                tell the story
            </button>
           
        </fieldset>
    </form>
   
    <div id = "output">
       
    </div>

</body>

</html>
My name is Chris Ransom and I am the creator of Draft Utopia.  I run the podcast, website, and forum for Draft Utopia.

ChrisRansom

  • *********
  • 466
  • Christopher Michael Ransom The 1 and only.
    • View Profile
    • Draft Utopia
    • Email
Re: Tutorial 1 Designing a Game Using Javascript
« Reply #4 on: August 22, 2014, 02:23:30 PM »
Here is the javascript code.  It MUST be congruent with the HTML code at all times.

function tellStory(){
    //gather form elements
    var txtBoy = document.getElementById("txtBoy");
    var txtGirl = document.getElementById("txtGirl");
    var txtGeol = document.getElementById("txtGeol");
    var txtVerb = document.getElementById("txtVerb");
    var txtContainer = document.getElementById("txtContainer");
    var txtLiquid = document.getElementById("txtLiquid");
    var txtPart = document.getElementById("txtPart");
    var txtGerund = document.getElementById("txtGerund");
    var output = document.getElementById("output");

    //create variables for input       
    var boy = txtBoy.value;
    var girl = txtGirl.value;
    var geol = txtGeol.value;
    var verb = txtVerb.value;
    var container = txtContainer.value;
    var liquid = txtLiquid.value;
    var part = txtPart.value;
    var gerund = txtGerund.value;
   
   
    //write the story
    var story = boy + " and " + girl + " went up the ";
    story += geol + " to " + verb + " a " + container;
    story += " of " + liquid + ". <br / >
";
    story += boy + " fell down and broke his " + part;
    story += " and " + girl + " came " + gerund + " after.";
   
    //copy story to output
    output.innerHTML = story;
} // end tellStory

Everything in this tell story javascript code

function tellStory(){




} // end tellStory


Is part of the tell the story button when you load the game.

http://www.draftutopia.com/draftutopiaMadLibs.html

Click on the tell the story button when you load the game and see what happens.  Try it out.
« Last Edit: August 22, 2014, 03:23:26 PM by ChrisRansom »
My name is Chris Ransom and I am the creator of Draft Utopia.  I run the podcast, website, and forum for Draft Utopia.

ChrisRansom

  • *********
  • 466
  • Christopher Michael Ransom The 1 and only.
    • View Profile
    • Draft Utopia
    • Email
Re: Tutorial 1 Designing a Game Using Javascript
« Reply #5 on: August 22, 2014, 02:39:08 PM »
What do I mean when I say everything in the HTML and Javascript must be congruent?

When the function tellStory(){
                           //gather form elements

pops up  you must take the form elements from the form inside the fieldset in html and add them to the function tell story by making those pieces of the form in html and turning them into elements of your story in javascript.

For example


<form action="">
        <fieldset>
            <label for = "txtBoy">Boy's name</label>
            <input type = "text"
                   id = "txtBoy" />

 var txtBoy = document.getElementById("txtBoy");

Your game not only requires you to have elements for your story, but you also need variables for you input.

<input type = "text"
                   id = "txtBoy" />

would be
 
//create variables for input       
    var boy = txtBoy.value;

Finally you must add the variable to the write the story command.  You can also change the words in quotes to change how the story goes.  Instead of putting boy or txt.boy you need to use the word boy to identify the boy's name you type in when telling the story.

//write the story
    var story = boy + " and " + girl + " went up the ";
    story += geol + " to " + verb + " a " + container;
    story += " of " + liquid + ". <br / >
";
    story += boy + " fell down and broke his " + part;
    story += " and " + girl + " came " + gerund + " after.";
   
    //copy story to output
    output.innerHTML = story;
} // end tellStory
My name is Chris Ransom and I am the creator of Draft Utopia.  I run the podcast, website, and forum for Draft Utopia.

ChrisRansom

  • *********
  • 466
  • Christopher Michael Ransom The 1 and only.
    • View Profile
    • Draft Utopia
    • Email
Re: Tutorial 1 Designing a Game Using Javascript
« Reply #6 on: August 22, 2014, 02:53:06 PM »
Now try copying and coding all the game elements in html, css, and javascript and saving those pages.  From the first three posts.

HTML Code Save this as draftutopiaMadLibs.html

With this HTML Code I listed the code for my Javascript game without the CSS background for my website by combining my code with the original game code.

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
   <title>draftutopiaMadLibs.html</title>
    <link rel = "stylesheet"
          type = "text/css"
          href = "draftutopiaMadLibs.css" />
    <script type="text/javascript"
            src = "draftutopiaMadLibs.js">
    </script>
</head>
<body>
    <h1>Draft Utopia Mad Libs Game</h1>
   <form action="">
        <fieldset>
            <label for = "txtBoy">Boy's name</label>
            <input type = "text"
                   id = "txtBoy" />

            <label for = "txtGirl">Girl's name</label>
            <input type = "text"
                   id = "txtGirl" />
               
            <label for = "txtGeol">Geologic formation</label>
            <input type = "text"
                   id = "txtGeol" />
               
            <label for = "txtVerb">Verb</label>
            <input type = "text"
                   id = "txtVerb" />
               
            <label for = "txtContainer">Container</label>
            <input type = "text"
                   id = "txtContainer" />
               
            <label for = "txtLiquid">Liquid</label>
            <input type = "text"
                   id = "txtLiquid" />
               
            <label for = "txtBodyPart">Body Part</label>
            <input type = "text"
                   id = "txtPart" />
               
            <label for = "txtGerund">ing verb</label>
            <input type = "text"
                   id = "txtGerund" />
               
            <button onclick = "tellStory()"
                    type = "button">
                tell the story
            </button>
           
        </fieldset>
    </form>
   
    <div id = "output">
       
    </div>

</body>

</html>

CSS Code Save this as draftutopiaMadLibs.css.  You can rename the css and javascript files, but you need to type the exact names of those files in the HTML piece I wrote above.

h1 {
  text-align: center;
}

fieldset {
  width: 600px;
  margin-left: auto;
  margin-right: auto; 
}

label {
  float: left;
  width: 250px;
  clear: left;
  text-align: right;
  padding-right: 1em;
}

input {
  float: left;
}

button {
  display: block;
  clear: both;
  margin-left: auto;
  margin-right: auto;
}

#output {
  font-size: 150%;
  text-align: center;
  width: 400px;
  margin-left: auto;
  margin-right: auto;
}

Javascript Code Save this as draftutopiaMadLibs.js

function tellStory(){
    //gather form elements
    var txtBoy = document.getElementById("txtBoy");
    var txtGirl = document.getElementById("txtGirl");
    var txtGeol = document.getElementById("txtGeol");
    var txtVerb = document.getElementById("txtVerb");
    var txtContainer = document.getElementById("txtContainer");
    var txtLiquid = document.getElementById("txtLiquid");
    var txtPart = document.getElementById("txtPart");
    var txtGerund = document.getElementById("txtGerund");
    var output = document.getElementById("output");

    //create variables for input       
    var boy = txtBoy.value;
    var girl = txtGirl.value;
    var geol = txtGeol.value;
    var verb = txtVerb.value;
    var container = txtContainer.value;
    var liquid = txtLiquid.value;
    var part = txtPart.value;
    var gerund = txtGerund.value;
   
   
    //write the story
    var story = boy + " and " + girl + " went up the ";
    story += geol + " to " + verb + " a " + container;
    story += " of " + liquid + ". <br / >
";
    story += boy + " fell down and broke his " + part;
    story += " and " + girl + " came " + gerund + " after.";
   
    //copy story to output
    output.innerHTML = story;
} // end tellStory
My name is Chris Ransom and I am the creator of Draft Utopia.  I run the podcast, website, and forum for Draft Utopia.

ChrisRansom

  • *********
  • 466
  • Christopher Michael Ransom The 1 and only.
    • View Profile
    • Draft Utopia
    • Email
Re: Tutorial 1 Designing a Game Using Javascript
« Reply #7 on: August 22, 2014, 02:56:49 PM »
After saving each of those files draftutopiaMadLibs.html draftutopiaMadLibs.css and draftutopiaMadLibs.js by copying the codes I posted below.  Load your game.

You should see something like this.

http://www.draftutopia.com/draftutopiaMadLibs.html

Only without the green css background, the social media buttons, or the DISQUIS comments page.

Let's say you type in Chris for the boys name.

The story would show up as

   //write the story
    var story = chris + " and " + girl + " went up the ";
    story += geol + " to " + verb + " a " + container;
    story += " of " + liquid + ". <br / >
";
    story += boy + " fell down and broke his " + part;
    story += " and " + girl + " came " + gerund + " after.";
   
    //copy story to output
    output.innerHTML = story;
} // end tellStory

Instead of

   //write the story
    var story = boy + " and " + girl + " went up the ";
    story += geol + " to " + verb + " a " + container;
    story += " of " + liquid + ". <br / >
";
    story += boy + " fell down and broke his " + part;
    story += " and " + girl + " came " + gerund + " after.";
   
    //copy story to output
    output.innerHTML = story;
} // end tellStory
My name is Chris Ransom and I am the creator of Draft Utopia.  I run the podcast, website, and forum for Draft Utopia.

ChrisRansom

  • *********
  • 466
  • Christopher Michael Ransom The 1 and only.
    • View Profile
    • Draft Utopia
    • Email
Re: Tutorial 1 Designing a Game Using Javascript
« Reply #8 on: August 22, 2014, 03:08:21 PM »
If you only type in a variable for the boy's name.  Chris is the only variable that shows up in your story.

Draft Utopia Mad Libs Game

chris and went up the to a of .

chris fell down and broke his and came after.

If you type the girls name in it will show up after and.  Chris and Rachel.

var story = chris + " and " + rachel + " went up the ";
    story += geol + " to " + verb + " a " + container;
    story += " of " + liquid + ". <br / >
";
    story += chris + " fell down and broke his " + part;
    story += " and " + rachel + " came " + gerund + " after.";

  Any words in this var story that are not in quotes like geol, verb, container, and part need to be typed when you type your html game by having the game on the screen.

The game must be active in order for these changes to work.

http://www.draftutopia.com/draftutopiaMadLibs.html You must type the body part that is broken for the broken body part to show up on the screen.  If you do not believe me type nothing before clicking the tell the story button by going to the link of my game.

I've tried retyping variables of the code to make it person1 and person2 so that you could put two guys or two girls in the story, but it won't let me even after I type the code in.  What I would suggest is to copy all the HTML code from the form and all the variables from javascript so everything is congruent and everything in this story shows up twice.  Then you can try to modify the code so everything is congruent.  I doubt this works, but it is worth a shot if you want to modify the game.

You could also modify thee element's of the game.  It may also be possible to change the words I've bolded inside of the label.

   <label for = "txtBoy">Boy's name</label>

<label for = "txtGirl">Girl's name</label>
           
Try changing the name of the Boy's Name and girl's name in bold to person 1 and person 2 without modifying the txtBoy and txtGirl code.  That should probably work and nobody will notice the txtBoy and txtGgirl labels when they load the game on an html document.
« Last Edit: August 22, 2014, 03:16:45 PM by ChrisRansom »
My name is Chris Ransom and I am the creator of Draft Utopia.  I run the podcast, website, and forum for Draft Utopia.

Re: Tutorial 1 Designing a Game Using Javascript
« Reply #9 on: August 22, 2014, 06:15:09 PM »
Too tired to read through the code right now but did play the game. I will never see that nursery rhyme the same way again...