게임 이미지
버튼을 눌러 스마일리를 이동합니다.
이미지를 사용하는 방법?
캔버스에 이미지를 추가하기 위해 getContext("2d") 객체에는 이미지 속성과 메서드가 내장되어 있습니다.
우리 게임에서 게임피스를 이미지로 생성하려면 구성 요소 생성자를 사용하지만 색상을 참조하는 대신 이미지의 URL을 참조해야 합니다. 그리고 이 구성 요소가 "이미지" 유형임을 생성자에게 알려야 합니다.
예시
function startGame() {
myGamePiece = new component(30, 30, "smiley.gif", 10, 120, "image");
myGameArea.start();
}
구성 요소 생성자에서 구성 요소가 "이미지" 유형인지 테스트하고 내장된 "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);
}
}
}
이미지 변경
컴포넌트의 객체 src속성을 변경하여 언제든지 이미지를 변경할 수 있습니다 .image
스마일리가 움직일 때마다 변경하려면 사용자가 버튼을 클릭할 때 이미지 소스를 변경하고 버튼을 클릭하지 않을 때 다시 정상으로 돌아갑니다.
예시
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);
}
} else {
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;
}
}
}
}