Reibungslose Bewegung in Zeichenspiel mit Tastatur-Steuerelementen

Question

Richtig, ich erstelle ein Sidescrolling endlosen Raum Themenspiel mit Leinwand und Javascript. Ich kontrolliere ein Raumschiff, indem ich nur die Auf- und Abwärtspfeile benutze und ich möchte eine Art von Bewegungserleichterung implementieren, so dass das Schiff nicht einfach stehenbleibt, wenn ich die Schlüssel loslasse. Ich habe umsah und haben nichts und meine eigenen Versuche nur funktionieren nicht gefunden, das ist, was ich versucht habe ...

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

Sie möchten nur etwas Reibung anwenden. Es ist ziemlich einfach. Sie können etwas wie folgt tun.

this.speed*=0.98; 

Je niedriger der Wert (0,8, 0,5 usw.), desto schneller werden Sie langsamer.

Ich habe eine Demo zur Verfügung gestellt, wo Sie sich bewegen können und allmählich langsamer werden. Gehen Sie voran und spielen Sie mit dem Wert und sehen Sie, wie er sich darauf auswirkt.

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

denke ich, was ich tun würde, auf keyup ist nicht Stoppen Sie das Schiff, haben Sie einfach eine Funktion, die es ein wenig verlangsamt dann rufen Sie diese Funktion in setInterval in welchem ​​Intervall gibt Ihnen den gewünschten Effekt und dann einmal die Geschwindigkeit des Schiffes ist Null Anruf clearInterval

Also auf Keyup Sie im Grunde Setup setInterval (slowShip, 500)

Answer 3

Sie tun

nicht nur konnte

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

oder wollten Sie eine spezielle Formel für das?