Physics Engines: Porting Box2DFlash to Matter.js & Modern JavaScript Game Engines

Games like *Angry Birds* and *Crush the Castle* established 2D rigid-body physics as a staple of Flash web gaming using the `Box2DFlash` port. Modern web games achieve 60–120 FPS performance by porting these physics simulations to lightweight JavaScript engines like **Matter.js** or SIMD-accelerated WebAssembly engines like **Rapier2D**.

1. Collision Bitmask & Category Filtering Alignment

Both Box2D and modern physics engines use 16-bit binary masks to define which bodies collide with one another:

// 16-Bit Category and Mask Collision Filtering
const CATEGORY_PLAYER = 0x0001;
const CATEGORY_ENEMY  = 0x0002;
const CATEGORY_GROUND = 0x0004;

// Matter.js Body with identical Box2D collision rules
const playerBody = Bodies.rectangle(x, y, width, height, {
  collisionFilter: {
    category: CATEGORY_PLAYER,
    mask: CATEGORY_GROUND | CATEGORY_ENEMY // Collides only with ground and enemies
  }
});