O‘yin rasmlari
Smaylikni harakatlantirish uchun tugmalarni bosing:
Rasmlardan qanday foydalaniladi?
Canvas’ga rasm qo‘shish uchun getContext("2d") obyektida o‘rnatilgan rasm xususiyatlari va metodlari mavjud.
O‘yinimizda o‘yin qahramonini (gamepiece) rasm sifatida yaratish uchun komponent konstruktoridan foydalaning, lekin rangga emas, rasmning url manziliga murojaat qilishingiz kerak. Shuningdek, konstruktorga bu komponent "image" turida ekanini bildirishingiz kerak:
Misol
function startGame() {
myGamePiece = new component(30, 30, "smiley.gif", 10, 120, "image");
myGameArea.start();
}
Komponent konstruktorida komponent "image" turida ekanini tekshiramiz va o‘rnatilgan "new Image()" obyekt konstruktori yordamida rasm obyektini yaratamiz. Rasmni chizishga tayyor bo‘lganimizda fillRect metodi o‘rniga drawImage metodidan foydalanamiz:
Misol
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);
}
}
}
O‘zingiz sinab ko‘ring »
Rasmlarni almashtirish
Komponentingizning image obyektidagi src xususiyatini o‘zgartirib, rasmni xohlagan paytda almashtirishingiz mumkin.
Agar smaylik har safar harakatlanganda o‘zgarishini xohlasangiz, foydalanuvchi tugmani bosganda rasm manbasini o‘zgartiring, tugma bosilmaganda esa uni odatdagi holatiga qaytaring:
Misol
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;
}
O‘zingiz sinab ko‘ring »
Fon rasmlari
O‘yin maydoningizga fon rasmini komponent sifatida qo‘shing va fonni ham har bir kadrda yangilang:
Misol
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();
}
O‘zingiz sinab ko‘ring »
Harakatlanuvchi fon
Fonni harakatlantirish uchun fon komponentining speedX xususiyatini o‘zgartiring:
Misol
function updateGameArea() {
myGameArea.clear();
myBackground.speedX = -1;
myBackground.newPos();
myBackground.update();
myGamePiece.newPos();
myGamePiece.update();
}
O‘zingiz sinab ko‘ring »
Takrorlanuvchi fon
Bir xil fonni cheksiz takrorlash uchun maxsus usuldan foydalanishimiz kerak.
Avval komponent konstruktoriga bu background (fon) ekanini bildiring. Shunda komponent konstruktori rasmni ikki marta qo‘shadi va ikkinchi rasmni birinchisidan darhol keyin joylashtiradi.
newPos() metodida komponentning x pozitsiyasi rasm oxiriga yetganini tekshiring; agar yetgan bo‘lsa, komponentning x pozitsiyasini 0 ga o‘rnating:
Misol
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;
}
}
}
}
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!