O‘yin hisobi
Qizil kvadratni harakatlantirish uchun tugmalarni bosing:
Hisobni sanash
O‘yinda hisobni yuritishning ko‘plab usullari bor; biz sizga hisobni canvas’ga qanday yozishni ko‘rsatamiz.
Avval hisob komponentini yarating:
Misol
var myGamePiece;
var myObstacles = [];
var myScore;
function startGame() {
myGamePiece = new component(30, 30, "red", 10, 160);
myScore = new component("30px", "Consolas", "black", 280, 40, "text");
myGameArea.start();
}
canvas elementiga matn yozish sintaksisi to‘rtburchak chizishdan farq qiladi. Shuning uchun komponent konstruktorini qo‘shimcha argument bilan chaqirib, konstruktorga bu komponent "text" turida ekanini bildirishimiz kerak.
Komponent konstruktorida komponent "text" turida ekanini tekshiramiz va fillRect metodi o‘rniga fillText metodidan foydalanamiz:
Misol
function component(width, height, color, x, y, type) {
this.type = type;
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 (this.type == "text") {
ctx.font = this.width + " " + this.height;
ctx.fillStyle = color;
ctx.fillText(this.text, this.x, this.y);
} else {
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
...
}
Nihoyat, updateGameArea funksiyasiga hisobni canvas’ga yozadigan kod qo‘shamiz. Hisobni sanash uchun frameNo xususiyatidan foydalanamiz:
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].speedX = -1;
myObstacles[i].newPos();
myObstacles[i].update();
}
myScore.text = "SCORE: " + myGameArea.frameNo;
myScore.update();
myGamePiece.newPos();
myGamePiece.update();
}
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!