Obstacles de jeu
- Page précédente Contrôleur de jeu
- Page suivante Points de jeu
按下按钮可移动红色方块：
添加一些障碍
现在我们想为游戏添加一些障碍。
将新组件添加到游戏区域。将其设为绿色，宽 10 像素，高 200 像素，然后将其放置在右侧 300 像素、向下 120 像素的位置。
还需要更新每一帧中的障碍物组件：
实例
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();
}
Heurté par obstacle = Fin du jeu
Dans l'exemple précédent, lorsque vous heurtez un obstacle, rien ne se passe. Dans un jeu, cela n'est pas satisfaisant.
Comment pouvons-nous savoir si notre bloc rouge a heurté un obstacle ?
Dans le constructeur de composant, créez une nouvelle méthode pour vérifier si le composant a heurté un autre composant. Cette méthode doit être appelée à chaque mise à jour de cadre, 50 fois par seconde.
doit également être ajouté à myGameArea ajout d'objet stop() Méthode, cette méthode effacera une période d'intervalle de 20 millisecondes.
实例
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();
}
}
Déplacez les obstacles
Les obstacles à l'état statique ne sont pas dangereux, donc nous voulons qu'ils bougent.
changez-le à chaque mise à jour myObstacle.x la valeur de l'attribut :
实例
function updateGameArea() {
if (myGamePiece.crashWith(myObstacle)) {
myGameArea.stop();
} else {
myGameArea.clear();
myObstacle.x += -1;
myObstacle.update();
myGamePiece.newPos();
myGamePiece.update();
}
}
Obstacles multiples
Que diriez-vous d'ajouter plusieurs obstacles ?
Pour cela, nous avons besoin d'une propriété pour calculer le nombre de frames, ainsi qu'une méthode pour exécuter certaines opérations à une fréquence donnée.
实例
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;
}
Si le numéro de frame actuel correspond à l'intervalle donné, la fonction everyinterval renvoie true.
Tout d'abord, pour définir plusieurs obstacles, déclarez la variable d'obstacles comme un tableau.
Ensuite, nous devons apporter quelques modifications à la fonction updateGameArea.
实例
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();
}
Dans updateGameArea Dans la fonction, nous devons itérer sur chaque obstacle pour vérifier s'il y a une collision. Si une collision se produit, la fonction updateGameArea s'arrêtera et ne dessinera plus.
updateGameArea La fonction compte les frames et ajoute un obstacle toutes les 150 frames.
Obstacles de tailles aléatoires
Pour ajouter de la difficulté et du plaisir au jeu, nous enverrons des obstacles de tailles aléatoires afin que la boîte rouge doive bouger vers le haut et vers le bas pour éviter les collisions.
实例
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();
}
- Page précédente Contrôleur de jeu
- Page suivante Points de jeu
