SVG Canvas

ເພີ່ມບາງຫຼັງສີສີນົມໃນເຂດເກມ:

ເພີ່ມສິ່ງປະກອບ

ສ້າງຄວາມຄືບໜ້າສິ່ງປະກອບ ເພື່ອອະນຸຍາດທີ່ເຈົ້າຈະເພີ່ມສິ່ງປະກອບເຂົ້າໃນເຂດເກມ.

ຄວາມຄືບໜ້າຂອງໂຄງການນີ້ເອີ້ນວ່າcomponent（component）ພວກເຮົາໄດ້ສ້າງສິ່ງປະກອບທຳອິດຊື່ວ່າ myGamePiece:

ຄວາມນິຍົມ

var myGamePiece;
function startGame() {
  myGameArea.start();
  myGamePiece = new component(30, 30, "red", 10, 120);
}
function component(width, height, color, x, y) {
  this.width = width;
  this.height = height;
  this.x = x;
  this.y = y;
  ctx = myGameArea.context;
  ctx.fillStyle = color;
  ctx.fillRect(this.x, this.y, this.width, this.height);
}

ການທົດລອງຄັດນີ້

ບັນດາສິ່ງປະກອບນີ້ມີຄວາມປະສົງການສະແດງຕົວອອກຫຼືການເຄື່ອນຍ້າຍ.

ວິດີໂອ

ເພື່ອໃຫ້ເກມກະຈາຍການສະແດງການສະໜັບສະໜູນຄວາມກະຈາຍຄວາມສະແດງ 50 ຄັ້ງຕໍ່ວັນນາທີ ນັ້ນຄືກັບວິດີໂອທີ່ມີວິດີໂອຫຼັງກັນ.

ທຳອິດສ້າງກາງຊື່ updateGameArea() ຫຍັງກົນລະບຽບ

ໃນ myGameArea ໂດຍເພີ່ມຂອງ updateGameArea() ກົນລະບຽບ clear() ກົນລະບຽບ

ໃນ component ກົນລະບຽບ update() ກົນລະບຽບທີ່ມີປະສົງຄວາມສະໜາມຂອງປະກອບສ່ວນ.

updateGameArea() ການເອິ້ນຫຍັງ clear() ແລະ update() ກົນລະບຽບ.

ຜົນຄະນະກໍາລັງປະກອບສ່ວນຈະຖືກໂຄດຈຳນວນ 50 ຄັ້ງຕໍ່ວິນາທີ ແລະ ກວດລ້າງ 50 ຄັ້ງຕໍ່ວິນາທີ:

ຄວາມນິຍົມ

var myGameArea = {
  canvas : document.createElement("canvas"),
  start : function() {
    this.canvas.width = 480;
    this.canvas.height = 270;
    this.context = this.canvas.getContext("2d");
    document.body.insertBefore(this.canvas, document.body.childNodes[0]);
    this.interval = setInterval(updateGameArea, 20);
  },
  clear : function() {
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  }
}
function component(width, height, color, x, y) {
  this.width = width;
  this.height = height;
  this.x = x;
  this.y = y;
  this.update = function(){
    ctx = myGameArea.context;
    ctx.fillStyle = color;
    ctx.fillRect(this.x, this.y, this.width, this.height);
  }
}
function updateGameArea() {
  myGameArea.clear();
  myGamePiece.update();
}

ການທົດລອງຄັດນີ້

ສະແດງຄວາມສະໜາມຂອງມັນ

ເພື່ອສະແດງວ່າກາງສີແດງຖືກໂຄດຈຳນວນ 50 ຄັ້ງຕໍ່ວິນາທີ, ພວກເຮົາຈະປ່ຽນຕຳແໜ່ງ x (ພາຍໃນ) ໜຶ່ງພັນກຳນວນໃນແຕ່ລະການປັບປຸງເຂດເກມ:

ຄວາມນິຍົມ

function updateGameArea() {
  myGameArea.clear();
  myGamePiece.x += 1;
  myGamePiece.update();
}

ການທົດລອງຄັດນີ້

ເປັນຫຍັງຈະການກວດລ້າງເຂດເກມ?

ບໍ່ມີຄວາມຈໍາເປັນທີ່ຈະການກວດລ້າງເຂດເກມໃນແຕ່ລະການປັບປຸງ. ແຕ່ວ່າພວກເຮົາຫາກ clear() ກົນລະບຽບຂອງປະກອບສ່ວນທຸກທີ່ມີການເຄື່ອນຍ້າຍຈະຖືກດຳເນີນຕາມຕຳແໜ່ງທີ່ຕິດຕາມພາຍໃນວິນາທີສຸດທ້າຍຂອງພວກມັນ:

ຄວາມນິຍົມ

function updateGameArea() {
  // myGameArea.clear();
  myGamePiece.x += 1;
  myGamePiece.update();
}

ການທົດລອງຄັດນີ້

ປ່ຽນຂວາງແວງ

ທ່ານສາມາດຄວບຄຸມຂວາງແວງຂອງອັນສະພາບ:

ຄວາມນິຍົມ

ສ້າງຕົວຊີວິດບານຂອງຄວາມນິຍົມ 10x140 ປີຕາຫຼາຍ:

function startGame() {
  myGameArea.start();
  myGamePiece = new component(140, 10, "red", 10, 120);
}

ການທົດລອງຄັດນີ້

ປ່ຽນສີ

ທ່ານສາມາດຄວບຄຸມສີອັນສະພາບ:

ຄວາມນິຍົມ

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

ການທົດລອງຄັດນີ້

ທ່ານສາມາດໃຊ້ຄຳສະໝັກສີອື່ນໆ, ເຊິ່ງແມ່ນຮູບແບບສີຫຼາຍ:

ຄວາມນິຍົມ

function startGame() {
  myGameArea.start();
  myGamePiece = new component(30, 30, "rgba(0, 0, 255, 0.5)", 10, 120);
}

ການທົດລອງຄັດນີ້

ປ່ຽນຕັ້ງການ

ພວກເຮົາໃຊ້ x ແລະ y ການສະໝັກເພື່ອບໍລິໂພກອັນສະພາບໃນພື້ນຫຼິ້ນເກມ.

ຄຳສະໝັກຂອງຊັ້ນສີຂຽວປະຕູຫຼັງຈາກ (0,0).

ກວດຄຳສະແດງຄຳໃນພື້ນຫຼິ້ນເກມດ້ານຊ້າຍຂອງມັນແລ້ວສາມາດເຫັນ x ແລະ y ການສະໝັກ:

ທ່ານສາມາດຕິດຕັ້ງອັນສະພາບໃນທີ່ທີ່ຫຼາຍໃນພື້ນຫຼິ້ນເກມ:

ຄວາມນິຍົມ

function startGame() {
  myGameArea.start();
  myGamePiece = new component(30, 30, "red", 2, 2);
}

ການທົດລອງຄັດນີ້

ອັນສະພາບຈຳນວນຫຼາຍ

ທ່ານສາມາດຕິດຕັ້ງອັນສະພາບຈຳນວນຫຼາຍໃນຂອງພື້ນຫຼິ້ນເກມ:

ຄວາມນິຍົມ

var redGamePiece, blueGamePiece, yellowGamePiece;
function startGame() {
  redGamePiece = new component(75, 75, "red", 10, 10);
  yellowGamePiece = new component(75, 75, "yellow", 50, 60);
  blueGamePiece = new component(75, 75, "blue", 10, 110);
  myGameArea.start();
}
function updateGameArea() {
  myGameArea.clear();
  redGamePiece.update();
  yellowGamePiece.update();
  blueGamePiece.update();
}

ການທົດລອງຄັດນີ້

ສະແດງສາມອັນສະພາບການເຄື່ອນໄຫວ

ສະແດງສາມອັນສະພາບການເຄື່ອນໄຫວໃນທາງທີ່ຫຼາກຫຼາຍ:

ຄວາມນິຍົມ

function updateGameArea() {
  myGameArea.clear();
  redGamePiece.x += 1;
  yellowGamePiece.x += 1;
  yellowGamePiece.y += 1;
  blueGamePiece.x += 1;
  blueGamePiece.y -= 1;
  redGamePiece.update();
  yellowGamePiece.update();
  blueGamePiece.update();
}

ການທົດລອງຄັດນີ້