O‘yin komponentlari
O‘yin maydoniga qizil kvadrat qo‘shing:
Komponent qo‘shish
O‘yin maydoniga komponentlar qo‘shish imkonini beruvchi komponent konstruktorini yarating.
Obyekt konstruktori
component deb ataladi va biz myGamePiece deb nomlangan birinchi komponentimizni yaratamiz:
Misol
var myGamePiece;
function startGame() {
myGameArea.start();
myGamePiece = new component(30, 30, "red", 10, 120);
}
function component(width, height, color, x, y) {
this.width = width;
this.height = height;
this.x = x;
this.y = y;
ctx = myGameArea.context;
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
Komponentlar o‘zining tashqi ko‘rinishi va harakatlarini boshqarish uchun xususiyat va metodlarga ega.
Kadrlar
O‘yinni harakatga tayyorlash uchun ekranni soniyasiga 50 marta yangilaymiz — bu filmdagi kadrlarga juda o‘xshaydi.
Avval updateGameArea() deb nomlangan yangi funksiya yarating.
myGameArea obyektiga updateGameArea() funksiyasini har 20 millisekundda (soniyasiga 50 marta) ishga tushiradigan interval qo‘shing. Shuningdek, butun canvas’ni tozalaydigan clear() deb nomlangan funksiyani ham qo‘shing.
component konstruktoriga komponentni chizish bilan shug‘ullanadigan
update() deb nomlangan funksiyani qo‘shing.
updateGameArea() funksiyasi clear() va update() metodlarini chaqiradi.
Natijada komponent soniyasiga 50 marta chiziladi va tozalanadi:
Misol
var myGameArea = {
canvas : document.createElement("canvas"),
start : function() {
this.canvas.width = 480;
this.canvas.height = 270;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
this.interval = setInterval(updateGameArea, 20);
},
clear : function() {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}
function component(width, height, color, x, y) {
this.width = width;
this.height = height;
this.x = x;
this.y = y;
this.update = function(){
ctx = myGameArea.context;
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
function updateGameArea() {
myGameArea.clear();
myGamePiece.update();
}
O‘zingiz sinab ko‘ring »
Uni harakatlantirish
Qizil kvadrat soniyasiga 50 marta chizilayotganini isbotlash uchun o‘yin maydonini har safar yangilaganimizda x pozitsiyasini (gorizontal) bir pikselga o‘zgartiramiz:
Misol
function updateGameArea() {
myGameArea.clear();
myGamePiece.x += 1;
myGamePiece.update();
}
O‘zingiz sinab ko‘ring »
Nega o‘yin maydonini tozalash kerak?
Har bir yangilanishda o‘yin maydonini tozalash ortiqchadek tuyulishi mumkin. Biroq clear() metodini tushirib qoldirsak, komponentning har bir harakati uning oldingi kadrda qayerda turganini ko‘rsatuvchi iz qoldiradi:
Misol
function updateGameArea() {
// myGameArea.clear();
myGamePiece.x += 1;
myGamePiece.update();
}
O‘zingiz sinab ko‘ring »
O‘lchamni o‘zgartirish
Komponentning kengligi va balandligini boshqarishingiz mumkin:
Misol
10x140 piksel o‘lchamli to‘rtburchak yarating:
function startGame() {
myGameArea.start();
myGamePiece = new component(140, 10, "red", 10, 120);
}
O‘zingiz sinab ko‘ring »
Rangni o‘zgartirish
Komponentning rangini boshqarishingiz mumkin:
Misol
function startGame() {
myGameArea.start();
myGamePiece = new component(30, 30, "blue", 10, 120);
}
O‘zingiz sinab ko‘ring »
Shuningdek, hex, rgb yoki rgba kabi boshqa rang qiymatlaridan ham foydalanishingiz mumkin:
Misol
function startGame() {
myGameArea.start();
myGamePiece = new component(30, 30, "rgba(0, 0, 255, 0.5)", 10, 120);
}
O‘zingiz sinab ko‘ring »
Pozitsiyani o‘zgartirish
Komponentlarni o‘yin maydoniga joylashtirish uchun x va y koordinatalaridan foydalanamiz.
Canvas’ning yuqori chap burchagi (0,0) koordinatalariga ega
x va y koordinatalarini ko‘rish uchun sichqonchani quyidagi o‘yin maydoni ustiga olib boring:
Komponentlarni o‘yin maydonining istalgan joyiga joylashtirishingiz mumkin:
Misol
function startGame() {
myGameArea.start();
myGamePiece = new component(30, 30, "red", 2, 2);
}
O‘zingiz sinab ko‘ring »
Ko‘p komponentlar
O‘yin maydoniga xohlagancha komponent qo‘yishingiz mumkin:
Misol
var redGamePiece, blueGamePiece, yellowGamePiece;
function startGame() {
redGamePiece = new component(75, 75, "red", 10, 10);
yellowGamePiece = new component(75, 75, "yellow", 50, 60);
blueGamePiece = new component(75, 75, "blue", 10, 110);
myGameArea.start();
}
function updateGameArea() {
myGameArea.clear();
redGamePiece.update();
yellowGamePiece.update();
blueGamePiece.update();
}
O‘zingiz sinab ko‘ring »
Harakatlanuvchi komponentlar
Uchala komponentni turli yo‘nalishlarda harakatlantiring:
Misol
function updateGameArea() {
myGameArea.clear();
redGamePiece.x += 1;
yellowGamePiece.x += 1;
yellowGamePiece.y += 1;
blueGamePiece.x += 1;
blueGamePiece.y -= 1;
redGamePiece.update();
yellowGamePiece.update();
blueGamePiece.update();
}
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!