Spel Hindernisse
Druk die knoppies om die rooi vierkant te skuif:
Voeg 'n paar struikelblokke by
Nou wil ons 'n paar struikelblokke by ons spel voeg.
Voeg 'n nuwe komponent by die speelarea. Maak dit groen, 10px breed, 200px hoog, en plaas dit 300px na regs en 120px af.
Dateer ook die hinderniskomponent in elke raam op:
Voorbeeld
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();
}
Tref die hindernis = Game Over
In die voorbeeld hierbo gebeur niks wanneer jy die hindernis tref nie. In 'n speletjie is dit nie baie bevredigend nie.
Hoe weet ons of ons rooi vierkant die hindernis tref?
Skep 'n nuwe metode in die komponentkonstruktor, wat kyk of die komponent met 'n ander komponent ineenstort. Hierdie metode moet elke keer as die rame opdateer, 50 keer per sekonde genoem word.
Voeg ook 'n stop()metode by die myGameAreavoorwerp, wat die interval van 20 millisekondes uitvee.
Voorbeeld
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();
}
}
Bewegende hindernis
Die hindernis is van geen gevaar wanneer dit staties is nie, so ons wil hê dit moet beweeg.
Verander die eiendomswaarde van myObstacle.xby elke opdatering:
Voorbeeld
function updateGameArea() {
if (myGamePiece.crashWith(myObstacle)) {
myGameArea.stop();
} else {
myGameArea.clear();
myObstacle.x += -1;
myObstacle.update();
myGamePiece.newPos();
myGamePiece.update();
}
}
Veelvuldige struikelblokke
Hoe gaan dit met die byvoeging van veelvuldige struikelblokke?
Daarvoor benodig ons 'n eienskap om rame te tel, en 'n metode om iets teen 'n gegewe raamtempo uit te voer.
Voorbeeld
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-funksie gee waar as die huidige raamnommer ooreenstem met die gegewe interval.
Om veelvuldige struikelblokke te definieer, verklaar eers die hindernisveranderlike as 'n skikking.
Tweedens moet ons 'n paar veranderinge aanbring in die updateGameArea-funksie.
Voorbeeld
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 die updateGameAreafunksie moet ons deur elke hindernis loop om te sien of daar 'n ongeluk is. As daar 'n ongeluk is, updateGameAreasal die funksie stop, en nie meer tekening word gedoen nie.
Die updateGameAreafunksie tel rame en voeg 'n hindernis by vir elke 150ste raam.
Hindernisse van ewekansige grootte
Om die speletjie 'n bietjie moeiliker en pret te maak, sal ons hindernisse van ewekansige groottes instuur, sodat die rooi vierkant op en af moet beweeg om nie te verongeluk nie.
Voorbeeld
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();
}