Împingeți butoanele pentru a muta pătrat roșu:
Adăugați unele obstacole
Acum vrem să adăugați obstacole som la jocul nostru.
Adăugați o nouă componentă în zona jocurilor de noroc. Fă-l verde, 10px largă, 200px mare, și puneți-l 300px spre dreapta și în jos 120px.
De asemenea, actualizează componenta obstacol în fiecare cadru:
Exemplu
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();
}
Încearcă - l singur » Hit Obstacolul = Game Over
In exemplul de mai sus, nu se întâmplă nimic când te-a lovit obstacolul. Într-un joc, care nu este foarte satisfăcătoare.
Cum știm dacă pătrat nostru roșu lovește obstacol?
Creați o nouă metodă în constructorul componentei, că chekcs în cazul în care se blochează de componente cu o altă componentă. Această metodă ar trebui să fie numit de fiecare dată când actualizările cadre, de 50 de ori pe secundă.
De asemenea , adăugați un stop() metoda la myGameArea obiectului, care șterge intervalul de 20 milisecunde.
Exemplu
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();
}
} Încearcă - l singur » Obstacol Moving
Obstacolul este de nici un pericol atunci când este static, astfel încât vrem să se miște.
Modificarea valorii de proprietate a myObstacle.x la fiecare actualizare:
Exemplu
function updateGameArea() {
if
(myGamePiece.crashWith(myObstacle)) {
myGameArea.stop();
} else {
myGameArea.clear();
myObstacle.x += -1;
myObstacle.update();
myGamePiece.newPos();
myGamePiece.update();
}
} Încearcă - l singur » Obstacole multiple
Cum despre adăugarea mai multor obstacole?
Pentru că avem nevoie de o proprietate de cadre de numărare, și o metodă de a executa ceva de la un frame rate dat.
Exemplu
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;
} Funcția everyinterval returnează true dacă framenumber curent corespunde intervalului dat.
Pentru a defini mai multe obstacole, în primul rând declara variabila obstacol ca o matrice.
În al doilea rând, trebuie să facem unele schimbări în funcția updateGameArea.
Exemplu
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();
} Încearcă - l singur » În updateGameArea funcția trebuie să ne buclă prin orice obstacol pentru a vedea dacă există un accident. Dacă există un accident, The updateGameArea funcția se va opri, și nu mai desen se face.
updateGameArea Funcția contează cadre și adaugă un obstacol pentru fiecare cadru 150 de ani.
Obstacolele de dimensiune aleatorie
Pentru a face jocul un pic mai dificil, și distractiv, vom trimite în obstacole de dimensiuni aleatorii, astfel încât pătrat roșu trebuie să se deplaseze în sus și în jos pentru a nu crash.
Exemplu
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();
} Încearcă - l singur »