Port simulation — ships arrive, load/unload cargo and queue at piers, built with Pixi.js and TweenJS.
An interactive port simulation where ships arrive from the sea, queue at the entrance, dock at piers to load or unload cargo, and depart. Built with an object-oriented architecture using Pixi.js for canvas rendering and TweenJS for smooth ship animations.
- Ship spawning — new ship every 8 seconds with random type (red/green)
- Two ship types — green ships arrive empty and get loaded, red ships arrive with cargo and get unloaded
- 4 piers — each pier can be filled or empty, only one ship at a time
- Queue system — ships wait if no appropriate pier is available
- Single entrance — only one ship can pass through the port entrance at a time
- Smooth animations — all movements via TweenJS (approach, entry, docking, exit)
- HUD logging — real-time event log of port activity
- Configurable — spawn rate, service time, pier count and positions via
config.ts
- Ship spawns on the opposite side of the sea every 8 seconds
- Ship moves toward the port queue area
- Green ships wait for a filled pier — Red ships wait for an empty pier
- Ship enters through the single entrance and docks
- After 5 seconds the cargo is exchanged and the ship departs
| Technology | Purpose |
|---|---|
| TypeScript | Type safety and OOP architecture |
| Pixi.js v8 | Canvas rendering and visualization |
| TweenJS | Smooth ship movement animations |
| Vite | Build tool |
src/
├── app/
│ ├── config.ts # Sizes, timings, positions
│ ├── index.ts # Main GameApp class
│ ├── port/
│ │ ├── PortScene.ts # Simulation logic
│ │ ├── Port.ts # Pier and queue management
│ │ ├── Pier.ts # Pier class
│ │ ├── Ship.ts # Ship class
│ │ └── types.ts # TypeScript types
│ ├── ui/
│ │ └── HUD.ts # Event logging
│ └── utils/
│ ├── tween.ts # Animation utilities
│ └── id.ts # Unique ID generation
├── main.ts # Entry point
└── styles/
└── index.css
# Install dependencies
npm install
# Start development server
npm run dev
# Build for production
npm run build