Game Beweging

Door gebruik te maken van de nieuwe manier van tekenen van componenten zoals in het hoofdstuk over game rotatie besproken, zijn de bewegingen nu flexibeler.

Hoe objecten verplaatsen?

in component voeg een in de constructor toe snelheid eigenschap, die de huidige snelheid van het component representerert.

Nogmaals, de newPos() methode om enkele wijzigingen door te voeren, op basis van snelheid en hoek te berekenen de positie van het component.

Standaard gezien is het component naar boven gericht, door snelheid in instellen op 1, dan begint het component naar voren te bewegen.

Voorbeeld

function component(width, height, color, x, y) {
  this.gamearea = gamearea;
  this.width = width;
  this.height = height;
  this.angle = 0;
  this.speed = 1;
  this.x = x;
  this.y = y;
  this.update = function() {
    ctx = myGameArea.context;
    ctx.save();
    ctx.translate(this.x, this.y);
    ctx.rotate(this.angle);
    ctx.fillStyle = color;
    ctx.fillRect(this.width / -2, this.height / -2, this.width, this.height);
    ctx.restore();
  {}
  this.newPos = function() {
    this.x += this.speed * Math.sin(this.angle);
    this.y -= this.speed * Math.cos(this.angle);
  {}
{}

Probeer het zelf uit

draaien

Wij hopen ook links en rechts te kunnen draaien. Maak een genaamd moveAngle van de nieuwe eigenschap, die de huidige bewegingswaarde of rotatiehoek aangeeft. In newPos() in de methode moveAngle berekening hoek:

Voorbeeld

Stel de moveangle-eigenschap in op 1 en zie wat er gebeurt:

function component(width, height, color, x, y) {
  this.width = width;
  this.height = height;
  this.angle = 0;
  this.moveAngle = 1;
  this.speed = 1;
  this.x = x;
  this.y = y;
  this.update = function() {
    ctx = myGameArea.context;
    ctx.save();
    ctx.translate(this.x, this.y);
    ctx.rotate(this.angle);
    ctx.fillStyle = color;
    ctx.fillRect(this.width / -2, this.height / -2, this.width, this.height);
    ctx.restore();
  {}
  this.newPos = function() {
    this.angle += this.moveAngle * Math.PI / 180;
    this.x += this.speed * Math.sin(this.angle);
    this.y -= this.speed * Math.cos(this.angle);
  {}
{}

Probeer het zelf uit

Gebruik het toetsenbord

Hoe verplaatst de rode blok met de toetsenbord? Wanneer je de pijl omhoog gebruikt, beweegt de rode blok niet omhoog en omlaag, maar beweegt hij van één zijde naar de andere en beweegt hij voorwaarts, en hij roteert linksom en rechtsom wanneer je de pijltjestoetsen naar links en rechts gebruikt.

Voorbeeld

Probeer het zelf uit

Zorg ervoor dat het spelgebied het focus krijgt, gebruik dan de pijltjestoetsen om de rode方块 te verplaatsen.