게임 회전

빨간 사각형이 회전할 수 있습니다:

회전 구성 요소

이 튜토리얼의 이전 부분에서, 빨간 사각형은 게임 영역에서 이동할 수 있지만 회전하거나 회전할 수 없었습니다.

구성 요소를 회전시키려면 그리는 방식을 변경해야 합니다.

캔버스 요소가 사용할 수 있는 유일한 회전 메서드는 전체 캔버스를 회전합니다:

캔버스에 그린 다른 모든 내용도 회전하며, 특정 구성 요소만 회전하지 않습니다.

이 때문에 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();
}

직접 시도해보세요