How to work better with the grid if desired animation when moving?

Hello!
Started to make a game in which use the net. Generates a NxM Board, it moves the character.

The first way is this: we move the character index of the cells, that is to take a step to the right on the x value increased by one and so we walk on our Board. But in this method I don't know how to move a character smoothly from cell to cell.
5a310fc971d7c026456413.pngThe second way is this: we have no reference to the indices of the grid, we move the character, so to speak, normal coordinates. But here the difficulty of centering a character inside a single cell.
5a3111269377f127701255.png

Question: how to work better with the grid if the character needs it like to slide?
And how do you do that?
Thank you :)
June 10th 19 at 15:32
2 answers
June 10th 19 at 15:34
I like your solution. You wouldn't happen to know how to implement in your code and Easing' ?
How to work with these functions?
var easeInQuint: function(t, b, c, d) {
 return c*(t /= d)*t*t*t*t + b;
}

How to make sure that the value has varied, for example, from 0 to 100? I value exceeds 100 and go nowhere - lamar_Veum commented on June 10th 19 at 15:37
The decision, to be honest, very "raw")
About easing'and my decision is applied animations in CSS, and, accordingly, the standard functions for easing'a – https://developer.mozilla.org/en-US/docs/Web/CSS/a...
You may be able to implement the function that you need, using Bezier curves – animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1); (substitute your settings) - Alysson_Gaylord commented on June 10th 19 at 15:40
June 10th 19 at 15:36
There are logical coordinates (coordinates within the mesh, the 4.2 in your example), which are used for business logic, is used to output to the screen. Physical work logical simple formula (like physicalX = logicalX * 10 plus the offset of the grid from the edge of the screen plus the border and padding if necessary).
About moving: to calculate the physical end and smoothly changing the actual physical (or requestAnimationFrame method of the engine) until the match end. Logical coordinates change at any time depending on how it is more convenient to calculate the consequences of stroke.
And how it is possible to implement in the code? I just have the code gets cluttered with unnecessary variables, and don't do it yet to avoid it) - lamar_Veum commented on June 10th 19 at 15:39
if no experience I would advise to take a ready engine, for a lot of variables you have for a reason -- a difficult thing.
A lot of variables -- create the objects to group variables in meaning, highlight function to work with these objects, well, etc Decomposition will help us:) - Alysson_Gaylord commented on June 10th 19 at 15:42
Thank you very much! - lamar_Veum commented on June 10th 19 at 15:45

Find more questions by tags Development of gamesJavaScript