Spel hinder

Tryck på knappen för att flytta den röda blocket:

Lägg till några hinder

Nu vill vi lägga till några hinder till spelet.

Lägg till en ny komponent till speletområdet. Sätt den till grön, bredd 10 pixlar, höjd 200 pixlar och placera den på höger 300 pixlar, ner 120 pixlar.

uppehållande uppdatering av hinderkomponenten i varje ram:

exempel

var myGamePiece;
var min hinder;
function startSpelet() {
  min spelbit = new komponent(30, 30, "röd", 10, 120);
  min hinder = new komponent(10, 200, "grön", 300, 120);
  min speletområde.start();
}
function updateSpelområde() {
  minSpelområde.töm();
  myObstacle.update();
  myGamePiece.newPos();
  myGamePiece.update();
}

Prova själv

kolliderar med hinder = spel slut

I det föregående exemplet händer ingenting när du kolliderar med hinder. I spelet är detta inte tillfredsställande.

Hur vet vi att vår röda låda kolliderar med hinder?

I konstruktören för komponenten skapar vi en ny metod för att kontrollera om denna komponent kolliderar med en annan komponent. Denna metod bör anropas vid varje ramuppdatering, 50 gånger per sekund.

ska också lägga till myGameArea objekt tillägg stop() metoden, som tar bort 20 millisekunders intervall.

exempel

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 updateSpelområde() {
  if (myGamePiece.crashWith(myObstacle)) {
    minSpelområde.stopp();
  } else {
    minSpelområde.töm();
    myObstacle.update();
    myGamePiece.newPos();
    myGamePiece.update();
  }
}

Prova själv

Rörliga hinder

Hinder är oskyldiga när de är stillastående, så vi vill att de ska röra sig.

ändras vid varje uppdatering myObstacle.x egenskapsvärdena:

exempel

function updateSpelområde() {
  if (myGamePiece.crashWith(myObstacle)) {
    minSpelområde.stopp();
  } else {
    minSpelområde.töm();
    myObstacle.x += -1;
    myObstacle.update();
    myGamePiece.newPos();
    myGamePiece.update();
  }
}

Prova själv

Flera hinder

Hur skulle det vara med att lägga till flera hinder?

För detta behöver vi en egenskap för att beräkna ramantal och en metod för att utföra vissa åtgärder med en given bildhastighet.

exempel

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;
}

Om det aktuella ramnummeret motsvarar den angivna intervallen, returnerar everyinterval-funktionen true.

För det andra, om du vill definiera flera hinder, deklarera hindervariabeln som en array.

För det första, vi behöver göra några ändringar i updateGameArea-funktionen.

exempel

var myGamePiece;
var myObstacles = [];
function updateSpelområde() {
  var x, y;
  för (i = 0; i < minObstacles.length; i += 1) {
    om (minSpelbit.kolliderarMed(minObstacles[i])) {
      minSpelområde.stopp();
      return;
    }
  }
  minSpelområde.töm();
  minSpelområde.frameNo += 1;
  om (minSpelområde.frameNo == 1 || varjeIntervall(150)) {
    x = minSpelområde.canvas.bredd;
    y = minSpelområde.canvas.höjd - 200
    minObstacles.push(new component(10, 200, "grön", x, y));
  }
  för (i = 0; i < minObstacles.length; i += 1) {
    minObstacles[i].x += -1;
    minObstacles[i].update();
  }
  myGamePiece.newPos();
  myGamePiece.update();
}

Prova själv

i updateSpelområde Funktionen måste cykla igenom varje hinder för att kontrollera om det har inträffat en kollision. Om en kollision inträffar kommer updateSpelområde-funktionen att stoppa och sluta ritas.

updateSpelområde Funktionen räknar antalet ramar och lägger till ett hinder var 150:e ram.

Slumpmässiga hinderstorlekar

För att öka spelens svårighetsgrad och underhållning kommer vi att skicka hinder med slumpmässiga storlekar, så att den röda方块必须移动才能避免碰撞。

exempel

function updateSpelområde() {
  var x, höjd, avstånd, minHöjd, maxHöjd, minAvstånd, maxAvstånd;
  för (i = 0; i < minObstacles.length; i += 1) {
    om (minSpelbit.kolliderarMed(minObstacles[i])) {
      minSpelområde.stopp();
      return;
    }
  }
  minSpelområde.töm();
  minSpelområde.frameNo += 1;
  om (minSpelområde.frameNo == 1 || varjeIntervall(150)) {
    x = minSpelområde.canvas.bredd;
    minHöjd = 20;
    maxHöjd = 200;
    höjd = Math.floor(Math.random()*(maxHöjd-minHöjd+1)+minHöjd);
    minAvstånd = 50;
    maxAvstånd = 200;
    avstånd = Math.floor(Math.random()*(maxAvstånd-minAvstånd+1)+minAvstånd);
    minObstacles.push(new component(10, höjd, "grön", x, 0));
    minObstacles.push(new component(10, x - höjd - avstånd, "grön", x, höjd + avstånd));
  }
  för (i = 0; i < minObstacles.length; i += 1) {
    minObstacles[i].x += -1;
    minObstacles[i].update();
  }
  myGamePiece.newPos();
  myGamePiece.update();
}

Prova själv