รูปภาพเกม
กดปุ่มเพื่อย้ายสไมลี่:
วิธีการใช้รูปภาพ?
ในการเพิ่มรูปภาพบนผืนผ้าใบ ออบเจ็กต์ getContext("2d") มีคุณสมบัติและเมธอดของรูปภาพในตัว
ในเกมของเรา ในการสร้าง gamepiece เป็นรูปภาพ ให้ใช้ตัวสร้างส่วนประกอบ แต่แทนที่จะอ้างอิงถึงสี คุณต้องอ้างอิงถึง url ของรูปภาพ และคุณต้องบอกผู้สร้างว่าองค์ประกอบนี้เป็นประเภท "ภาพ":
ตัวอย่าง
function startGame() {
myGamePiece = new component(30, 30, "smiley.gif", 10, 120, "image");
myGameArea.start();
}
ในตัวสร้างองค์ประกอบ เราทดสอบว่าส่วนประกอบนั้นเป็นประเภท "รูปภาพ" หรือไม่ และสร้างวัตถุรูปภาพโดยใช้ตัวสร้างวัตถุ "ใหม่ Image()" ในตัว เมื่อเราพร้อมที่จะวาดภาพ เราใช้วิธี drawImage แทนวิธี fillRect:
ตัวอย่าง
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;
}
}
}
}