Copyright Derek O'Reilly, Dundalk Institute of Technology (DkIT), Dundalk, Co. Louth, Ireland.
Assumeing that an image has been stitched so that its two ends match, scrolling can be achieved by displaying the same image twice beside each other. The image scrolls to the left until the first of the two images has been totally scrolled out, leaving only the second image being displayed on the canvas. At this point, we reset the scrolling position of the first image back to zero and start the scrolling code again.
Example of a scrolling background image (Run Example).
/* 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 scrollingBackgroundImage = new Image();
scrollingBackgroundImage.src = "images/scrolling_background.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 ScrollingBackgroundImage(scrollingBackgroundImage, 20);
// make the canvas wider for this example
document.getElementById("gameCanvas").style.width = "1000px";
/* 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 */
}
/* Author: Derek O Reilly, Dundalk Institute of Technology, Ireland. */
class ScrollingBackgroundImage 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, updateStateMilliseconds)
{
super(updateStateMilliseconds); /* as this class extends from GameObject, you must always call super() */
/* These variables depend on the object */
this.image = image;
this.x = 0;
}
updateState()
{
this.x--;
if (this.x <= -canvas.width)
{
this.x = 0;
}
}
render()
{
ctx.drawImage(this.image, this.x, 0, canvas.width, canvas.height);
ctx.drawImage(this.image, this.x + canvas.width, 0, canvas.width, canvas.height);
}
}
In updateState(), x is continuously decremented until the first image is fully off the canvas. At this point, x is reset to 0, as shown below.
updateState()
{
this.x--;
if (this.x <= -canvas.width)
{
this.x = 0;
}
}
The same image is drawn twice on the canvas.
render()
{
ctx.drawImage(this.image, this.x, 0, canvas.width, canvas.height);
ctx.drawImage(this.image, this.x + canvas.width, 0, canvas.width, canvas.height);
}
Copyright Derek O' Reilly, Dundalk Institute of Technology (DkIT), Dundalk, Co. Louth, Ireland.