Herní překážky
Stisknutím tlačítek přesunete červený čtverec:
Přidejte nějaké překážky
Nyní chceme do naší hry přidat nějaké překážky.
Přidejte do herní oblasti novou součást. Udělejte to zelené, 10px na šířku, 200px na výšku a umístěte ho 300px doprava a 120px dolů.
Aktualizujte také překážkovou komponentu v každém snímku:
Příklad
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();
}
Hit The Obstacle = Game Over
Ve výše uvedeném příkladu se při nárazu na překážku nic nestane. Ve hře to není příliš uspokojivé.
Jak poznáme, že náš červený čtverec narazí na překážku?
Vytvořte novou metodu v konstruktoru komponenty, která zkontroluje, zda komponenta nepadne s jinou komponentou. Tato metoda by měla být volána pokaždé, když se snímky aktualizují, 50krát za sekundu.
Do objektu také přidejte stop()metodu myGameArea, která vymaže interval 20 milisekund.
Příklad
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();
}
}
Pohybující se překážka
Překážka nepředstavuje žádné nebezpečí, když je statická, takže chceme, aby se pohybovala.
Změňte hodnotu vlastnosti myObstacle.xpři každé aktualizaci:
Příklad
function updateGameArea() {
if (myGamePiece.crashWith(myObstacle)) {
myGameArea.stop();
} else {
myGameArea.clear();
myObstacle.x += -1;
myObstacle.update();
myGamePiece.newPos();
myGamePiece.update();
}
}
Více překážek
Co takhle přidat více překážek?
K tomu potřebujeme vlastnost pro počítání snímků a metodu pro provádění něčeho při dané snímkové frekvenci.
Příklad
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;
}
Funkce everyinterval vrátí hodnotu true, pokud aktuální číslo snímku odpovídá danému intervalu.
Chcete-li definovat více překážek, nejprve deklarujte proměnnou překážka jako pole.
Za druhé, musíme provést nějaké změny ve funkci updateGameArea.
Příklad
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();
}
Ve updateGameAreafunkci musíme projít každou překážkou, abychom zjistili, zda nedošlo k havárii. Pokud dojde k havárii, updateGameAreafunkce se zastaví a žádné další kreslení se neprovádí.
Funkce updateGameAreapočítá snímky a přidává překážku za každý 150. snímek.
Překážky náhodné velikosti
Aby byla hra o něco obtížnější a zábavnější, budeme do ní posílat překážky náhodných velikostí, takže červený čtverec se musí pohybovat nahoru a dolů, aby nespadl.
Příklad
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();
}