3.05 Hand in: Character Generator

Computer Programmer - the RPG

Let's say that I have created a role-playing game in which people play computer programmers with different skills and abilities. I know! Brilliant idea! I am going to make a mint!

Let's say that each character could have the following characteristics:

An example

When I put all of this together, I can get this:

Please enter a name for your character: Click to generate your character!

Your character:

Saving your work

Download the template and rename it: "3.05H-CharacterGenerator-LastName.html".

The assignment

Use objects and functional programmming to ask the user for a character name, generate random characteristics, generate a simple character sheet, and then output the sheet.

Use whatever game system you want. Or create your own. Or make something that is a kind-hearted parody. Have fun with this.

Recommended procedure

1. Read over Qualities of a Programmer again
2. Plan your user interface first
3. Plan your variables next paying special attention to your object variable
4. Plan your separate functions input, process, and output functions. You should have a separate function for generating the character statistics and the character sheet.
5. Decide on how the functions will work together in a function pipeline
6. Create your functions empty at first with only the input parameters and return variables, like this:
   
   function someKindOfFunction (inputVariable) {
      console.log('in someKindOfFunction, inputVariable=' + inputVariable);
      var outputVariable;

      return outputVariable;
}

7. Fill in the actual working code of the functions last of all, testing as you go.

Evaluation

• ___/10 INIT: including
  1. create an empty object
  2. use the value of an object's property to create different animation behaviours
  3. pass an object to a function as a parameter/argument
  4. use an object with multiple properties inside an animation
• ___/10 PROCESS: including
  1. create a function that accepts an object as an argument/parameter
  2. set a delay using setTimeout() or setInterval
  3. use an anonymous function inside setTimeout() or setInterval
  4. use string addition
  5. processes at least 5 characteristics
• ___/10 OUTPUT: including ANY FIVE of
  1. change the src of an element
  2. display information using .innerHTML
  3. animate using a custom duration
  4. position an object using % instead of px
  5. animate a change in the width of an element
  6. animate a fade in or fade out of an element
• ___/10 STYLE: including
  1. honour all previous //STYLE sections
  2. use descriptive variable names
  3. break up functions into separate ones for input, processing, and output
  4. uses descriptive comments to identify and describe each function,
     for example: //PROCESS: this function accepts distanceUp and animates the image up that number of pixels
  5. add spaces between mathematical operators,
     for example: var exampleVar = 3 + 4, not var exampleVar=3+4.