ゲームの画像

❮ 前章へ 次章へ ❯

スマイリーを動かすには、ボタンを押してください：







画像の使い方は？

キャンバスに画像を追加するために、getContext("2d") オブジェクトには組み込みの image プロパティとメソッドがあります。

私たちのゲームでは、ゲームピースをイメージとして作成するために、component コンストラクタを使用します。 但し、色を参照する代わりに、画像の URL を参照する必要があります。 そして、コンストラクタに、このコンポーネントのタイプが "image" であることを伝える必要があります：

例

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

component コンストラクタでは、コンポーネントのタイプが "image" であるかどうかをテストし、 組込みの "new Image()" オブジェクトコンストラクタを使用して画像オブジェクトを作成します。 画像の描画準備ができたら、fillRect メソッドの代わりに drawImage メソッドを使用します：

例

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 »

背景のループ

同じ背景を永遠にループするには、指定のテクニックを使用する必要があります。

まず、これが背景であることを component コンストラクタに伝えます。component コンストラクタは、 次に最初の画像の直後に 2 番目の画像を配置して画像を 2 度追加します。

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

❮ 前章へ 次章へ ❯