Table of Contents

Here are a few "must-have" features to add to your game... click to jump to the instruction:

  1. Play again & Game Over
  2. Display Score
  3. Difficulty level

Once you're done with those, give this a try:

Click here to see a list of software and links from class

1. Play Again and Game Over

Right now if we try to play the game, the running man will stop when he gets to an obstacle. We want some notification that lets the player know that the game is over, and a button to restart the game to keep playing.

Here's the plan: when you lose the game, the screen goes black, shows you a "game over" picture, and gives you a button to play again.

Part 1: Get the right style code

We need to define how our our black screen looks, and how our picture looks, and how that button looks. That's what "CSS" code is for -- defining how things look.

Find a line that says /* ADD CSS CODE HERE */. Right under that paste this code:

  #playAgainBackground
  {
    background-color: black;
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    z-index:10;
  }
  #playAgainImage {
    position:absolute;
    z-index:11;
    top:30%;
    left:30%;
    max-width: 40%;
    max-height: 50%;
  }
  #playAgainButton
  {
    position:absolute;
    z-index:11;
    top:20%;
    left:45%;
  }
  #finalscore
  {
    position:absolute;
    z-index:11;
    top:20%;
    padding-top:30px;
    left:40%;
    color:yellow;
    font-size:1.5em;
  }
  #score
  {
    color: black;
    position:absolute;
    top:100px;
    left:100px;
    z-index:1;
    font-size:1.5em;
  }

What does this mean? - "z-index" defines whether things are in the front, or in the back. Since z-index is 10 or 11 (large) these will appear in the very front. - playAgainBackground has a height of 100% and width of 100% so it will cover the entire page

Part 2: Make these actually appear when you lose

Next, find an image for "game over" -- It can just say "game over", or be a sad face, or something like that.

Now, Find the line that says "(4) PLAY AGAIN"

Now, right below "PLAY AGAIN", type this:

$(document.body).append("<div id='playAgainBackground'></div>");
$(document.body).append("<img id='playAgainImage' />");
$(document.body).append("<button id='playAgainButton' onclick='window.location.reload();'>Play again</button>");
$("#playAgainImage").attr("src","[choose your image]");

But instead of [choose your image], type the URL of the image you found.

Also, find the line that says alert("GAME OVER"); // ORIGINAL GAME OVER NOTIFICATION.
Delete this line.

Now it should work!

2. Display the Score

We want to be able to get points for every obstacle we jump over.

A lot of the code is already there -- but we're not finished.

This code will give you a point whenever you pass over an obstacle.

Part 1: Show Score as you play

We need to give the game a place to put the score data.

Find the line that says <!--(8g) SCORE DIV GOES HERE-->.

Right after, add this code:

<div id="score">Score: <div id="scorenum">0</div></div>

Right now, the score is 0, but this will change if you can make it past some obstacles.

Part 2: Show Final Score

We want to show a final score because when you lose, you might want to know how many points you got after all.

Find the line that says (4) PLAY AGAIN

Right after it, type this:

$(document.body).append("<div id='finalscore'>score: " + obstaclecount + "</div>");

This is the javascript that will display the score.

3. "Easy margin" - Difficulty Level

We want to be able to make the game easier because sometimes, it seems like you lose the game even when you don't touch any obstacles.

Find the line that says (3a) add EASY MARGIN VARIABLE. Then, add this line:

var easymargin = 40;

Next find the line that says (3b) Add EASY MARGINS:. We need to alter some of those lines.

[old]: dinoPosition.left + dinoWidth > cactusPosition.left &&
[new]: dinoPosition.left + dinoWidth > cactusPosition.left+easymargin &&

[old]: dinoPosition.left < cactusPosition.left + cactusWidth &&
[new]: dinoPosition.left < cactusPosition.left + cactusWidth-easymargin &&

What does this do? It makes the computer think that the obstacles are narrower. Instead of being 1 inch, the obstacles might be .8 inches wide. That means it is easier to jump over them.

Adjusting difficulty

var easymargin = [a number] is what controls the difficulty.

If easymargin = a big number, then you can get very close to the croissant without the game ending. However, if easymargin = a small number, then you must jump at exactly the right time to avoid losing the game.

Another method: If you find where it says "#runningGuy", then find the line inside that says "left: 300px;", you can make it easier by making the value smaller because you will have more warning.


Other things you can change

Make the score bigger

What if you want to get 10 points, or 100 points, for every obstacle you jump over?

Find the line that says

    obstaclecount += 1;

Instead of 1, change to a bigger number. If you want to get 100 for every obstacle, then change it to 100.


And a quick reminder of the software you will need: