CODEWITHSUNDEEP
javascriptrequestanimationframe
Luca Ballanzeddu
Luca Ballanzeddu

Reputation: 11

requestAnimationFrame not working as intended Javascript

I'm making a game in which a player character moves left and right. Since simply using an onKeyDown eventListener had my character move in a choppy fashion, and with a slight delay, I tried using requestAnimationFrame to call the movement function as often as possible, as suggested by another answer(How can I move my JS objects smoothly using keyboard input?)

however, that has changed nothing. Here is my Javascript Code

var NodoCampo = document.getElementById("campo");
var NodoGiocatore = null;

var Left = false;
var Right = false;

var FRAMERATE = 20;

//cache giocatore
var LARG_GIOCATORE = 30;
var ALT_GIOCATORE = 30;
var X_GIOCATORE = 300;
var Y_GIOCATORE = 1100;
var VEL_GIOCATORE = 10;

function mostra_giocatore() {
    if (NodoGiocatore === null) {
        NodoGiocatore = document.createElement('div');
        NodoGiocatore.setAttribute ('id', 'player');
        NodoCampo.appendChild (NodoGiocatore);
    }
    NodoGiocatore.style.marginLeft = (X_GIOCATORE - LARG_GIOCATORE) + 'px';
    NodoGiocatore.style.marginTop = (Y_GIOCATORE - ALT_GIOCATORE) + 'px';
}

function muovi() {
    if (Left) {
        X_GIOCATORE = X_GIOCATORE - VEL_GIOCATORE;
        //aggiorno immagine
        mostra_giocatore();
    }
    else if (Right) {
        X_GIOCATORE = X_GIOCATORE + VEL_GIOCATORE;
        //aggiorno immagine
        mostra_giocatore();
    }
}

function stop() {
    Left = false;
    Right = false;
}

function interfaccia(e) {
    //freccia sinstra
    if (e.keyCode === 37) {
        X_GIOCATORE = X_GIOCATORE - VEL_GIOCATORE;
        //aggiorno immagine
        mostra_giocatore();
    }
    //freccia destra
    else if (e.keyCode === 39) {
        X_GIOCATORE = X_GIOCATORE + VEL_GIOCATORE;
        //aggiorno immagine
        mostra_giocatore();
    }

}

function inizia() {
    mostra_giocatore();
    requestAnimationFrame(muovi);
}

window.document.onkeypress = interfaccia;
window.document.onkeyup = stop;

Upvotes: 0

Views: 90

Answers (1)

ferronsays
ferronsays

Reputation: 134

Your choppy movement is likely a result of the amount you are moving the player on each frame with VEL_GIOCATORE. Try reducing this amount to observe smoother movement.

The delay you are experiencing is likely due to your operating system or browsers individual settings on how key presses should repeat. You can work around this by implementing your own key tracking -- it looks like you've started to experiment with this. Track the state of your left and right keys by updating a boolean value in onkeydown and onkeyup event listeners.

var keys = {
  left: false,
  right: false
};

window.document.onkeydown = function (e) {
  if (e.keyCode === 37) {
    keys.left = true;
  } else if (e.keyCode === 39) {
    keys.right = true;
}

window.document.onkeyup = function (e) {
  if (e.keyCode === 37) {
    keys.left = false;
  } else if (e.keyCode === 39) {
    keys.right = false;
}

Then, in your muovi function, check the state of these variables to determine if you should update the position of the player.

Upvotes: 1

Related Questions