Spielhindernisse
Drücke die Knöpfe, um das rote Quadrat zu bewegen:
Fügen Sie einige Hindernisse hinzu
Jetzt wollen wir unserem Spiel einige Hindernisse hinzufügen.
Fügen Sie dem Spielbereich eine neue Komponente hinzu. Machen Sie es grün, 10 Pixel breit, 200 Pixel hoch, und platzieren Sie es 300 Pixel nach rechts und 120 Pixel nach unten.
Aktualisieren Sie auch die Hinderniskomponente in jedem Frame:
Beispiel
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();
}
Triff das Hindernis = Game Over
Im obigen Beispiel passiert nichts, wenn Sie auf das Hindernis treffen. In einem Spiel ist das nicht sehr befriedigend.
Woher wissen wir, ob unser rotes Quadrat auf das Hindernis trifft?
Erstellen Sie im Komponentenkonstruktor eine neue Methode, die prüft, ob die Komponente mit einer anderen Komponente abstürzt. Diese Methode sollte jedes Mal aufgerufen werden, wenn die Frames 50 Mal pro Sekunde aktualisiert werden.
Fügen Sie dem Objekt auch eine stop()Methode hinzu myGameArea, die das 20-Millisekunden-Intervall löscht.
Beispiel
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();
}
}
Bewegliches Hindernis
Das Hindernis ist ungefährlich, wenn es statisch ist, also wollen wir, dass es sich bewegt.
Ändern Sie den Eigenschaftswert von myObstacle.xbei jedem Update:
Beispiel
function updateGameArea() {
if (myGamePiece.crashWith(myObstacle)) {
myGameArea.stop();
} else {
myGameArea.clear();
myObstacle.x += -1;
myObstacle.update();
myGamePiece.newPos();
myGamePiece.update();
}
}
Mehrere Hindernisse
Wie wäre es, mehrere Hindernisse hinzuzufügen?
Dafür brauchen wir eine Eigenschaft zum Zählen von Frames und eine Methode, um etwas mit einer bestimmten Framerate auszuführen.
Beispiel
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;
}
Die Funktion everyinterval gibt true zurück, wenn die aktuelle Framenummer dem angegebenen Intervall entspricht.
Um mehrere Hindernisse zu definieren, deklarieren Sie zunächst die Hindernisvariable als Array.
Zweitens müssen wir einige Änderungen an der updateGameArea-Funktion vornehmen.
Beispiel
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();
}
In der updateGameAreaFunktion müssen wir jedes Hindernis durchschleifen, um zu sehen, ob es einen Absturz gibt. Bei einem Absturz updateGameAreastoppt die Funktion und es wird nicht mehr gezeichnet.
Die updateGameAreaFunktion zählt Frames und fügt für jeden 150. Frame ein Hindernis hinzu.
Hindernisse von zufälliger Größe
Um das Spiel etwas schwieriger und unterhaltsamer zu machen, werden wir Hindernisse in zufälliger Größe einschicken, sodass sich das rote Quadrat auf und ab bewegen muss, um nicht abzustürzen.
Beispiel
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();
}