게임 구성 요소
게임 영역에 빨간색 사각형을 추가합니다.
구성 요소 추가
게임 영역에 구성 요소를 추가할 수 있는 구성 요소 생성자를 만듭니다.
객체 생성자가 호출
component되고 다음과 같은 첫 번째 구성 요소를 만듭니다 myGamePiece.
예시
var myGamePiece;
function startGame() {
myGameArea.start();
myGamePiece = new component(30, 30, "red", 10, 120);
}
function component(width, height, color, x, y) {
this.width = width;
this.height = height;
this.x = x;
this.y = y;
ctx = myGameArea.context;
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
구성 요소에는 모양과 움직임을 제어하는 속성과 메서드가 있습니다.
프레임
게임을 실행할 준비가 되도록 하기 위해 초당 50번 디스플레이를 업데이트합니다. 이는 영화의 프레임과 매우 유사합니다.
먼저 이라는 새 함수를 만듭니다 updateGameArea().
개체 에서 20밀리초마다(초당 50회) 함수 myGameArea를 실행할 간격을 추가합니다 . 또한 전체 캔버스를 지우는 updateGameArea()이라는 함수를 추가합니다 .clear()
component생성자에서 라는 함수를 추가 하여
update()구성 요소의 그리기를 처리합니다.
updateGameArea()함수는 및 clear()메서드를 update()호출합니다.
그 결과 구성 요소가 초당 50번 그려지고 지워집니다.
예시
var myGameArea = {
canvas : document.createElement("canvas"),
start : function() {
this.canvas.width = 480;
this.canvas.height = 270;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
this.interval = setInterval(updateGameArea, 20);
},
clear : function() {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}
function component(width, height, color, x, y) {
this.width = width;
this.height = height;
this.x = x;
this.y = y;
this.update = function(){
ctx = myGameArea.context;
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
function updateGameArea() {
myGameArea.clear();
myGamePiece.update();
}
이동
빨간색 사각형이 초당 50번 그려지고 있음을 증명하기 위해 게임 영역을 업데이트할 때마다 x 위치(가로)를 1픽셀씩 변경합니다.
예시
function updateGameArea() {
myGameArea.clear();
myGamePiece.x += 1;
myGamePiece.update();
}
게임 영역을 지우는 이유는 무엇입니까?
업데이트할 때마다 게임 영역을 지우는 것은 불필요해 보일 수 있습니다. 그러나
clear()메서드를 생략하면 구성 요소의 모든 이동은 마지막 프레임에 위치했던 위치의 흔적을 남깁니다.
예시
function updateGameArea() {
// myGameArea.clear();
myGamePiece.x += 1;
myGamePiece.update();
}
크기 변경
구성 요소의 너비와 높이를 제어할 수 있습니다.
예시
10x140픽셀 직사각형 만들기:
function startGame() {
myGameArea.start();
myGamePiece = new component(140, 10, "red", 10, 120);
}
색상 변경
구성 요소의 색상을 제어할 수 있습니다.
예시
function startGame() {
myGameArea.start();
myGamePiece = new component(30, 30, "blue", 10, 120);
}
hex, rgb 또는 rgba와 같은 다른 색상 값을 사용할 수도 있습니다.
예시
function startGame() {
myGameArea.start();
myGamePiece = new component(30, 30, "rgba(0, 0, 255, 0.5)", 10, 120);
}
위치 변경
우리는 x 및 y 좌표를 사용하여 구성 요소를 게임 영역에 배치합니다.
캔버스의 왼쪽 상단 모서리에는 좌표가 (0,0) 있습니다.
x 및 y 좌표를 보려면 아래 게임 영역 위로 마우스를 가져갑니다.
게임 영역에서 원하는 위치에 구성 요소를 배치할 수 있습니다.
예시
function startGame() {
myGameArea.start();
myGamePiece = new component(30, 30, "red", 2, 2);
}
많은 구성 요소
게임 영역에 원하는 만큼 구성 요소를 배치할 수 있습니다.
예시
var redGamePiece, blueGamePiece, yellowGamePiece;
function startGame() {
redGamePiece = new component(75, 75, "red", 10, 10);
yellowGamePiece = new component(75, 75, "yellow", 50, 60);
blueGamePiece = new component(75, 75, "blue", 10, 110);
myGameArea.start();
}
function updateGameArea() {
myGameArea.clear();
redGamePiece.update();
yellowGamePiece.update();
blueGamePiece.update();
}
부품 이동
세 가지 구성 요소를 모두 다른 방향으로 이동합니다.
예시
function updateGameArea() {
myGameArea.clear();
redGamePiece.x += 1;
yellowGamePiece.x += 1;
yellowGamePiece.y += 1;
blueGamePiece.x += 1;
blueGamePiece.y -= 1;
redGamePiece.update();
yellowGamePiece.update();
blueGamePiece.update();
}