게임 구성 요소

게임 영역에 빨간 정육면체를 추가하세요:

컴포넌트 추가

컴포넌트 생성자를 생성하여, 컴포넌트를 게임 영역에 추가할 수 있게 합니다.

이 객체 생성자는구성 요소(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 객체에 간격을 추가하여 20밀리초마다 실행되도록 합니다 updateGameArea() 함수(초당 50 번)를 추가했습니다. 또한, 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);
}

직접 시도해보세요

기타 색상 값, 예를 들어 16진수, 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 좌표를 확인할 수 있습니다:

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();
}

직접 시도해보세요