องค์ประกอบเกม

คำแนะนำคอร์ส

ในพื้นที่เกมเพิ่มกล่องสีแดง

เพิ่มองค์ประกอบ

นั่นคือฟังก์ชันสร้างตัวแปรของวัตถุ ซึ่งอนุญาตให้คุณเพิ่มองค์ประกอบไปยังพื้นที่เกม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 ฟังก์ชันที่รันทุกๆวินาที 50 ครั้ง). แล้วเพิ่มฟังก์ชันใหม่ชื่อ updateGameArea() clear clear() ฟังก์ชันที่ชื่อ

ใน component ภายในฟังก์ชันที่ชื่อ update() ฟังก์ชันที่ใช้ต่อการวาดเครื่องยนต์

updateGameArea() การเรียกใช้ฟังก์ชัน clear() และ update() วิธีการ

ผลลัพธ์คือเครื่องยนต์จะถูกวาดและล้างทุกๆวินาที 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);
}

ทดลองด้วยตัวเอง

คุณสามารถใช้ค่าสีอื่นๆ ด้วย อย่างเช่น หลักฐานทศนิยมสิบตำแหน่งหลังของระบบทศนิยมทศนิยมสิบตำแหน่งขึ้นหนึ่ง ระบบ RGB หรือ RGBa:

ตัวอย่าง

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

ทดลองด้วยตัวเอง