Canvas ການສະແດງພາບ

ການກົດລະບຽບຄະນະທີ່ຈະເຄື່ອນຍ້າຍຫົວສັນຍານ:

ວິທີການໃຊ້ພາບ?

ຖ້າພວກເຮົາຕ້ອງເພີ່ມພາບລະບາຍໃສ່ແຜ່ນສະແດງພວກເຮົາໃຊ້ການສ່ວນມາຂອງຕົວເລື່ອງ "2d" ແລະວິທີການພາບລະບາຍຂອງຕົວເລື່ອງນັ້ນ.

ໃນເກມຂອງພວກເຮົາຖ້າພວກເຮົາຕ້ອງສ້າງສັນຍານໃຫ້ເປັນພາບລະບາຍຫຼັງຈາກການສ້າງຕົວເລື່ອງສັນຍານພວກເຮົາຕ້ອງອ້າງທາງ URL ຂອງພາບຕັ້ງແຕ່ບໍ່ອ້າງບາງສັນຍານສີ. ແລະຕ້ອງບອກຕົວເລື່ອງການສ້າງຕົວເລື່ອງວ່າຊະນິດຂອງສັນຍານແມ່ນ "image":

ຄົນປະກອບ

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

ໃນການສ້າງຕົວເລື່ອງຂອງສັນຍານປະກອບສັນຍານພວກເຮົາກວດກາວ່າສັນຍານຈະຢູ່ໃນຊະນິດ "image" ແລະໃຊ້ຕົວເລື່ອງ "new Image()" ການສ້າງຕົວເລື່ອງພາບລະບາຍ. ໃນຂະນະທີ່ພວກເຮົາກຳລັງກຽມການຂຽນພາບລະບາຍພວກເຮົາໃຊ້ວິທີການ drawImage ທີ່ບໍ່ມີວິທີການ fillRect:

ຄົນປະກອບ

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

亲自试一试

更改图像

您可以随时通过更改组件的 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;
}

亲自试一试

ພາບບໍລິການຕົວແກ້ວ

ຜ່ານການເພີ່ມພາບບໍລິການຕົວແກ້ວຫາບໍລິການຕົວແກ້ວຈະເປັນການເພີ່ມຫາບໍລິການຕົວແກ້ວແລະການປັບປຸງພາບບໍລິການຕົວແກ້ວໃນແຕ່ລະວັນນະຄັງ:

ຄົນປະກອບ

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

亲自试一试

ເຄື່ອນໄຫວບໍລິການຕົວແກ້ວ

ແກ້ໄຂສະຖານະບັນດາປ່ຽນການເຄື່ອນໄຫວຂອງບໍລິການຕົວແກ້ວ: speedX ການແກ້ໄຂສະຖານະຂອງບໍລິການຕົວແກ້ວໄດ້ເປັນການເຄື່ອນໄຫວຂອງບໍລິການຕົວແກ້ວ:

ຄົນປະກອບ

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

亲自试一试

背景循环

为了让这幅相同的背景永远循环，我们必须使用特定的技术。

ກ່ອນທີ່ຈະບັນທຶກຄວາມຫຼັງຂອງສິນຄ້າວ່ານີ້ເປັນບັນດາຮູບພາບບໍ່ມີຈະສາມາດກວດກາລະບົບຄວາມຫຼັງຂອງບັນດາຮູບພາບທີ່ສະໜອງຄືກັນດັ່ງກ່າວນີ້ຫຼາຍຄັ້ງ.

ໃນ 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;
      }
    }
  }
}

亲自试一试