การหมุนในเกม

วงกลมแดงสามารถหมุนได้

หมุนส่วนประกอบ

ในส่วนของบทความก่อนหน้านี้ วงกลมแดงสามารถเคลื่อนที่ได้บนพื้นที่เกม แต่ไม่สามารถหมุนหรือหมุนได้

เพื่อหมุนส่วนประกอบ เราจำเป็นต้องเปลี่ยนวิธีการวาดส่วนประกอบ

วิธีการหมุนที่เป็นไปได้สำหรับประกอบแผงวาดคือการหมุนกระดานวาดทั้งหมด

ทุกสิ่งที่คุณวาดบนกระดานวาดจะหมุนตาม ไม่ได้เพียงส่วนประกอบเดียว

ที่ทำให้เราจำเป็นต้องใช้ update() วิธีนี้ทำการเปลี่ยนแปลงบางอย่าง

หลังจากนั้นเรากู้เอกสารภาพกระดานวาดปัจจุบัน

ctx.save();

หลังจากนั้นเราใช้วิธี translate ที่จะย้ายกระดานวาดทั้งหมดไปที่ศูนย์กลางของส่วนประกอบ

ctx.translate(x, y);

หลังจากนั้นเราใช้วิธี rotate() ที่ต้องการหมุน

ctx.rotate(angle);

ตอนนี้เราเตรียมวาดส่วนประกอบสู่กระดานวาด แต่ในครั้งนี้เราจะวาดตำแหน่งศูนย์กลางของส่วนประกอบบนตำแหน่ง 0,0 ที่กระดานวาดที่ถูกย้ายที่และหมุน

ctx.fillRect(width / -2, height / -2, width, height);

หลังจากที่เสร็จงานเราจำเป็นต้องใช้วิธี restore เพื่อกู้ตำแหน่งของเอกสารภาพต้นแบบ

ctx.restore();

ส่วนประกอบนี้เป็นสิ่งเดียวที่หมุนได้

ตัวก่อสร้างส่วนประกอบ

component มีชื่อ angle คุณสมบัติใหม่ของนักก่อสร้าง คือค่าที่แสดงที่ส่วนประกอบมีองศาหมุนเป็นหน่วยองศาทีแองเกล

component ของนักก่อสร้าง update วิธีการวาดส่วนประกอบคือตำแหน่งที่เราวาดส่วนประกอบ ในที่นี้คุณสามารถเห็นว่าส่วนประกอบสามารถหมุนได้

ตัวอย่าง

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

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