Image da wasa

按下按钮可移动笑脸:






如何使用图像?

如需在画布上添加图像,请使用 getContext("2d") 对象内置的图像属性和方法。

A cikin saurayi a na yan saurayi, a na yan saurayi saurayi saurayi saurayi koyi "image", kuma a na yan saurayi url saurayi saurayi, kuma a na yan saurayi koyi saurayi saurayi saurayi saurayi "image":

مثال

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

A cikin saurayin saurayi, a na yan tsaunin saurayi koyi ya "image", kuma a yan saurayi "new Image()" saurayi saurayi saurayi. A cikin saurayi a na rarrabawa saurayi, a na yan saurayi drawImage kuma saurayi fillRect saurayi:

مثال

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

更改图像

您可以随时通过更改组件的 image 对象的 src 属性来更改图像。

如果您想在每次移动时更改笑脸,请在用户单击按钮时更改图像源,并在未单击按钮时恢复正常:

مثال

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

背景图片

通过将背景图像添加为组件,可将其添加到游戏区域,并在每个帧中更新背景:

مثال

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

移动背景

更改背景组件的 speedX 属性可使背景移动:

مثال

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

Try it yourself

تکرار پس‌زمینه

برای اینکه این پس‌زمینه مشابه همیشه تکرار شود، باید از تکنیک‌های خاص استفاده کنیم.

ابتدا به سازنده جزء اطلاع داده می‌شود که این پس‌زمینه است. سپس، سازنده جزء دو بار تصویر را اضافه می‌کند و دومین تصویر را بلافاصله پس از اولین تصویر قرار می‌دهد.

در newPos() در روش، بررسی می‌شود که مکان x جزء آیکون به پایان رسیده است یا خیر، اگر به پایان رسیده باشد، مکان آیکون x موقعیت تنظیم شده به 0:

مثال

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