Appuyez sur les boutons pour déplacer le carré rouge:
Ajouter quelques obstacles
Maintenant, nous voulons ajouter des obstacles som à notre jeu.
Ajouter un nouveau composant à la zone de jeu. Faites-vert, 10px de large, 200px de haut, et placez-le 300px vers la droite et vers le bas 120px.
Également mettre à jour le composant d'obstacles dans chaque image:
Exemple
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();
}
Essayez - le vous - même » Hit The Obstacle = Game Over
Dans l'exemple ci-dessus, rien ne se passe quand vous frappez l'obstacle. Dans un jeu, ce n'est pas très satisfaisant.
Comment savons-nous si notre carré rouge frappe l'obstacle?
Créer une nouvelle méthode dans le constructeur composant, ce chekcs si les accidents composants avec un autre composant. Cette méthode doit être appelée à chaque fois que les mises à jour des cadres, 50 fois par seconde.
Ajoutez également un stop() méthode pour l' myGameArea objet, ce qui efface l'intervalle de 20 millisecondes.
Exemple
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();
}
} Essayez - le vous - même » Obstacle Moving
L'obstacle est sans danger quand il est statique, donc nous voulons qu'elle bouge.
Modifiez la valeur de la propriété de myObstacle.x à chaque mise à jour:
Exemple
function updateGameArea() {
if
(myGamePiece.crashWith(myObstacle)) {
myGameArea.stop();
} else {
myGameArea.clear();
myObstacle.x += -1;
myObstacle.update();
myGamePiece.newPos();
myGamePiece.update();
}
} Essayez - le vous - même » obstacles multiples
Que diriez-vous d'ajouter plusieurs obstacles?
Pour cela nous avons besoin d'une propriété pour les cadres de comptage, et une méthode pour exécuter quelque chose à un taux de trame donnée.
Exemple
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 fonction everyinterval renvoie true si le framenumber courant correspond à l'intervalle donné.
Pour définir plusieurs obstacles, d'abord déclarer la variable d'obstacle comme un tableau.
Deuxièmement, nous avons besoin de faire quelques changements dans la fonction updateGameArea.
Exemple
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();
} Essayez - le vous - même » Dans la updateGameArea fonction , nous devons boucle à travers tous les obstacles pour voir s'il y a un accident. S'il y a un accident, la updateGameArea fonction arrête, et pas plus le dessin est fait.
La updateGameArea fonction compte cadres et ajoute un obstacle pour chaque trame 150e.
Obstacles de taille aléatoire
Pour rendre le jeu un peu plus difficile, et le plaisir, nous vous ferons parvenir dans les obstacles de tailles aléatoires, de sorte que le carré rouge doit se déplacer vers le haut et vers le bas pour ne pas tomber en panne.
Exemple
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();
} Essayez - le vous - même »