O‘yin to‘siqlari
Qizil kvadratni harakatlantirish uchun tugmalarni bosing:
To‘siqlar qo‘shish
Endi o‘yinimizga bir nechta to‘siq qo‘shmoqchimiz.
O‘yin maydoniga yangi komponent qo‘shing. Uni yashil rangli, 10px kenglikda va 200px balandlikda qiling hamda 300px o‘ngga va 120px pastga joylashtiring.
To‘siq komponentini ham har bir kadrda yangilang:
Misol
var myGamePiece;
var myObstacle;
function startGame() {
myGamePiece = new component(30, 30, "red", 10, 120);
myObstacle = new component(10, 200, "green", 300, 120);
myGameArea.start();
}
function updateGameArea() {
myGameArea.clear();
myObstacle.update();
myGamePiece.newPos();
myGamePiece.update();
}
O‘zingiz sinab ko‘ring »
To‘siqqa urilish = o‘yin tugadi
Yuqoridagi misolda to‘siqqa urilganingizda hech narsa sodir bo‘lmaydi. O‘yin uchun bu unchalik qoniqarli emas.
Qizil kvadratimiz to‘siqqa urilganini qanday bilamiz?
Komponent konstruktorida komponent boshqa komponent bilan to‘qnashganini tekshiradigan yangi metod yarating. Bu metod kadrlar har safar yangilanganda, ya’ni soniyasiga 50 marta chaqirilishi kerak.
Shuningdek, myGameArea obyektiga 20 millisekundlik intervalni tozalaydigan stop() metodini qo‘shing.
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);
},
stop : function() {
clearInterval(this.interval);
}
}
function component(width, height, color, x, y) {
this.width = width;
this.height = height;
this.speedX = 0;
this.speedY = 0;
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);
}
this.newPos = function() {
this.x += this.speedX;
this.y += this.speedY;
}
this.crashWith = function(otherobj) {
var myleft = this.x;
var myright = this.x + (this.width);
var mytop = this.y;
var mybottom = this.y + (this.height);
var otherleft = otherobj.x;
var otherright = otherobj.x + (otherobj.width);
var othertop = otherobj.y;
var otherbottom = otherobj.y + (otherobj.height);
var crash = true;
if ((mybottom < othertop) ||
(mytop > otherbottom) ||
(myright < otherleft) ||
(myleft > otherright)) {
crash = false;
}
return crash;
}
}
function updateGameArea() {
if (myGamePiece.crashWith(myObstacle)) {
myGameArea.stop();
} else {
myGameArea.clear();
myObstacle.update();
myGamePiece.newPos();
myGamePiece.update();
}
}
O‘zingiz sinab ko‘ring »
Harakatlanuvchi to‘siq
To‘siq harakatsiz bo‘lsa, hech qanday xavf tug‘dirmaydi, shuning uchun uni harakatlantirmoqchimiz.
Har bir yangilanishda myObstacle.x xususiyati qiymatini o‘zgartiring:
Misol
function updateGameArea() {
if (myGamePiece.crashWith(myObstacle)) {
myGameArea.stop();
} else {
myGameArea.clear();
myObstacle.x += -1;
myObstacle.update();
myGamePiece.newPos();
myGamePiece.update();
}
}
O‘zingiz sinab ko‘ring »
Bir nechta to‘siq
Bir nechta to‘siq qo‘shsak-chi?
Buning uchun kadrlarni sanaydigan xususiyat va biror amalni berilgan kadr chastotasida bajaradigan metod kerak.
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.frameNo = 0;
this.interval = setInterval(updateGameArea, 20);
},
clear : function() {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
},
stop : function() {
clearInterval(this.interval);
}
}
function everyinterval(n) {
if ((myGameArea.frameNo / n) % 1 == 0) {return true;}
return false;
}
everyinterval funksiyasi joriy kadr raqami berilgan intervalga mos kelsa, true qaytaradi.
Bir nechta to‘siqni aniqlash uchun avval to‘siq o‘zgaruvchisini massiv sifatida e’lon qiling.
Ikkinchidan, updateGameArea funksiyasiga ba’zi o‘zgartirishlar kiritishimiz kerak.
Misol
var myGamePiece;
var myObstacles = [];
function updateGameArea() {
var x, y;
for (i = 0; i < myObstacles.length; i += 1) {
if (myGamePiece.crashWith(myObstacles[i])) {
myGameArea.stop();
return;
}
}
myGameArea.clear();
myGameArea.frameNo += 1;
if (myGameArea.frameNo == 1 || everyinterval(150)) {
x = myGameArea.canvas.width;
y = myGameArea.canvas.height - 200
myObstacles.push(new component(10, 200, "green", x, y));
}
for (i = 0; i < myObstacles.length; i += 1) {
myObstacles[i].x += -1;
myObstacles[i].update();
}
myGamePiece.newPos();
myGamePiece.update();
}
O‘zingiz sinab ko‘ring »
updateGameArea funksiyasida to‘qnashuv bor-yo‘qligini bilish uchun har bir to‘siqni sikl orqali aylanib chiqishimiz kerak. Agar to‘qnashuv bo‘lsa, updateGameArea funksiyasi to‘xtaydi va boshqa hech narsa chizilmaydi.
updateGameArea funksiyasi kadrlarni sanaydi va har 150-kadrda to‘siq qo‘shadi.
Tasodifiy o‘lchamdagi to‘siqlar
O‘yinni biroz qiyinroq va qiziqarliroq qilish uchun tasodifiy o‘lchamdagi to‘siqlarni yuboramiz, shunda qizil kvadrat to‘qnashmaslik uchun yuqoriga va pastga harakatlanishi kerak bo‘ladi.
Misol
function updateGameArea() {
var x, height, gap, minHeight, maxHeight, minGap, maxGap;
for (i = 0; i < myObstacles.length; i += 1) {
if (myGamePiece.crashWith(myObstacles[i])) {
myGameArea.stop();
return;
}
}
myGameArea.clear();
myGameArea.frameNo += 1;
if (myGameArea.frameNo == 1 || everyinterval(150)) {
x = myGameArea.canvas.width;
minHeight = 20;
maxHeight = 200;
height = Math.floor(Math.random()*(maxHeight-minHeight+1)+minHeight);
minGap = 50;
maxGap = 200;
gap = Math.floor(Math.random()*(maxGap-minGap+1)+minGap);
myObstacles.push(new component(10, height, "green", x, 0));
myObstacles.push(new component(10, x - height - gap, "green", x, height + gap));
}
for (i = 0; i < myObstacles.length; i += 1) {
myObstacles[i].x += -1;
myObstacles[i].update();
}
myGamePiece.newPos();
myGamePiece.update();
}
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!