Menekan tombol untuk memindahkan smiley:
Cara Menggunakan Images?
Untuk menambahkan gambar pada kanvas, yang getContext("2d") objek telah built-in properti image dan metode.
Dalam permainan kami, untuk membuat gamepiece sebagai gambar, gunakan konstruktor komponen, tapi bukannya mengacu warna, Anda harus mengacu pada url gambar. Dan Anda harus memberitahu konstruktor bahwa komponen ini adalah tipe "image" :
Contoh
function startGame() {
myGamePiece = new component(30, 30, "smiley.gif" ,
10, 120, "image" );
myGameArea.start();
}Dalam konstruktor komponen kami menguji apakah komponen adalah tipe "image" , dan membuat objek gambar dengan menggunakan built-in "baru Image() " objek konstruktor. Ketika kami siap untuk menarik gambar, kita menggunakan metode drawImage bukan 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);
}
}
}
Cobalah sendiri " perubahan Images
Anda dapat mengubah gambar kapan pun Anda suka dengan mengubah src properti dari image objek dari komponen Anda.
Jika Anda ingin mengubah setiap tersenyum bergerak, mengubah sumber gambar ketika 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;
}
Cobalah sendiri " Gambar latar belakang
Menambahkan gambar latar belakang ke daerah permainan Anda dengan menambahkannya sebagai komponen, dan juga memperbarui latar belakang dalam setiap frame:
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();
}
Cobalah sendiri " bergerak Latar Belakang
Mengubah komponen latar belakang ini speedX properti untuk membuat latar belakang bergerak:
Contoh
function updateGameArea() {
myGameArea.clear();
myBackground.speedX = -1;
myBackground.newPos();
myBackground.update();
myGamePiece.newPos();
myGamePiece.update();
}
Cobalah sendiri " latar belakang loop
Untuk membuat lingkaran latar belakang yang sama selamanya, kita harus menggunakan teknik tertentu.
Mulailah dengan menceritakan konstruktor komponen bahwa ini adalah latar belakang. Komponen konstruktor kemudian akan menambahkan gambar dua kali, menempatkan gambar kedua segera setelah gambar pertama.
Dalam newPos() metode, memeriksa apakah x posisi komponen telah mencapai akhir dari gambar, jika memiliki, mengatur x posisi komponen untuk 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;
}
}
}
}
Cobalah sendiri "