ตารางสีแดงสามารถหมุน:
ส่วนประกอบที่หมุน
ก่อนหน้านี้ในการกวดวิชานี้ตารางสีแดงก็สามารถที่จะย้ายไปรอบ ๆ บน gamearea แต่มันไม่สามารถเปิดหรือหมุน
เพื่อหมุนชิ้นส่วนที่เราต้องเปลี่ยนวิธีที่เราวาดส่วนประกอบ
วิธีการหมุนเฉพาะสำหรับองค์ประกอบผ้าใบจะหมุนผ้าใบทั้งหมด:
ทุกสิ่งทุกอย่างที่คุณวาดบนผืนผ้าใบก็จะถูกหมุนไม่ได้เป็นเพียงองค์ประกอบที่เฉพาะเจาะจง
นั่นคือเหตุผลที่เราจะต้องทำให้การเปลี่ยนแปลงบางอย่างใน update() วิธีการ:
ครั้งแรกที่เราบันทึกวัตถุบริบทผ้าใบปัจจุบัน:
ctx.save();
แล้วเราย้ายผ้าใบทั้งหมดไปยังศูนย์กลางขององค์ประกอบที่เฉพาะเจาะจงโดยใช้วิธีการแปล:
ctx.translate(x, y);
แล้วเราจะดำเนินการหมุนที่ต้องการใช้ rotate() วิธีการ:
ctx.rotate( angle );
ตอนนี้เราพร้อมที่จะวาดองค์ประกอบบนผ้าใบ แต่ตอนนี้เราจะวาดมันด้วยมันเป็นตำแหน่งกลางที่ตำแหน่ง 0,0 ในการแปล (and rotated) ผ้าใบ:
ctx.fillRect(width / -2, height / -2, width, height);
เมื่อเราเสร็จแล้วเราจะต้องเรียกคืนวัตถุบริบทกลับไปยังตำแหน่งที่บันทึกไว้โดยใช้วิธีการที่เรียกคืน:
ctx.restore();
องค์ประกอบที่เป็นสิ่งเดียวที่จะหมุน:
ชิ้นส่วนสร้าง
component คอนสตรัคมี propery ใหม่ที่เรียกว่า 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();
}
ลองตัวเอง»