Move sprite along grid

#1

Hello guys, I started developing this project where I need an enemy to move along a path that I designated on the map grid.
0 on the map grid is a walkable tile,
1 is a wall,
2/3/4 are enemies.
So far I can make it move through the 0’s but it does so at a random range between the valid positions, I need it to move through a designated path on those positions and not do a random Range of all the possible positions, and I also need it to stop when it recognizes another enemy.
This is the code I have so far
The code that moves the enemy is on the update just for readability, I originally have it on a function moveEnemy, that is called by the update function

var stage1State = {

create: function() {

this.maze = [
  [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
  [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
  [1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 1, 1],
  [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1],
  [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1],
  [1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1],
  [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1],
  [1, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1],
  [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
  [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
  [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
];

this.blocks = game.add.group();
this.blocks.enableBody = true;

for (var row in this.maze) {
  for (var col in this.maze[row]) {
    var tile = this.maze[row][col];

    var x = col * 50;
    var y = row * 50;

    if (tile === 1) {
      var block = this.blocks.create(x, y, "platform");
          block.body.immovable = true;
    }
    else 
    if (tile === 2) {
      this.emp = game.add.sprite(x + 25, y + 25, "emp");
      this.emp.anchor.set(.5);
      game.physics.arcade.enable(this.emp);
    }
    else
    if (tile === 3){
        this.enemy = game.add.sprite(x , y  , "empi")
        game.physics.arcade.enable(this.enemy);
        this.enemy.enableBody = true;
    }
    else
    if (tile === 4){
        this.empi = game.add.sprite(x , y, "empi")
        game.physics.arcade.enable(this.empi);
        this.empi.enableBody = true;
       

    }
  }
}

this.controls = game.input.keyboard.createCursorKeys();

},

update: function(){
    game.physics.arcade.collide(this.empi, this.enemy);
    game.physics.arcade.collide(this.enemy, this.blocks);

    if(Math.floor(this.enemy.x)%50 === 0 && Math.floor(this.enemy.y)%50 === 0){

      //depois de verificar se o enemy está a passar no meio da célula, verificar qual célula que ele 
      // está a passar, saber qual a célula em Col e Row.  
      //Mathfloor arredonda para baixo ex: 25.3 para 25
  
          var enemyCol = (Math.floor(this.enemy.x/50));
          var enemyRow = (Math.floor(this.enemy.y/50));
          var validPath = [];
          
          if(this.maze[enemyRow][enemyCol-1] !== 1 && this.enemy.direction !== 'RIGHT' && this.maze[enemyRow][enemyCol-1] !== 4){
              validPath.push('LEFT');
          }
          if(this.maze[enemyRow][enemyCol+1] !== 1 && this.enemy.direction !== 'LEFT'&& this.maze[enemyRow][enemyCol+1] !== 4){
              validPath.push('RIGHT');
          }
          if(this.maze[enemyRow-1][enemyCol] !== 1 && this.enemy.direction !== 'DOWN' && this.maze[enemyRow-1][enemyCol] !== 4){
              validPath.push('UP');
          }
          if(this.maze[enemyRow+1][enemyCol] !== 1 && this.enemy.direction !== 'UP' && this.maze[enemyRow+1][enemyCol] !== 4 ){
              validPath.push('DOWN');
              //validPath.push('STOP');
          }
        
          
          this.enemy.direction = validPath[Math.floor(Math.random() * validPath.length)];
          console.log(validPath);
      };
      switch(this.enemy.direction){
          case 'LEFT':
              this.enemy.x -= 1;
              break;
          case 'RIGHT':
              this.enemy.x += 1;
              break;
          case 'UP':
              this.enemy.y -= 1;
              break;
          case 'DOWN':
              this.enemy.y += 1;
              break;
          case 'STOP':
          this.enemy.y ;
          this.enemy.x ;
          
      };

},
};

#2

Hi, and welcome to the Phaser forum

Do you want to use the cursors which I don’t have the answer right now OR the mouse which you can take a look at my example using EasystarJS on my GitHub account https://github.com/nazimboudeffa/phaser-easystar

#3

Hello @nazimboudeffa, I just want to move the this.enemy through the maze, through the 0 positions.
Look at the maze, there are 2 possible paths through the 0 positions one at the top and the other at the bottom, both top and bottom paths converge into a single path in the middle.
Look at the maze, there is a 3 on the bottom path, the top path will have a 4. These 3 and 4 are where the enemies are instantiated.
I want to move 3(enemy 1) and 4(enemy 2) until they reach the middle path.
Here’s what I’m not accomplishing, I need only one of the enemies inside the middle path at a time, so I need them to listen to each other and when one of them enters the middle path the other must wait before entering.
So I need a way to check if the path is occupied by enemy 1. And only move enemy 2 when enemy 1 has exited the path.

#4

@nazimboudeffa Thanks for the reply, and I want to move the enemies neither with cursors or mouse. They should function as AI

#5

So EsaystarJS like in the example I’ve told you is what you need as you can say 0 are acceptable tiles, but to move the sprite here I don’t know how it can be possible