Movimento omogeneo del personaggio nel gioco canvas usando i comandi della tastiera

Question

Esatto, sto creando un gioco a tema spazio infinito a scorrimento laterale con canvas e javascript. Sto controllando una navicella spaziale semplicemente usando le frecce su e giù e voglio implementare una sorta di movimento che si allenta in modo che la nave non si fermi semplicemente quando rilasciamo le chiavi. Ho guardato in giro e non ho trovato nulla, più i miei tentativi non sono solo di lavoro, questo è quello che ho provato ...

Jet.prototype.checkDirection = function() { 
if (this.isUpKey) { 
    this.drawY -= this.speed; 
    if (this.speed < 5) { 
     this.speed += 0.1; 
    } 
} 
if (this.isDownKey) { 
    this.drawY += this.speed; 
    if (this.speed < 5) { 
     this.speed += 0.1; 
    } 
} 
if (!this.isUpKey) { 
    if (!this.isDownKey) { 
     if (this.speed >= 0) { 
      this.drawY -= this.speed; 
      this.speed -= 1; 
     } 
    } 
} 
if (!this.isDownKey) { 
    if (!this.isUpKey) { 
     if (this.speed >= 0) { 
      this.drawY += this.speed; 
      this.speed -= 1; 
     } 
    } 
} 

Answer 1

Si desidera applicare un po 'di attrito. È piuttosto facile. Puoi fare qualcosa come il seguente.

this.speed*=0.98; 

Più basso è il valore (0,8, 0,5, ecc.) Più veloce si rallenta.

Ho fornito una demo in cui è possibile spostarsi e rallentare gradualmente. Vai avanti e gioca con il valore e guarda come lo influenza.

Live Demo

var canvas = document.getElementById("canvas"), 
    ctx = canvas.getContext("2d"); 

canvas.width = canvas.height = 300; 

var x = 150, //initial x 
    y = 150, // initial y 
    velY = 0, 
    velX = 0, 
    speed = 2, // max speed 
    friction = 0.98, // friction 
    keys = []; 

function update() { 
    requestAnimationFrame(update); 

    // check the keys and do the movement. 
    if (keys[38]) { 
     if (velY > -speed) { 
      velY--; 
     } 
    } 

    if (keys[40]) { 
     if (velY < speed) { 
      velY++; 
     } 
    } 
    if (keys[39]) { 
     if (velX < speed) { 
      velX++; 
     } 
    } 
    if (keys[37]) { 
     if (velX > -speed) { 
      velX--; 
     } 
    } 

    // apply some friction to y velocity. 
    velY *= friction; 
    y += velY; 

    // apply some friction to x velocity. 
    velX *= friction; 
    x += velX; 

    // bounds checking 
    if (x >= 295) { 
     x = 295; 
    } else if (x <= 5) { 
     x = 5; 
    } 

    if (y > 295) { 
     y = 295; 
    } else if (y <= 5) { 
     y = 5; 
    } 

    // do the drawing 
    ctx.clearRect(0, 0, 300, 300); 
    ctx.beginPath(); 
    ctx.arc(x, y, 5, 0, Math.PI * 2); 
    ctx.fill(); 
} 

update(); 

// key events 
document.body.addEventListener("keydown", function (e) { 
    keys[e.keyCode] = true; 
}); 
document.body.addEventListener("keyup", function (e) { 
    keys[e.keyCode] = false; 
}); 

Answer 2

Penso che quello che vorrei fare è sulla keyup non fermare la nave, basta avere una funzione che rallenta un po 'quindi chiamare questa funzione in setInterval a qualsiasi intervallo ti dà l'effetto desiderato e quindi una volta che la velocità della nave è zero chiama clearInterval

Quindi su keyup u fondamentalmente setInterval (slowShip, 500)

Answer 3

non poteva basta fare

if(!playerUp && !playerDown && moveSpeed > 0){ 
    moveSpeed--; 
} 

o volevi una formula speciale per questo?