Game Images

---

Push the buttons to move the smiley:

var myGameArea;
var myGamePiece;

function startGame() {
myGameArea = new gamearea();
myGamePiece = new component(30, 30, "smiley.gif", 10, 75, "image");
myGameArea.start();
}

function gamearea() {
this.canvas = document.createElement("canvas");
this.canvas.width = 320;
this.canvas.height = 180;
document.getElementById("canvascontainer").appendChild(this.canvas);
this.context = this.canvas.getContext("2d");
this.start = function() {
this.interval = setInterval(updateGameArea, 20);
}
this.clear = function(){
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}

function component(width, height, color, x, y, type) {
this.type = type;
if (type == "image") {
this.image = new Image();
this.image.src = color;
}
this.width = width;
this.height = height;
this.speedX = 0;
this.speedY = 0;
this.x = x;
this.y = y;
this.update = function() {
ctx = myGameArea.context;
if (type == "image") {
ctx.drawImage(this.image,
this.x,
this.y,
this.width, this.height);
} else {
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
}

function updateGameArea() {
myGameArea.clear();
myGamePiece.x += myGamePiece.speedX;
myGamePiece.y += myGamePiece.speedY;
myGamePiece.update();
}

function move(dir) {
myGamePiece.image.src = "angry.gif";
if (dir == "up") {myGamePiece.speedY = -1; }
if (dir == "down") {myGamePiece.speedY = 1; }
if (dir == "left") {myGamePiece.speedX = -1; }
if (dir == "right") {myGamePiece.speedX = 1; }
}

function clearmove() {
myGamePiece.image.src = "smiley.gif";
myGamePiece.speedX = 0;
myGamePiece.speedY = 0;
}
startGame();

---

How to Use Images?

To add images on a canvas, the getContext("2d") object has built-in image
properties and methods.

In our game, to create the gamepiece as an image, use the component
constructor, but instead of referring to a color, you must refer to the url of
the image. And you must tell the constructor that this component is of type
"image":

In the component constructor we test if the component is of type "image", and
create an image object by using the built-in "new Image()" object constructor.
When we are ready to draw the image, we use the drawImage method instead of the fillRect method:

---

---

Change Images

You can change the image whenever you like by changing the src property of the image object of your component.

If you want to change the smiley everytime it moves, change the image source when the user clicks a button,
and back to normal when the button is not clicked:

---

Background Images

Add a background image to your game area by adding it as a component, and
also update the background in every frame:

---

Moving Background

Change the background component's speedX property to make the background move:

---

Background Loop

To make the same background loop forever, we must use a specific technique.

Start by telling the component constructor that this is a background.
The component constructor will then add the image twice, placing the second image
immediately after the first image.

In the newPos() method, check if the x position of the component has reach
the end of the image, if it has, set the x position of the component to 0: