Spel gravitation

I vissa spel finns det en kraft som drar spelkomponenter mot en riktning, till exempel drar gravitationen objekt mot marken.

gravitation

Om du vill lägga till denna egenskap i vår komponentkonstruktör, lägg till först en gravity Egenskap, denna egenskap ställer in den aktuella gravitationen. Sedan lägger du till en gravitySpeed Egenskaper, som ökar varje gång vi uppdaterar ramen:

Exempel

function component(width, height, color, x, y, type) {
  this.type = type;
  this.width = width;
  this.height = height;
  this.x = x;
  this.y = y;
  this.speedX = 0;
  this.speedY = 0;
  this.gravity = 0.05;
  this.gravitySpeed = 0;
  this.update = function() {
    ctx = myGameArea.context;
    ctx.fillStyle = color;
    ctx.fillRect(this.x, this.y, this.width, this.height);
  }
  this.newPos = function() {
    this.gravitySpeed += this.gravity;
    this.x += this.speedX;
    this.y += this.speedY + this.gravitySpeed;
  }
}

Prova själv

Touchar botten

För att förhindra att den röda kuben faller för evigt, måste vi stoppa den från att falla när den når botten av spelområdet:

Exempel

  this.newPos = function() {
    this.gravitySpeed += this.gravity;
    this.x += this.speedX;
    this.y += this.speedY + this.gravitySpeed;
    this.hitBottom();
  }
  this.hitBottom = function() {
    var rockbottom = myGameArea.canvas.height - this.height;
    if (this.y > rockbottom) {
      this.y = rockbottom;
    }
  }

Prova själv

Accelerera

I spelet, när en kraft drar kuben nedåt, bör du designa ett sätt att tvinga komponenten att accelerera.

När någon klickar på knappen utlöses en funktion som får den röda kuben att flyga upp i luften:

Exempel

<script>
function accelerate(n) {
  myGamePiece.gravity = n;
}
</script>
<button onmousedown="accelerate(-0.2)" onmouseup="accelerate(0.1)">加速</button>

Prova själv

Ett spel

Gör ett spel baserat på vad vi har lärt oss hittills:

Exempel

Prova själv

Klicka på snabbknappen för att börja spela.

Hur länge kan du leva? Använd snabbknappen för att förbli i luften.