웃는을 이동하려면 버튼을 누르십시오 :
어떻게 이미지를 사용하는 방법?
캔버스에 이미지를 추가하려면 getContext("2d") 개체가 내장 된 이미지 프로퍼티와 메소드.
우리의 게임에서, 이미지로 gamepiece를 만들 구성 요소 생성자를 사용하지만, 대신 색상을 참조하여, 당신은 이미지의 URL을 참조해야합니다. 그리고 당신은이 구성 요소는 타입이다 생성자에게 신고하지 않으면 안된다 "image" :
예
function startGame() {
myGamePiece = new component(30, 30, "smiley.gif" ,
10, 120, "image" );
myGameArea.start();
}구성 요소 유형의 경우 구성 요소 생성자에서 우리는 테스트 "image" , 그리고 내장 된 "새로운 사용하여 이미지 객체를 생성 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;
}
}
}
}
»그것을 자신을 시도