Catching Game

Using this Block

In the catching game, the user moves an object (the catcher) right and left across the screen to catch falling objects. There can be only objects to catch or decoy objects can also be included.

Example Use

In a math game a player is going to make a recipe, and needs to divide the fractions by 3 because only 1/3 as many people are going to be fed as the original recipe intended. First, the player needs to catch all of the items in the recipe in a mixing bowl.

Making it your own

What’s in the block

Like every block, the catch game block has two files in the folder:

• An HTML file: catch_game.html . You should not have to change anything in this file.
• A config file: catch_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 and the “catch items”.

The config file

In the catch_config.js file you’ll see four sections that correspond to objects. It’s likely you may only need to change any code in two of these sections.

Page Options

As with all blocks, there is an options object. The options contain instructions on how to play the game and where to go after you have won the game.

const options = {
    completionURL: "../next_block/next_block.html",
    instructions: "<p>Catch items with the bowl. Use the arrow buttons to move the bowl left and right.</p>" +
              "<p>You must collect the following items:</p>" ,
    successText: "<h2>Congratulations. You caught all necessary ingredients!</h2>",
    hintText: `<p>You have to catch the following items:</p>`,
    pageBackground : "images/kitchen_counter_background.jpg" ,
    winGameImage: "images/win_background2.jpg" // If no win game image is provided, the catch game background image will be used ;
}

• completionURL – you’ll see this in every block. It is the URL where you want to go on the completion of this assessment.
• Instructions can be either html or just plain text. For plain text, simply paste the instructions text you want between the quotation marks after the colon.
• successText – text to show when player catches all the items.
• hintText – text to show before the list of items still needed to catch. The name of each item and the number still remaining is generated automatically from the displayItems object.
• pageBackground – put the URL for the background image here, be sure it is in quotes.
• winGameImage – the image that shows when the win the game. If none is provided, the same page background will be shown.

Item Placement

If the background image size is 1920 x 1080, you don’t need to change anything in the item_placement_config object.

const item_placement_config = {
  originalBackgroundSize: {width: 1920, height: 1080}, // size of background image (before scaling)
    backgroundDivID: "main",   // ID of div containing background image. DON'T CHANGE ;
    itemDivClass: "catch-item",// Class assigned to each displayed item (for styling)  DON'T CHANGE ;
    displayItems  [],   // items is an array (see below)  DON'T CHANGE ;
};

The item_placement_config object is for placement of items (I know, who would have guessed) and is used in resizing all of the items on the screen to the same scale. If players are using a smaller screen size, like a phone or tablet, everything will re-size automatically.

We recommend 1920 by 1080 as a good size for background images, especially for the web, and we have found students are most often using educational games on a Chromebook, but if you want it to be a different size, you can change it.

Drop Slots

If you like the defaults, you don’t need to change anything here.

// Where items should start dropping from on the screen ;
const dropSlots = [
    {
        left: 100,
        top: 10
    },
    {
        left: 300,
        top: 10
    },
    {
        left: 500,
        top: 10
    },
    {
        left: 700,
        top: 10
    },
    {
        left: 900,
        top: 10
    },
];

As the comment says, these are the locations from which items start dropping from the screen. The default is 10 pixels from the top and 100, 300, 500, 700 and 900 pixels from the left. This assumes a width of 1,920 for your background image. If this is fine with you, you don’t need to change anything.

DisplayItems

This is where you give the links for images and size for the catcher (whatever catches your items), the items to catch, and, optionally, any decoy items. You also specify the number of each item to catch.

This looks a little complicated, but really, it’s the same code for each item, so you can edit it pretty quickly.

const displayItems = [
    {
        displayItemID: "catcher",        // ID, will be used as div ID, must be unique
        itemName: "bowl",
        image:        "images/mixing_bowl.png",
        location:      {  // In fixed coordinate system established by originalBackgroundSize
            left: 200,
            top:  800
        },
        scaling:      0.08,
        altText:  "bowl",            // optional (goes in alt attribute)
        catchType:   "catcherItem",   // "catcherItem", "catchItem" or "decoyItem")
    },
    {
        displayItemID: "eggs",        // ID, will be used as div ID, must be unique
        itemName:      "eggs",
        image:        "images/eggs.png",
        scaling:      0.08,
        altText:  "eggs",            //  (goes in alt attribute)
        catchType:   "catchItem",
        numberRequired: 4
    },

    {
        displayItemID: "milk",        
        itemName:      "milk",
        image:        "images/milk.png",
        scaling:      0.08,
        dropScaling : 0.04,
        altText:  "milk",             
        catchType:   "decoyItem"
    },
    {
        displayItemID: "apple",         
        itemName:     "apple",
        image:        "images/apple.png",
        scaling:      0.06,
        altText:  "apple",             
        catchType:   "catchItem",        
        numberRequired: 3
    }
];

You only are required to have two types of items, a catcher item , with the type “catcher” and one ore more items to catch, with the type of “catchItem”. Remember, Javascript is case-sensitive so that must be catchItem with a capital I.

Each item has the following 7 properties. Location is only required for the catcherItem.

• displayItemID – This can be any valid Javascript ID. That is, start with a letter and include letters, numbers,  hyphens (-), underscores (_), colons (:), and periods. This ID will show up at the top of the screen next to the number of items caught
• itemName – The name for the item that will show up in the list of items the player needs to catch. This can be the same as the displayItemID or different. For example, the displayItemID may be “eggs” and the itemName “carton of eggs”.
• image – the file containing the image you want to use for this item
• location – the starting position – You only need this for the catcher item. It specifies where to place the object on the background when the game starts.
• scaling – the size of the item relative to its original size. So if you have an image that’s 900px wide and set scaling to 0.1, its new size will be 90px!
• altText – alternate text for the image. Not required but strongly recommended.
• catchType – This should be either “catcherItem”, which is the thing that is doing the catching, “catchItem” which are the things being caught, or “decoyItem” which is an item that the player
• numberRequired – this is how many of each item the player needs to catch. For the catcherItem this property is not used because there will be only one catcher item.