Copyright Derek O'Reilly, Dundalk Institute of Technology (DkIT), Dundalk, Co. Louth, Ireland.
A moving image is similar to a static image in that it will have a position, a width and a height. Unlike a static image, a moving image will continuously update its position, as shown here. The code for this example is shown below.
/* Author: Derek O Reilly, Dundalk Institute of Technology, Ireland. */
class Car 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, y, width, height, updateStateMilliseconds)
{
super(updateStateMilliseconds); /* 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 = 0;
this.y = y;
}
updateState()
{
this.x++;
if (this.x > canvas.width)
{
this.x = -this.width;
}
}
render()
{
ctx.drawImage(this.image, this.x, this.y, this.width, this.height);
}
}
The updateState() method increments the x coordinate of the car until it moves off the right-side of the canvas. It then reappears at "-this.width" on the original side of the screen. Without this, the car would sudenly reappear at x coordinate 0, which does not look smooth.
updateState()
{
this.x++;
if (this.x > canvas.width)
{
this.x = -this.width;
}
}Along with the Car class, we need to make some changes to the moving_image.html and moving_image.js files. All other files remain unchanged.
The majority of the code in moving_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/moving_image.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>
<script src="js/Car.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>
In this case, we have two different GameObject sub-classes: StaticImage and Car. Therefore, we need to include a link to both files
<!-- Include any classes that extend from GameObject that are used in this game -->
<script src="js/StaticImage.js" type="text/javascript"></script>
<script src="js/Car.js" type="text/javascript"></script>
/* 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 mapImage = new Image(); mapImage.src = "images/map.png"; let carImage = new Image(); carImage.src = "images/car.png"; const MAP = 0; const CAR = 1; /******************* 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[MAP] = new StaticImage(mapImage, 0, 0, 500, 500); gameObjects[CAR] = new Car(carImage, 235, 40, 25, 25); /* 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 */ }
If there is more than one type of gameObject, it can be useful to assign constants to the various gameObjects. The red highlighted code above shows how to do this.
Write code to allow a user to stop and restart a car image. The user should also be able to adjust the speed that the car travels, as shown here.
Copyright Derek O' Reilly, Dundalk Institute of Technology (DkIT), Dundalk, Co. Louth, Ireland.