Static Images

Quite often, there will be some static images in a game. If we want to display static images, then we can use a gameObject that does not override the GameObject class's update() method. An example is shown here. The code for this example is shown below.

StaticImage.js

/* Author: Derek O Reilly, Dundalk Institute of Technology, Ireland. */

class StaticImage extends GameObject
{
    /* Each gameObject MUST have a constructor() and a render() method.        */
    /* If the object animates, then it must also have an updateState() method. */

    constructor(image, x, y, width, height)
    {
        super(null); /* as this class extends from GameObject, you must always call super() */

        /* These variables depend on the object */
        this.image = image;
        this.width = width;
        this.height = height;
        this.x = x;
        this.y = y;
    }

    render()
    {
        ctx.drawImage(this.image, this.x, this.y, this.width, this.height);
    }
}
The render() method displays the image at the position and with the width and height that were passed into the constructor. As there is no state change, we do not need to override the update() method.

Along with the StaticImage class, we need to make some changes to the static_image.html and static_image.js files. All other files remain unchanged.

The majority of the code in static_image.html and static_image.js remain unchanged from previous examples. The changes are highlighted in the code below.

four_corner_images.html

<!-- Author: Derek O Reilly, Dundalk Institute of Technology, Ireland. -->

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>GENIUS worked example</title>
        <link rel="shortcut icon" type="image/png" href="images/genius_icon.png"/>
        
        <!-- Always include the game stylesheet, the Game class, the GameObject class and index.js -->
        <!-- These four must be included in all games. This code never changes.                -->
        <link href="css/game.css" rel="stylesheet" type="text/css"/>
        <script src="js/CanvasGame.js" type="text/javascript"></script>
        <script src="js/GameObject.js" type="text/javascript"></script>
        <script src="js/index.js" type="text/javascript"></script>
        
        <!-- ***************************************************************************** -->
        <!-- *************** THE CODE BELOW CAN BE DIFFERENT FOR EACH GAME *************** -->
        
        <!-- Always include the game javascript that matches the html file name --> 
        <script src="js/four_corner_images.js" type="text/javascript"></script>
        
        <!-- Include any classes that extend from GameObject that are used in this game -->
        <script src="js/StaticImage.js" type="text/javascript"></script>
        
        <!-- ************************* END OF GAME SPECIFIC CODE ************************* -->
        <!-- ***************************************************************************** -->
    </head>

    <body>
        <div id="gameContainer"> <!-- having a container will allow us to have a game that includes elements that are outside of the canvas -->
            <canvas id="gameCanvas" tabindex="1"></canvas>

            <!-- ***************************************************************************** -->
            <!-- *************** THE CODE BELOW CAN BE DIFFERENT FOR EACH GAME *************** -->


            <!-- ************************* END OF GAME SPECIFIC CODE ************************* -->
            <!-- ***************************************************************************** -->
        </div>
    </body>
</html>

four_corner_images.js

/* Author: Derek O Reilly, Dundalk Institute of Technology, Ireland.             */
/* There should always be a javaScript file with the same name as the html file. */
/* This file always holds the playGame function().                               */
/* It also holds game specific code, which will be different for each game       */





/******************** Declare game specific global data and functions *****************/
/* images must be declared as global, so that they will load before the game starts  */

let cityImage = new Image();
cityImage.src = "images/city.png";

let beachImage = new Image();
beachImage.src = "images/beach.png";

let mountainImage = new Image();
mountainImage.src = "images/mountain.png";

let riverImage = new Image();
riverImage.src = "images/river.png";

/******************* END OF Declare game specific data and functions *****************/




/* Always have a playGame() function                                     */
/* However, the content of this function will be different for each game */
function playGame()
{
    /* We need to initialise the game objects outside of the Game class */
    /* This function does this initialisation.                          */
    /* This function will:                                              */
    /* 1. create the various game game gameObjects                   */
    /* 2. store the game gameObjects in an array                     */
    /* 3. create a new Game to display the game gameObjects          */
    /* 4. start the Game                                                */

    /* Create the various gameObjects for this game. */
    /* This is game specific code. It will be different for each game, as each game will have it own gameObjects */

    gameObjects[0] = new StaticImage(cityImage, 0, 0, canvas.width / 2, canvas.height / 2);
    gameObjects[1] = new StaticImage(beachImage, canvas.width / 2, 0, canvas.width / 2, canvas.height / 2);  
    gameObjects[2] = new StaticImage(mountainImage, 0, canvas.height / 2, canvas.width / 2, canvas.height / 2);
    gameObjects[3] = new StaticImage(riverImage, canvas.width / 2, canvas.height / 2, canvas.width / 2, canvas.height / 2);    

    /* END OF game specific code. */


    /* Always create a game that uses the gameObject array */
    let game = new CanvasGame();

    /* Always play the game */
    game.start();
    
    
    /* If they are needed, then include any game-specific mouse and keyboard listners */
}

Write code to draw four coloured blocks on the canvas, as shown here.

Write code to draw a block that fades out from white to red, as shown here.

Write code to draw a set of randomly coloured blocks, as shown here.

Write code to make a grayscale circle gradient, as shown here.