Javascript – presentation of trains on a simplified rail network

I'm working on a hobby game, mainly about the work of the Train Dispatcher.

(Stack: typescript, phaser.js)

My map is based on a grid, each tile can contain 1 rail tile (now, except for intersections, but we can simplify it now, as intersections are only multiple tiles, only one of which is active).

Example (black is grid, white is rail):

Example rails

As you can see, we basically have three different tiles: straight rail, 45 degree turn and diagonal rail (which can also be considered straight rail). I do not plan to add more tiles because you can already build quite complex setups from these tiles.

Trains would run on these rails. Each sled has two "wheel" positions where it locks into place on a track. This is shown in the following example of my prototype:

working prototype

However, as the existing system (see below) has some problems, I have decided to improve it. I wonder, what would be the best way to do this?

What I'm looking for:

  • How do I save the rail pieces on the map?
  • How do you move a train (I know it's x, y, speed and acceleration)?
  • how can you let the train continue until the next piece in the rail?

Current solution (in some cases defective, not ideal):

  • every track has its class (CurvedRail. StraightRail)
  • Each rail piece class has a method movePointthat accepts x. y. direction and distance and returns a new point (i.e. distance away from the original point, but also considering track bends). It can also return deltawhen the movement has reached the edge of the tile and it needs to be moved further (on another piece). This is done by a separate class that finds and calls the following track piece movePoint with the delta instead
  • There are problems, because trains that are connected diagonally sometimes do not exactly follow the diagonal. Instead of landing on the next diagonal part, they land on the adjacent horizontal or vertical part and derail.

One of the problems I might face is that tiles are 32×32 pixels in size so it's hard to go right into the "middle" of the piece because it's "between two pixels" and even though I use decimal numbers, can it be that a problem. Is it better to have a grid of odd tiles?