Creating a State Machine without libraries in Javascript

Question

I was looking for how to program a state machine on google and came to various results that led me to libraries targeted to such, but I would like to understand the way it is processed and how to reach a state machine simple and functional.

I intend to use it for a simple turn game in the canvas element, I am beginner in the area and would like any help I could receive, grateful!

Answer 1

A finite state machine is a machine with a finite set of states (as the name already says). It is modeled as a graph, in which the vertices are the states and the edges are the transitions. For a given input from a given state, one arrives in another state.

One of the states of the state machine is called the initial state. Then for each input symbol, you navigate the transitions from one state to another. Note that the only thing that is memorized is the current state.

Implementing this, maybe what you want is something like this:

function MaquinaDeEstados() {
  var estados = new Map();

  var erro = {
    adicionarTransicao: function(entrada, destino) {
      return this;
    },
    proximo: function(entrada) {
      return erro;
    },
    valor: function() {
      return "{erro}";
    }
  };

  function Estado(valor) {
    var transicoes = new Map();
  
    this.adicionarTransicao = function(entrada, destino) {
      transicoes.set(entrada, destino);
      return this;
    };

    this.proximo = function(entrada) {
      var retorno = transicoes.get(entrada);
      return typeof retorno === "undefined" ? erro : retorno;
    };

    this.valor = function() {
      return valor;
    };
  }

  this.estado = function(chave) {
    var estado = estados.get(chave);
    if (typeof estado === "undefined") {
      estado = new Estado(chave);
      estados.set(chave, estado);
    }
    return estado;
  };
}

/* Teste. Criando uma máquina de estados: */
var chave1 = "A", chave2 = "B", chave3 = "C";
var maquina = new MaquinaDeEstados();
var estado1 = maquina.estado(chave1);
var estado2 = maquina.estado(chave2);
var estado3 = maquina.estado(chave3);
estado1.adicionarTransicao(0, estado1);
estado1.adicionarTransicao(1, estado2).adicionarTransicao(2, estado3);
estado2.adicionarTransicao(3, estado3).adicionarTransicao(2, estado3);
estado3.adicionarTransicao(1, estado1);

/* Teste. Executando a máquina de estados: */
var entrada = [0, 1, 3, 1, 0, 2, 1, "lugar nenhum", 2, 2];
var atual = estado1; // Definimos que este é o estado inicial.
var passeio = atual.valor();
for (k in entrada) {
  var v = entrada[k];
  atual = atual.proximo(v);
  passeio += " " + atual.valor();
}

document.write(passeio);

In the test code, you will notice the following entry:

[0, 1, 3, 1, 0, 2, 1, "lugar nenhum", 2, 2]

If you click the blue button Execute that’s up, he’ll show you this:

A A B C A A C A {erro} {erro} {erro}

Initially it was in state A (initial state). Upon receiving the 0, he continued in state A. Upon receiving the 1, he went to state B. From state B on receiving 3 he went to state C, and then returned to state A with 1.

If an invalid entry is given, such as "lugar nenhum" example, then it goes to the state of error, from where it never leaves.

Also note that the state machine itself does not store what the current state is. The current state is kept in a variable outside the machine, by the code that is traversing it. This allows us to start iterating from any state, not necessarily the initial state, and also allows multiple codes to iterate the same machine into different parts without one interfering with the other. In fact, it also allows us not to even store inside the machine what the initial state is, since we can start from the state we want. If an initial state is mandatory, just start from the same state as the example does.