Premere i pulsanti per spostare il quadrato rosso:
Aggiungere alcuni ostacoli
Ora vogliamo aggiungere ostacoli som al nostro gioco.
Aggiungere un nuovo componente per l'area di gioco. Rendere verde, 10px di larghezza, 200px alto, e posizionarlo 300px a destra e 120px verso il basso.
aggiorna anche la componente ostacolo in ogni fotogramma:
Esempio
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();
}
Prova tu stesso " Hit The Obstacle = Game Over
Nell'esempio di cui sopra, non succede nulla quando si colpisce l'ostacolo. In un gioco, che non è molto soddisfacente.
Come facciamo a sapere se il nostro quadrato rosso colpisce l'ostacolo?
Creare un nuovo metodo nel costruttore componente, che chekcs in caso di crash del componente con un altro componente. Questo metodo dovrebbe essere chiamato ogni volta gli aggiornamenti telai, 50 volte al secondo.
Anche aggiungere un stop() metodo al myGameArea oggetto, che cancella l'intervallo di 20 millisecondi.
Esempio
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();
}
} Prova tu stesso " Ostacolo Moving
L'ostacolo è di alcun pericolo quando è statica, quindi abbiamo bisogno di spostare.
Modificare il valore della proprietà di myObstacle.x ad ogni aggiornamento:
Esempio
function updateGameArea() {
if
(myGamePiece.crashWith(myObstacle)) {
myGameArea.stop();
} else {
myGameArea.clear();
myObstacle.x += -1;
myObstacle.update();
myGamePiece.newPos();
myGamePiece.update();
}
} Prova tu stesso " ostacoli multipli
Che ne dite di aggiungere più ostacoli?
Per questo abbiamo bisogno di una proprietà per i telai conteggio, e un metodo per eseguire qualcosa in un dato frame rate.
Esempio
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;
} La funzione everyinterval restituisce vero se il frameNumber corrente corrisponde al dato intervallo.
Per definire più ostacoli, prima di dichiarare la variabile ostacolo come un array.
In secondo luogo, abbiamo bisogno di fare alcuni cambiamenti nella funzione updateGameArea.
Esempio
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();
} Prova tu stesso " Nel updateGameArea funzione dobbiamo ciclo attraverso ogni ostacolo, per vedere se c'è un incidente. Se c'è un incidente, la updateGameArea funzione di stop e nessun altro disegno è fatto.
La updateGameArea funzione conta frame e aggiunge un ostacolo per ogni fotogramma 150 °.
Ostacoli di grandezza a caso
Per rendere il gioco un po 'più difficile, e divertente, vi invieremo a ostacoli di dimensioni casuali, in modo che il quadrato rosso deve muoversi su e giù per non crash.
Esempio
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();
} Prova tu stesso "