My Community

Tutorial 2 Designing A Number Building Game

ChrisRansom

  • *********
  • 469
  • Christopher Michael Ransom The 1 and only.
    • View Profile
    • Draft Utopia
    • Email
Tutorial 2 Designing A Number Building Game
« on: August 29, 2014, 12:16:01 PM »
This is code for a number building game before I upload it to my site.  I'll give you the HTML, CSS, and javascript code to make the game and explain everything.
My name is Chris Ransom and I am the creator of Draft Utopia.  I run the podcast, website, and forum for Draft Utopia.

ChrisRansom

  • *********
  • 469
  • Christopher Michael Ransom The 1 and only.
    • View Profile
    • Draft Utopia
    • Email
Re: Tutorial 2 Designing A Number Building Game
« Reply #1 on: August 29, 2014, 12:22:03 PM »
HTML Code

<!DOCTYPE HTML>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>Draft Utopia Number Guesser</title>
  <link rel = "stylesheet"
        type = "text/css"
        href = "draftutopianumberGuesser.css" />
  <script type = "text/javascript"
          src = "draftutopianumberGuesser.js"></script>
</head>

<body onload = "init()">
  <h1>Draft Utopia Numbers Game</h1>
  <form>
    <fieldset>
      <div id = "output">
        I'm thinking of a number between 0 and 100.
        Guess my number, and I'll tell if you are
        too high, too low, or correct.
      </div>
      <label for = "">Your Guess</label>
      <input type = "text"
             id = "txtGuess">
      <button type = "button"
              onclick = "checkGuess()">
        check your guess
      </button>
     
      <button type = "button"
              id = "again"
              onclick = "init()">
        try again
      </button>
    </fieldset>
  </form>
</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

  • *********
  • 469
  • Christopher Michael Ransom The 1 and only.
    • View Profile
    • Draft Utopia
    • Email
Re: Tutorial 2 Designing A Number Building Game
« Reply #2 on: August 29, 2014, 12:25:39 PM »
CSS Code

h1 {
    text-align: center;
}

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

#output {
    text-align: center;
}

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;
}
My name is Chris Ransom and I am the creator of Draft Utopia.  I run the podcast, website, and forum for Draft Utopia.

ChrisRansom

  • *********
  • 469
  • Christopher Michael Ransom The 1 and only.
    • View Profile
    • Draft Utopia
    • Email
Re: Tutorial 2 Designing A Number Building Game
« Reply #3 on: August 29, 2014, 12:28:41 PM »
Javascript Code

//from "draftutopianumberGuesser.js
  //page-level variables
  var guess;
  var correct;
  var turns;

  //components
  var output;
  var txtGuess;
  var btnAgain;
 
  function init(){
    //from "draftutopianumberGuesser.js
    //initialize components
    output = document.getElementById("output");
    txtGuess = document.getElementById("txtGuess");
    btnAgain = document.getElementById("again");
   
    //hide again button
    btnAgain.style.display = "none";
   
    //initialize counter
    turns = 0;
   
    //initialize output
    output.innerHTML = "I'm thinking of a number between 0 and 100. ";
    output.innerHTML += "Guess my number, and I'll tell if you are ";
    output.innerHTML += "too high, too low, or correct.";
   
    //generate random for correct answer
    correct = parseInt(Math.random() * 100);
    console.log(correct);
   
    //make sure input text gets focus
    txtGuess.focus();
   
  }  // end init
   
  function checkGuess(){
    //"draftutopianumberGuesser.js
    //increment turns
    turns++;
   
    response = turns + ") ";
    //get guess from user
    guess = parseInt(txtGuess.value);
    if (guess < correct){
      response += "Too low";
    } else if (guess > correct){
      response += "Too high";
    } else if (guess == correct){
      response += "Correct!";
      //show again button
      btnAgain.style.display = "block";
    } else {
      response += "Please enter a number between 1 and 100";
    } // end if
    output.innerHTML = response;
  }  // end checkGuess
My name is Chris Ransom and I am the creator of Draft Utopia.  I run the podcast, website, and forum for Draft Utopia.

ChrisRansom

  • *********
  • 469
  • Christopher Michael Ransom The 1 and only.
    • View Profile
    • Draft Utopia
    • Email
Re: Tutorial 2 Designing A Number Building Game
« Reply #4 on: August 29, 2014, 12:49:19 PM »
If you save all those codes and upload the game it should work.

In the HTML code the div id output shows you the letters indicating that the game is thinking of a number between 1 and 100.  There are also buttons for check your guess and try again.

The CSS code is different from the CSS code in the first game.  Unlike the CSS code that was useless in the Mad Libs game, this CSS code has some purposes.  The h1 {text-align: center;} tag moves the Draft Utopia Numbers Game Header I created into the center rather than leaving it on the left side.  The same thing happens with the #output {text-align: center;} tag.  There is also a button code in CSS.

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

Finally we have our javascript code.  This javascript has lots of variables.  What you guess, the correct number, and how many turns it takes are all variables for the game.

//initialize output gives you the same HTML code for I'm thinking of a number between 1-100 in Javascript to make the game congruent.

if guess<correct=too low indicates that the number you guessed was too low.  Same thing goes for guess>correct too high.  Those functions allow the game to indicate certain variables.  guess=correct means you picked the right number.

There is another outputInput.html function with checkguess that allows the game to check the number.

In the next tutorial I'll javascript fundamentals to game design including canvas, sprites, and SimpleGame.js code that most of the games in my HTML Game Design for dummies book by Andy Harris.
My name is Chris Ransom and I am the creator of Draft Utopia.  I run the podcast, website, and forum for Draft Utopia.