Control enemys speed RequestAnimationFrame - Three.js


#1

i need help to discover how to do this

Basicly im trying to build a game like pacman, i have a matrix that defined where is the blocks, the pacman, the enemys and the balls, here is my matrix.

   var MeshDataPac =
[
  "------------------------------",
  "-ooooooooooooo--ooooooooooooo-",
  "-o----o------o--o------o----o-",
  "-o----o------o--o------o----o-",
  "-oooooooooooooooooooooooooooo-",
  "-o----o--o----------o--o----o-",
  "-oooooo--ooooo--ooooo--oooooo-",
  "------o------ -- ------o------",
  "------o-              -o------",
  "------o-  ----  ----  -o------",
  "-     o-  -    e   -  -o     -",
  "------o-  ----------  -o------",
  "------o-              -o------",
  "------o-  ----------  -o------",
  "-ooooooooooooo--ooooooooooooo-",
  "-o----o------o--o------o----o-",
  "-ooo--oooooooo--ooooooooooooo-",
  "---o--oooo          oooo------",
  "---o--o--o-----------o-o--o---",
  "-oooooo--ooooo--oooooo-o--ooo-",
  "-o-----------o--o-----------o-",
  "-oooooooooooooooXoooooooooooo-",
  "------------------------------"
];

to discover colisions between my pacman and the blocks and balls i discover where is the position of the "-" and "o" and the movement on each keypress is always the SCALE that i gave at the begin on creating the map for example 10, this kinda works well.
But now i need to animate the enemys "e" and i want that they move like when i press a key but randomly, if i try to increment the position on my animate function with the same as the pacman the speed is to fast, i want to control that speed but i also want that he moves always 1 block on my matrix, the only way that i know to reduce speed in this case is to put the position increment lower, but i cant do that as i said, because i want him to move 10 or SCALE each time

Tryed to use SetTimeout inside my enemyMove function and tryed to give a timeout to request animationframe but first seems like bad approach, then it becomes kinda buggy

here is my keypress function

     function handleKeyPressed(e) {

   var PacMan = scene.getObjectByName('PacMan');
   gameSong.play();
   switch(String.fromCharCode(e.which))
   {
     case "w": if(!detectaColisao(PacMan.position.x, PacMan.position.y + SCALE))
          PacMan.position.y += SCALE;
       break;
     case "a": if(!detectaColisao(PacMan.position.x - SCALE, PacMan.position.y))
         PacMan.position.x -= SCALE;
       break;
     case "s": if(!detectaColisao(PacMan.position.x, PacMan.position.y - SCALE))
         PacMan.position.y -= SCALE;
       break;
     case "d": if(!detectaColisao(PacMan.position.x + SCALE, PacMan.position.y))
         PacMan.position.x += SCALE;
       break;

   }
}

function anima()
{
  moveEnemys();
  var delta=clock.getDelta();
  orbitCamera.update(delta);
  requestAnimationFrame( anima);
  renderer.render(scene, camera);

}

how can i do that the moveEnemys become slower but without changing the number of position increment that i want, that i have a animation like when i press a key?