How I can make (2d game look like 3d)

Question

https://code.sololearn.com/WMDJ9tPr95o7/?ref=app

Answer 1

Nice job so far.

That looks fairly 3D already.

Here are some ideas for improvement:
- Add textures to the walls. They wouldn't need to look perfectly smooth to look better. You could scale an image based to fit in the wall height that you already calculate.
- Straighten up the lines. Your graphics show curving of lines that are normally perfectly straight in computer games. Most gamers will find that weird and it could mean that some of your math is less efficient. When I ended up transforming 3D straight lines to curves, it was when I relied on trig functions and drew graphics based on angular directions instead of a more conventional projection onto a viewing plane. In other words, I would let height in 2d = atan(dy, Math.sqrt(dx * dx + dz * dz)) instead of height in 2d = dy / dz. The dy / dz is more efficient to calculate and will cause straight lines in 3D to be drawn as straight lines in your 2D graphics. You'd then rotate right and left with a 2D rotation. You'd also scale the view based on a zoom level like you already are doing.
- Accept mouse input. Touch screen events worked on the joystick area but mouse dragging didn't.

The math in my code here is fairly simple and uses the projection technique I mentioned before:
https://code.sololearn.com/WvW556P3kzwK/#
That doesn't support a rotate right or left but you could use math like this:
https://stackoverflow.com/questions/17410809/how-to-calculate-rotation-in-2d-in-javascript
Cache sin(x), cos(x) for a small performance improvement over many rotations of the same angle.

Answer 2

Thanks but it's very old and hard now I can use for this p5.js or another methods or Unity