Copyright Derek O'Reilly, Dundalk Institute of Technology (DkIT), Dundalk, Co. Louth, Ireland.
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.
/* 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);
}
}
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.
<!-- Author: Derek O Reilly, Dundalk Institute of Technology, Ireland. -->
<!DOCTYPE html>
<html>
<head>
<title>Course notes example code</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 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>
/* 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.
Copyright Derek O' Reilly, Dundalk Institute of Technology (DkIT), Dundalk, Co. Louth, Ireland.