게임 이미지

버튼을 누르면 웃는 얼굴이 이동합니다:






이미지를 어떻게 사용하나요?

화면에 이미지를 추가하려면 "2d" 객체의 내장 이미지 속성과 메서드를 사용합니다.

우리의 게임에서 이미지로 게임 조각을 생성하려면 구성 요소 생성자를 사용해야 하지만, 색상 대신 이미지의 url을 참조해야 합니다. 그리고 생성자에 구성 요소 유형이 "image" 이라고 알려야 합니다:

인스턴스

function startGame() {
  myGamePiece = new component(30, 30, "smiley.gif", 10, 120, "image");
  myGameArea.start();
}

구성 요소 생성자에서는 구성 요소가 "image" 유형인지 테스트하고, "new Image()" 객체 생성자 함수를 사용하여 이미지 객체를 생성합니다. 이미지를 그리기 준비할 때는 fillRect 메서드 대신 drawImage 메서드를 사용합니다:

인스턴스

function component(width, height, color, x, y, type) {
  this.type = type;
  if (type == "image") {}}
    this.image = new Image();
    this.image.src = color;
  }
  this.width = width;
  this.height = height;
  this.speedX = 0;
  this.speedY = 0;
  this.x = x;
  this.y = y;
  this.update = function() {
    ctx = myGameArea.context;
    if (type == "image") {}}
      ctx.drawImage(this.image,
        this.x,
        this.y,
        this.width, this.height);
    } else {
      ctx.fillStyle = color;
      ctx.fillRect(this.x, this.y, this.width, this.height);
    }
  }
}

직접 시도해 보세요

이미지를 변경할 수 있습니다

컴포넌트의 image 객체의 src 속성을 통해 이미지를 변경하십시오。

만약 각 이동마다笑脸을 변경하고 싶다면, 버튼 클릭 시 이미지 소스를 변경하고 클릭하지 않았을 때 정상으로 복구하십시오：

인스턴스

function move(dir) {
  myGamePiece.image.src = "angry.gif";
  if (dir == "up") {myGamePiece.speedY = -1; }
  if (dir == "down") {myGamePiece.speedY = 1; }
  if (dir == "left") {myGamePiece.speedX = -1; }
  if (dir == "right") {myGamePiece.speedX = 1; }
}
function clearmove() {
  myGamePiece.image.src = "smiley.gif";
  myGamePiece.speedX = 0;
  myGamePiece.speedY = 0;
}

직접 시도해 보세요

배경 이미지

배경 이미지를 컴포넌트로 추가하여 게임 영역에 추가하고 각 프레임에서 배경을 업데이트할 수 있습니다：

인스턴스

var myGamePiece;
var myBackground;
function startGame() {
  myGamePiece = new component(30, 30, "smiley.gif", 10, 120, "image");
  myBackground = new component(656, 270, "citymarket.jpg", 0, 0, "image");
  myGameArea.start();
}
function updateGameArea() {
  myGameArea.clear();
  myBackground.newPos();
  myBackground.update();
  myGamePiece.newPos();
  myGamePiece.update();
}

직접 시도해 보세요

배경을 이동하십시오

배경 컴포넌트의 speedX 속성을 통해 배경을 이동할 수 있습니다：

인스턴스

function updateGameArea() {
  myGameArea.clear();
  myBackground.speedX = -1;
  myBackground.newPos();
  myBackground.update();
  myGamePiece.newPos();
  myGamePiece.update();
}

직접 시도해 보세요

배경 반복

이 같은 배경이 영원히 반복되도록 하기 위해 특정 기술을 사용해야 합니다.

먼저 컴포넌트 생성자 함수에 이것이 배경임을 알립니다. 그런 다음, 컴포넌트 생성자 함수는 두 번 이미지를 추가하고, 두 번째 이미지를 즉시 첫 번째 이미지 뒤에 배치합니다.

에서 newPos() 메서드에서, 컴포넌트의 x 위치가 이미지의 끝에 도달했는지 확인합니다. 도달한 경우, 컴포넌트의 x 위치를 0으로 설정합니다:

인스턴스

function component(width, height, color, x, y, type) {
  this.type = type;
  if (type == "image" || type == "background") {
    this.image = new Image();
    this.image.src = color;
  }
  this.width = width;
  this.height = height;
  this.speedX = 0;
  this.speedY = 0;
  this.x = x;
  this.y = y;
  this.update = function() {
    ctx = myGameArea.context;
    if (type == "image" || type == "background") {
      ctx.drawImage(this.image, this.x, this.y, this.width, this.height);
      if (type == "background") {
        ctx.drawImage(this.image, this.x + this.width, this.y, this.width, this.height);
      }
    }
      ctx.fillStyle = color;
      ctx.fillRect(this.x, this.y, this.width, this.height);
    }
  }
  this.newPos = function() {
    this.x += this.speedX;
    this.y += this.speedY;
    if (this.type == "background") {
      if (this.x == -(this.width)) {
        this.x = 0;
      }
    }
  }
}

직접 시도해 보세요