Wciśnij przyciski, aby przesunąć czerwony kwadrat:
Dodaj pewne przeszkody
Teraz chcemy, aby dodać przeszkód som do naszej gry.
Dodaj nowy komponent do obszaru gry. Zrób to zielony, 10px szerokości, 200px wysokości i umieść go 300px w prawo i 120 pikseli w dół.
Również zaktualizować komponent przeszkodą w każdej ramce:
Przykład
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();
}
Spróbuj sam " Hit przeszkoda = Game Over
W powyższym przykładzie, nic się nie dzieje, gdy trafisz na przeszkodę. W grze, która nie jest bardzo satysfakcjonujące.
Skąd wiemy, czy nasz czerwony kwadrat natrafieniu na przeszkodę?
Utwórz nową metodę w konstruktora komponentów, które chekcs jeżeli składnik wypadków z innym składnikiem. Ta metoda powinna być wywoływana za każdym razem aktualizacje klatek, 50 razy na sekundę.
Również dodać stop() metodę do myGameArea obiektu, który podaje przedział 20 milisekund.
Przykład
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();
}
} Spróbuj sam " Przenoszenie Przeszkoda
Przeszkodą nie ma niebezpieczeństwa, gdy jest statyczna, więc chcemy się poruszać.
Zmień wartość właściwości myObstacle.x przy każdej aktualizacji:
Przykład
function updateGameArea() {
if
(myGamePiece.crashWith(myObstacle)) {
myGameArea.stop();
} else {
myGameArea.clear();
myObstacle.x += -1;
myObstacle.update();
myGamePiece.newPos();
myGamePiece.update();
}
} Spróbuj sam " Wiele Przeszkody
Jak o dodanie wielu przeszkód?
Do tego potrzebna jest właściwość do zliczania ramek, oraz sposobu wykonania czegoś w danej liczby klatek na sekundę.
Przykład
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;
} Funkcja everyinterval zwraca true, jeśli bieżąca numerów klatek odpowiada danym przedziale.
Aby zdefiniować wiele przeszkód, najpierw zadeklarować zmienną przeszkód w postaci tablicy.
Po drugie, musimy wprowadzić pewne zmiany w funkcjonowaniu updateGameArea.
Przykład
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();
} Spróbuj sam " W updateGameArea funkcji musimy pętli każdej przeszkody, aby sprawdzić, czy jest awaria. Jeśli istnieje wypadku, updateGameArea funkcja stop, i nie więcej rysunek jest zrobione.
updateGameArea Funkcja zlicza ramki i dodaje przeszkodę dla każdego 150. ramce.
Przeszkody losowych Rozmiar
Aby uczynić grę nieco trudniejsze i zabawy, będziemy przesyłać przeszkód przypadkowych rozmiarach, dzięki czemu czerwony kwadrat musi poruszać się w górę iw dół, aby nie upaść.
Przykład
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();
} Spróbuj sam "