กดปุ่มเพื่อย้ายไปยิ้มไปนี้:
วิธีการใช้ภาพ?
การเพิ่มภาพบนผืนผ้าใบที่ getContext("2d") วัตถุมีในตัวคุณสมบัติของภาพและวิธีการ
ในเกมของเราเพื่อสร้าง gamepiece เป็นภาพให้ใช้ตัวสร้างองค์ประกอบ แต่แทนที่จะหมายถึงสีที่คุณต้องดูที่ URL ของภาพ และคุณจะต้องบอกว่าสร้างส่วนนี้เป็นประเภท "image" :
ตัวอย่าง
function class="notranslate">startGame() {
myGamePiece = new component(30, 30, "smiley.gif" ,
10, 120, "image" );
myGameArea.start();
}
ในตัวสร้างองค์ประกอบที่เราทดสอบว่าองค์ประกอบเป็นประเภท "image" และสร้างวัตถุภาพโดยใช้ในตัว "ใหม่ 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 = class="notranslate">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 class="notranslate">clearmove() {
myGamePiece.image.src = "smiley.gif";
myGamePiece.speedX = 0;
myGamePiece.speedY = 0;
}
ลองตัวเอง» ภาพพื้นหลัง
เพิ่มภาพพื้นหลังไปยังพื้นที่เกมของคุณโดยเพิ่มเป็นส่วนประกอบและยังปรับปรุงพื้นหลังในทุกกรอบ:
ตัวอย่าง
var myGamePiece;
var myBackground;
function
class="notranslate">startGame() {
myGamePiece = new component(30, 30,
class="notranslate">"smiley.gif" , 10, 120, "image");
myBackground
= new component(656, 270, class="notranslate">"citymarket.jpg" , 0, 0, "image");
myGameArea.start();
}
function class="notranslate">updateGameArea() {
myGameArea.clear();
myBackground.newPos();
myBackground.update();
myGamePiece.newPos();
myGamePiece.update();
}
ลองตัวเอง» พื้นหลังย้าย
เปลี่ยนองค์ประกอบพื้นหลังของ speedX
คุณสมบัติที่จะให้ย้ายพื้นหลัง:
ตัวอย่าง
function class="notranslate">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 = class="notranslate">function() {
ctx
= myGameArea.context;
if (type
== class="notranslate">"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 = class="notranslate">function() {
this.x += this.speedX;
this.y
+= this.speedY;
if
(this.type == "background") {
if (this.x == -(this.width)) {
this.x = 0;
}
}
}
}
ลองตัวเอง»