Create a Game Character with HTML5 and JavaScript - Part 2

In Part 2 we are going to give our character the ability to jump.

The example below shows our character getting pelted with a little red ball. The only remedy is jumping. Click the jump button below to save him from his sisyphean monotony.

Character Abilities

Blink

Jump

What's in a Jump

Below is an illustration of the character before and during a jump. There are a six differences. Can you spot them?

The differences:

• The left arm is rotated.
• The right arm is rotated.
• The left leg is up a bit.
• The right leg is pulled back
• The position of the character is higher.
• The shadow is smaller.

Save the State

We create a variable to store our characters jump state.

var jumping = false;

We initialize the variable jumping to false

We create a function jump that will only change state if not already jumping.

function jump() {
                        
  if (!jumping) {
    jumping = true;
    setTimeout(land, 500);
  }
}

Thejump function first checks the value of the variable jumping. If jumping is true then do nothing because a jump is in progress. If jumping is false then set the jumping variable to true and call the function land after 500 miliseconds (0.5 seconds).

The land function will end the jump.

function land() {
                        
  jumping = false;
}

The land function simply sets the jumping variable to false.

New Jump Images

The jump state will require drawing 3 new images. We created them like we did in Part 1 and save them as transparent pngs.

var totalResources = 9;

loadImage("leftArm-jump");
loadImage("legs-jump");
loadImage("rightArm-jump");

We increment the totalResources variable by 3 and load the three new images which have "-jump" appended to their files names.

Redraw

Now we update the redraw function we created in Part 1 to reflect the new jump state.

function redraw() {

  var x = charX;
  var y = charY;
  var jumpHeight = 45;
  
  canvas.width = canvas.width; // clears the canvas 

  // Draw shadow
  if (jumping) {
    drawEllipse(x + 40, y + 29, 100 - breathAmt, 4);
  } else {
    drawEllipse(x + 40, y + 29, 160 - breathAmt, 6);
  }
  
  if (jumping) {
    y -= jumpHeight;
  }

  if (jumping) {
    context.drawImage(images["leftArm-jump"], x + 40, y - 42 - breathAmt);
  } else {
    context.drawImage(images["leftArm"], x + 40, y - 42 - breathAmt);
  }
  
  if (jumping) {
    context.drawImage(images["legs-jump"], x - 6, y );
  } else {
    context.drawImage(images["legs"], x, y);
  }
    
  context.drawImage(images["torso"], x, y - 50);
  context.drawImage(images["head"], x - 10, y - 125 - breathAmt);
  context.drawImage(images["hair"], x - 37, y - 138 - breathAmt);
  
  if (jumping) {
    context.drawImage(images["rightArm-jump"], x - 35, y - 42 - breathAmt);
  } else {
    context.drawImage(images["rightArm"], x - 15, y - 42 - breathAmt);
  }
  
  // Draw eyes
  drawEllipse(x + 47, y - 68 - breathAmt, 8, curEyeHeight);
  drawEllipse(x + 58, y - 68 - breathAmt, 8, curEyeHeight);
}

We add a new variable jumpHeight which is how many pixels our character will jump.

If the jumping is true then do the following:

• Make the character shadow smaller.
• Increment the character y position by the jump height.
• Draw the jump version of the arms and legs.

Working Example

Here is a working example. The example code is available for download below.

Character Abilities

Blink

Jump

Zombie Version:

Character Abilities

Blink

Jump

Download Source Code

• Download HTML5 Canvas Game Character (zip format): html5-canvas-drawing-app-2.zip

Share This Article

Related Articles