게임 영역에 빨간색 사각형을 추가합니다 :
구성 요소 추가
당신이 gamearea에 구성 요소를 추가 할 수있는 구성 요소 생성자를 확인합니다.
객체의 생성자가 호출됩니다 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() .
에서 myGameArea 객체의 실행 간격 추가 updateGameArea() 함수마다 20 밀리 초 (50 times per second) . 또한라는 기능 추가 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 위치 변경됩니다 (horizontal) 하나의 픽셀 우리가 게임 영역을 업데이트 할 때마다 기준 :
예
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( 10 , 140 , "red" , 10, 120);
} »그것을 자신을 시도 색상 변경
사용자는 컴포넌트의 색상을 조절할 수있다 :
예
function startGame() {
myGameArea.start();
myGamePiece = new
component(30, 30, "blue" , 10, 120);
} »그것을 자신을 시도 또한 16 진수 RGB 또는 RGBA 같은 다른 colorvalues을 사용할 수 있습니다 :
예
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();
}
»그것을 자신을 시도