canvas shooting game

Mar 15, 2023#ts #web #game508

AI Translation

This post is translated from Chinese into English through AI.View Original

AI-generated summary

The document discusses the development of a canvas shooting game, initiated in January 2023. Initially, the project involved writing multiple JavaScript files directly in HTML, which was cumbersome. The author later switched to using Vite and TypeScript for better organization and modularity. The main structure includes player, zombie, effect, and projectile classes that inherit from a rectangle class with methods for drawing and movement. Key features include keyboard input for movement, collision detection using broad phase techniques, and monster pathfinding based on visible shortest paths, considering obstacles. The shortest path problem is addressed using Dijkstra's algorithm, although the author did not implement caching of results. Despite the effort, the final outcome did not meet expectations.

vue, ts, object-oriented, canvas2d
demo: https://2412322029.github.io/mctato/

2412322029/mctato

俯视角射击游戏

TypeScript73

The idea started in January. At first, I wrote 7 or 8 JS files in order into the script tags of the HTML, which was really tiring.
Later, I used Vite and TypeScript to refactor and import them mutually, and finally packaged it.

Main Idea

Player, Zombie class, Special Effects class, Projectile class, all inherit from the Rectangle class.
The Rectangle class has methods for drawing, moving, etc.

Listen for key presses to move
Collision detection uses broad phase detection, first checking one dimension to filter some cases
Monster pathfinding is based on waypoints
- Monsters and players each find the visible (no walls blocking the line) shortest waypoint, connect the nearest waypoints, and then solve the shortest path problem of a weighted undirected graph (considering the distance from both starting ends and adding it to the short path calculation)
- The shortest path problem of a weighted undirected graph uses Dijkstra's algorithm (can cache some calculation results, but did not do so, which has little impact)

Wrote for a long time, but the final effect is not very good.