Game Gravity

In sommige spellen bestaat er een kracht die de spelcomponenten naar een richting trekt, bijvoorbeeld de zwaartekracht trekt objecten naar de grond.

zwaartekracht

Als je deze eigenschap wilt toevoegen aan de constructor van ons component, voeg dan eerst een zwaartekracht Eigenschap, deze eigenschap stelt de huidige zwaartekracht in. Vervolgens voeg je een gravitySpeed Eigenschappen, die elke keer toen we het frame bijwerken, worden verhoogd:

Example

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

Try it yourself

Aan de onderkant

Om te voorkomen dat de rode blok oneindig valt, moeten we de valstoppen stoppen wanneer hij de onderkant van het speelveld bereikt:

Example

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

Try it yourself

Versnelling

In het spel, wanneer er een kracht is die de blok naar beneden trekt, moet je een methode ontwerpen om de component te laten versnellen.

Een functie wordt geactiveerd wanneer iemand op de knop klikt, waardoor de rode blok naar de lucht vliegt:

Example

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

Try it yourself

A game

Make a game based on what we have learned so far:

Example

Try it yourself

Please click the boost button to start the game.

How long can you live? Please use the boost button to stay in the air.