Gambar Permainan
Tekan tombol untuk memindahkan smiley:
Bagaimana Menggunakan Gambar?
Untuk menambahkan gambar pada kanvas, objek getContext("2d") memiliki properti dan metode gambar bawaan.
Dalam game kami, untuk membuat gamepiece sebagai gambar, gunakan konstruktor komponen, tetapi alih-alih merujuk ke warna, Anda harus merujuk ke url gambar. Dan Anda harus memberi tahu konstruktor bahwa komponen ini bertipe "gambar":
Contoh
function startGame() {
myGamePiece = new component(30, 30, "smiley.gif", 10, 120, "image");
myGameArea.start();
}
Dalam konstruktor komponen kami menguji apakah komponen bertipe "gambar", dan membuat objek gambar dengan menggunakan konstruktor objek "Gambar baru()" bawaan. Saat kami siap menggambar gambar, kami menggunakan metode drawImage alih-alih metode fillRect:
Contoh
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);
}
}
}
Ubah Gambar
Anda dapat mengubah gambar kapan pun Anda mau dengan mengubah srcproperti imageobjek komponen Anda.
Jika Anda ingin mengubah smiley setiap kali bergerak, ubah sumber gambar saat pengguna mengklik tombol, dan kembali normal saat tombol tidak diklik:
Contoh
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;
}
Gambar Latar Belakang
Tambahkan gambar latar belakang ke area permainan Anda dengan menambahkannya sebagai komponen, dan juga perbarui latar belakang di setiap bingkai:
Contoh
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();
}
Latar Belakang Bergerak
Ubah properti komponen latar belakang speedXuntuk membuat latar belakang bergerak:
Contoh
function updateGameArea() {
myGameArea.clear();
myBackground.speedX = -1;
myBackground.newPos();
myBackground.update();
myGamePiece.newPos();
myGamePiece.update();
}
Lingkaran Latar Belakang
Untuk membuat loop latar belakang yang sama selamanya, kita harus menggunakan teknik tertentu.
Mulailah dengan memberi tahu konstruktor komponen bahwa ini adalah latar belakang . Konstruktor komponen kemudian akan menambahkan gambar dua kali, menempatkan gambar kedua segera setelah gambar pertama.
Pada newPos()metode cek apakah xposisi komponen sudah mencapai ujung gambar, jika sudah maka atur xposisi komponen ke 0 :
Contoh
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;
}
}
}
}