Drücken Sie die Tasten auf das rote Quadrat zu bewegen:
Fügen Sie einige Hindernisse
Jetzt wollen wir som Hindernisse für unser Spiel hinzuzufügen.
Fügen Sie eine neue Komponente in den Spielbereich. Machen Sie es grün, 10px breit, 200 Pixel hoch, und legen Sie es 300px nach rechts und nach unten 120px.
Auch aktualisieren das Hindernis Komponente 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();
}
Versuch es selber " Hit The Obstacle = Game Over
In dem obigen Beispiel, geschieht nichts, wenn Sie das Hindernis treffen. In einem Spiel, das ist nicht sehr befriedigend.
Wie wissen wir, ob unser rotes Quadrat auf das Hindernis trifft?
Erstellen Sie eine neue Methode in der Komponentenbauer, dass chekcs wenn die Komponente Abstürze mit einer anderen Komponente. Diese Methode sollte jedes Mal die Rahmen-Updates, 50-mal pro Sekunde aufgerufen werden.
Auch ein Add stop() Methode zur myGameArea Objekt, das die 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();
}
} Versuch es selber " Verschieben Hindernis
Das Hindernis ist keine Gefahr, wenn sie statisch ist, so dass wir wollen, dass es zu bewegen.
Ändern Sie den Wert der Eigenschaft myObstacle.x bei jedem Update:
Beispiel
function updateGameArea() {
if
(myGamePiece.crashWith(myObstacle)) {
myGameArea.stop();
} else {
myGameArea.clear();
myObstacle.x += -1;
myObstacle.update();
myGamePiece.newPos();
myGamePiece.update();
}
} Versuch es selber " Mehrere Hindernisse
Wie wäre es mehrere Hindernisse Hinzufügen?
Dafür brauchen wir eine Eigenschaft zum Zählen Rahmen, und ein Verfahren für etwas zu einem bestimmten Frame-Rate 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 everyinterval Funktion gibt true zurück, wenn die aktuelle Framenummern mit dem angegebenen Intervall entspricht.
Um mehrere Hindernisse zu definieren, erklären zuerst das Hindernis Variable als Array.
Zweitens müssen wir einige Änderungen in der updateGameArea Funktion machen.
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();
} Versuch es selber " In der updateGameArea Funktion durch jedes Hindernis müssen wir Schleife , um zu sehen , ob es einen Absturz. Wenn es einen Absturz, der updateGameArea wird Stopp - Funktion, und nicht mehr Zeichnung erfolgt.
Die updateGameArea Funktion zählt Frames und fügt ein Hindernis für jeden 150. Rahmen.
Hindernisse von Random Größe
Um das Spiel ein bisschen schwieriger, und Spaß, wir Hindernisse von Zufallsgrößen senden wird, so dass das rote Quadrat bewegen muss und bis zu nicht abstü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();
} Versuch es selber "