การหมุนเกม
สี่เหลี่ยมสีแดงสามารถหมุนได้:
ส่วนประกอบที่หมุนได้
ก่อนหน้านี้ในบทช่วยสอนนี้ สี่เหลี่ยมสีแดงสามารถเคลื่อนที่ไปมาในพื้นที่เกมได้ แต่ไม่สามารถหมุนหรือหมุนได้
ในการหมุนส่วนประกอบ เราต้องเปลี่ยนวิธีการวาดส่วนประกอบ
วิธีการหมุนเดียวที่ใช้ได้สำหรับองค์ประกอบผืนผ้าใบจะหมุนผืนผ้าใบทั้งหมด:
ทุกสิ่งอื่นๆ ที่คุณวาดบนผืนผ้าใบจะหมุนด้วย ไม่ใช่เฉพาะองค์ประกอบเฉพาะเท่านั้น
นั่นคือเหตุผลที่เราต้องทำการเปลี่ยนแปลงupdate()วิธีการ:
อันดับแรก เราบันทึกอ็อบเจ็กต์บริบท canvas ปัจจุบัน:
ctx.save();
จากนั้นเราย้ายแคนวาสทั้งหมดไปที่กึ่งกลางของส่วนประกอบเฉพาะ โดยใช้วิธีการแปล:
ctx.translate(x, y);
จากนั้นเราดำเนินการหมุนที่ต้องการโดยใช้วิธีการหมุน () :
ctx.rotate(angle);
ตอนนี้เราพร้อมที่จะวาดส่วนประกอบลงบนผืนผ้าใบแล้ว แต่ตอนนี้เราจะวาดมันด้วยตำแหน่งกึ่งกลางที่ตำแหน่ง 0,0 บนผืนผ้าใบที่แปลแล้ว (และหมุน):
ctx.fillRect(width / -2, height / -2, width, height);
เมื่อเราเสร็จสิ้น เราต้องกู้คืนบริบทวัตถุกลับไปที่ตำแหน่งที่บันทึกไว้ โดยใช้วิธีการคืนค่า:
ctx.restore();
องค์ประกอบเป็นสิ่งเดียวที่หมุนได้:
ตัวสร้างส่วนประกอบ
ตัวcomponentสร้างมีคุณสมบัติใหม่ที่เรียกว่าangleซึ่งเป็นตัวเลขเรเดียนที่แสดงมุมของส่วนประกอบ
updateวิธีการของคอนcomponentสตรัคเตอร์คือการที่เราวาดส่วนประกอบ และที่นี่คุณสามารถเห็นการเปลี่ยนแปลงที่จะทำให้ส่วนประกอบสามารถหมุนได้:
ตัวอย่าง
function component(width, height, color, x, y) {
this.width = width;
this.height = height;
this.angle = 0;
this.x = x;
this.y = y;
this.update = function() {
ctx = myGameArea.context;
ctx.save();
ctx.translate(this.x, this.y);
ctx.rotate(this.angle);
ctx.fillStyle = color;
ctx.fillRect(this.width / -2, this.height / -2, this.width, this.height);
ctx.restore();
}
}
function updateGameArea() {
myGameArea.clear();
myGamePiece.angle += 1 * Math.PI / 180;
myGamePiece.update();
}