도면의 구성 요소의 새로운 방법으로, 게임 회전 장에서 설명, 움직임이 더 유연합니다.
어떻게 객체를 이동하는 방법?
추가 speed 받는 속성을 component 구성 요소의 현재 속도를 나타냅니다 생성자.
또한 일부 변경하게 newPos() 에 기초하여 구성 요소의 위치를 계산하는 방법 speed 및 angle .
기본적으로 구성 요소가 위를 향하도록하고, 1 속도 속성을 설정하여, 구성 요소가 전진하기 시작합니다.
예
function component(width, height, color, x, y) {
this.gamearea = gamearea;
this.width = width;
this.height = height;
this.angle = 0;
this.speed = 1;
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();
}
this.newPos = function() {
this.x += this.speed * Math.sin(this.angle);
this.y -= this.speed * Math.cos(this.angle);
}
}
»그것을 자신을 시도 턴 만들기
우리는 또한 좌우 회전을 할 수 있어야합니다. 라는 새 속성 확인 moveAngle 현재 이동 값 또는 회전 각도를 나타냅니다. 에서 newPos() 방법 계산 angle 에 기초 moveAngle 속성을 :
예
1로 moveangle 속성을 설정하고 어떻게되는지 :
function component(width, height, color, x, y) {
this.width = width;
this.height = height;
this.angle = 0;
this.moveAngle = 1;
this.speed = 1;
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();
}
this.newPos = function() {
this.angle += this.moveAngle * Math.PI / 180;
this.x += this.speed * Math.sin(this.angle);
this.y -= this.speed * Math.cos(this.angle);
}
}
»그것을 자신을 시도 키보드를 사용하여
키보드를 사용할 때 어떻게 빨간색 사각형 이동 하는가? 대신 좌우하고, 측면에서 아래 위로 이동하는, 붉은 광장 당신이 사용할 때 전진 "up" 화살표, 왼쪽 및 오른쪽 화살표를 누르면 왼쪽과 오른쪽집니다.