게임 회전
빨간색 사각형은 다음과 같이 회전할 수 있습니다.
회전 부품
이 튜토리얼의 앞부분에서 빨간색 사각형은 게임 영역에서 이동할 수 있었지만 회전하거나 회전할 수는 없었습니다.
구성 요소를 회전하려면 구성 요소를 그리는 방식을 변경해야 합니다.
캔버스 요소에 사용할 수 있는 유일한 회전 방법은 전체 캔버스를 회전하는 것입니다.
특정 구성 요소뿐만 아니라 캔버스에 그리는 다른 모든 항목도 회전됩니다.
이것이 우리가 update()메소드를 약간 변경해야 하는 이유입니다:
먼저 현재 캔버스 컨텍스트 객체를 저장합니다.
ctx.save();
그런 다음 번역 방법을 사용하여 전체 캔버스를 특정 구성 요소의 중앙으로 이동합니다.
ctx.translate(x, y);
그런 다음 rotate() 메서드를 사용하여 원하는 회전을 수행합니다.
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();
}