Runner Game Block

Using this Block

This is a game where the player runs from left to right, jumping over obstacles that appear in the way. Jump over a set number of obstacles to win the game. If you ever played the dinosaur jumping over cactus game on Chrome when the Internet was down, yeah, it’s like that.

Making it your own

What’s in the block

Like every block, the runner block has two files in the folder:

• An HTML file: runner.html . You should not have to change anything in this file.
• A config file: runner_config.js – This is where you will make any changes to create your unique game.

As with most blocks, it also has an images folder. Any images used specifically in this block will be saved here. This will include the game background, player character and the obstacles.

*** You have one job. Your background image needs to be 7,680px wide. Ideally, the beginning and end of the image will match up perfectly, as in the example. Three backgrounds are included in the block. We will have more in the future.

NOTE: The default in the demo game is a height of 576px. In this game, you have a score box and progress bar at the top so the stage and image height are set at 516px. You could change those but then this screen won’t be the same size as the rest of the blocks in your game.

There is also an audio folder that has the sounds to play when you hit an obstacle.

The config file

In the runner_config.js file you’ll see two sections. As with all blocks, there is an options object. The options include instructions on how to play the game and where to go after you have won the game.

It looks as if there are a lot of options here, and there are, but there are only a few you need to change.

const options = {
// WIDTH AND HEIGHT OF GAME SCREEN (SUBTRACT 60PX FROM SCREEN HEIGHT TO ALLOW FOR SCORE AT TOP.   
   stage: {       
        width: 1024,       
        height: 516   
     },    
     scrolling_image: {
        image_path: "images/runner_background.jpeg",
        height: "516px"
     // NOTE YOUR IMAGE SHOULD BE 7,680 PIXELS WIDE !   
     },
    ground_level: 90,
    runner: {
        image: "images/avatar-running.gif",
        location: {
            top: "400px",
            left: "500px",
        }
    },

    collision_counter_label: "Collisions",
    collision_limit: 10, // Game restarts if collisions reach this limit
    obstacle_end_game_count: 20,
    completionURL: "../level_up/level_up.html",
    intro_text: "Get to the end of the coursebut watch out for cannons and cacti. Hit the space bar to jump over them. If you run into ten you will have to start over. Use the space bar to jump.",
    too_many_collisions_text: You stepped on ten obstacles. You have to start over!",
    goal_image: {
        image: "images/this_way_to_academy_sign.png",
        height: "auto",
        width: "400px"
    },
    bad_sound: "../../audio/incorrect.wav", // Plays if you hit obstacle
};

image_path – give the url for the background image. It must be 7,680px wide and 516px height.

ground_level – This is where, in pixels, your obstacles will be placed, counting the bottom of the game screen as zero. In our example, this is where we are placing the cannons and cacti the character must jump over. I recommend just leaving it at 90, testing your game and then making the number smaller or larger, if necessary.

runner options

• image – enter the link for the image for the character you want to use as a runner
• location – the top and left values define the point in pixels that the game character is placed on the screen. I recommend just leaving it at as is, testing your game and then making the numbers smaller or larger, if necessary.

collision_counter_label – What do you want the label for the number of obstacles they fail to jump over?

collision_limit – How many obstacles can they run into before they lose? To make the game easier, increase this number. To make it harder, decrease the number.

obstacle_end_game_count – How many obstacles will be presented before the game ends? To make the game longer, increase this number. To make it shorter, decrease the number.

completionURL – link to go to after the game ends

intro_text – Instructions about the game. Be sure to include “Use the space bar to jump.”

too_many_collisions_text – Text to show when they lose the game.

Obstacles

const obstacles = [
    {
        image: "images/cannon.png",
        height: "auto",
        width: "90px"
    },
    {
        image: "images/cactus1.png",
        height: "66px",
        width: "32px"
    },
    {
        image: "images/cactus.png",
        height: "auto",
        width: "60px"
    },
];

You can have as many different obstacles as you want. We included several in the images folder, including a chicken. For each obstacle, include an image link and the width. If your image is not actually that width, it will be scaled down automatically, but it would make more sense to include an image of the size you want. The height will be computed automatically.

If you have more than one obstacle, one will be randomly select each time an obstacle is placed on the screen.