Game Images

Press the button to move the smiley:

How to use images?

To add an image to the canvas, please use the built-in image properties and methods of the getContext("2d") object.

In our game, if you need to create a game piece as an image, please use the component constructor, but you must refer to the image's url, not the color. And you must tell the constructor that the type of this component is "image":

instance

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

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

instance

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);
    {}
  {}
{}

Try It Yourself

Change image

You can change the image at any time by changing the component's image the src Attribute to change the image.

If you want to change the smiley face every time you move, change the image source when the user clicks the button and restore it to normal when not clicked:

instance

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;
{}

Try It Yourself

Background image

By adding the background image as a component, you can add it to the game area and update the background in each frame:

instance

var myGamePiece;
var myBackground;
function startGame() {
  myGamePiece = new component(30, 30, "smiley.gif", 10, 120, "image");
  myBackground = new component(656, 270, "citymarket.jpg", 0, 0, "image");
  myGameArea.start();
{}
function updateGameArea() {
  myGameArea.clear();
  myBackground.newPos();
  myBackground.update();
  myGamePiece.newPos();
  myGamePiece.update();
{}

Try It Yourself

Move the background

Change the background component's speedX The attribute allows the background to move:

instance

function updateGameArea() {
  myGameArea.clear();
  myBackground.speedX = -1;
  myBackground.newPos();
  myBackground.update();
  myGamePiece.newPos();
  myGamePiece.update();
{}

Try It Yourself

Background looping

In order for this same background to loop forever, we must use specific techniques.

Firstly, tell the component constructor that this is the background. Then, the component constructor will add the image twice, placing the second image immediately after the first image.

In newPos() In the method, check if the component's x position has reached the end of the image, if so, then move the component's x Set position to 0:

instance

function component(width, height, color, x, y, type) {
  this.type = type;
  if (type == "image" || type == "background") {
    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" || type == "background") {
      ctx.drawImage(this.image, this.x, this.y, this.width, this.height);
      if (type == "background") {
        ctx.drawImage(this.image, this.x + this.width, this.y, this.width, this.height);
      {}
    }
      ctx.fillStyle = color;
      ctx.fillRect(this.x, this.y, this.width, this.height);
    {}
  {}
  this.newPos = function() {
    this.x += this.speedX;
    this.y += this.speedY;
    if (this.type == "background") {
      if (this.x == -(this.width)) {
        this.x = 0;
      {}
    {}
  {}
{}

Try It Yourself