javascript - How to write the logic and code for the layered rendering of objects and characters in the game?

Question

For example, in the Lone Gunman, the character is sometimes under a tree and sometimes on the grass. They are all objects in the game world. How is the hierarchical logic between the character and the map object handled, and how can the code be optimized?

Answer 1

Games are generally drawn in a loop. My opinion is to create a classification object at the beginning, for example:

var saves = {
    "background" : [],
    "foreground" ：[],
    "characters" : [],
    "ui" : [],
};

Just start in the order of for...in.
For 3D, it may be easier to work with because of the z coordinate. For 2D, since the canvas drawing mechanism is "the picture drawn later covers the picture drawn before", so it needs to be sorted to sort out the hierarchy.

Looking forward to a better answer downstairs. I am not a game developer, I just tried it out of interest.
This is one of my demos

Answer 2

The person above is right, the game is based on frame animation, and in each frame, the level of the object can be reset