Mouvement de personnage lisse dans un jeu de toile en utilisant les commandes du clavier

Droite, je suis de la création d'un sidescrolling endless space jeu sur le thème de l'aide canvas et javascript. Je suis du contrôle d'un vaisseau spatial en utilisant les flèches haut et bas et je veux le mettre en œuvre une sorte de mouvement d'assouplissement, afin que le navire ne s'arrête pas morte quand je laisse aller les touches. J'ai regardé autour et je n'ai pas trouvé quelque chose en plus de ma propre tentatives ne sont tout simplement pas de travail, c'est ce que j'ai essayé...

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

source d'informationauteur Joe Taylor | 2013-03-11

  1. 24

    Vous voulez juste appliquer un peu de friction. Son assez facile. Vous pouvez faire quelque chose comme ce qui suit.

    this.speed*=0.98;

    Plus la valeur est faible (0.8, 0.5, etc) le plus vite vous allez ralentir.

    J'ai fourni une démonstration où vous pouvez vous déplacer et va progressivement ralentir. Aller de l'avant et de jouer avec la valeur et de voir comment il affecte.

    Démonstration En Direct

    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;
});
  2. 1

    Je pense que ce que je voudrais faire est de sur keyup ne pas arrêter le bateau, il suffit d'avoir une fonction qui la ralentit un peu puis appeler cette fonction setInterval à l'intervalle qui vous donne l'effet désiré, puis une fois que la vitesse du navire est zéro appel clearInterval

    Donc sur keyup u fondamentalement, le programme d'installation setInterval(slowShip, 500)

  3. 0

    Vous pouvez essayer de réduire la vitesse en continu sur chaque image

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