vue, ts, object-oriented, canvas2d
demo: https://blog.unrun.top/mctato/
The idea started in January. At first, I wrote 7 or 8 js files in order and put them in the script tag of the html file. It was really tiring.
Later, I used vite and ts to refactor and import them into each other, and finally packaged them.
Main Idea
Player, Zombie class, Special Effects class, Flying Object class, all inherit from the Rectangle class.
The Rectangle class has methods for drawing and moving.
- Listen to key presses for movement.
- Collision detection uses broad-phase detection to filter out some cases by checking one dimension first.
- Monster pathfinding is based on path points.
- Monsters and players respectively find the shortest visible path points (without walls blocking the line), connect the nearest path points, and then solve the shortest path problem for weighted undirected graphs (taking into account the distance between the starting and ending points and adding it to the calculation of the shortest path).
- The shortest path problem for weighted undirected graphs is solved using Dijkstra's algorithm (some calculation results can be cached, but I didn't do that, and the impact is not significant).
Some images
"Shortest Path"
Collision Detection
Animation Frames
Before Refactoring
I wrote for a long time, but the final result is not very good.