Physics Based 2D Web Game/Level Editor

Project Overview

I developed a web application that lets users create, save, and play custom 2D physics-based levels. The project features a drag and drop level editor using JQuery UI, where users can place targets and obstables. I integrated Planck.js for realistic 2D physics simulation and built a Node.js/Express backend with RESTful APIs for persistent level storage. Users can switch between editing and playing their levels, with data stored using JSON files. This project demonstated my abiliy to work with physics engines and build interactive web applications.

Project Info

Project: VFS Solo Project
Role: Programmer
Frontend: HTML, CSS, Javascript, JQuery, Planck.js
Backend: REST API, JSON, CORS

Responsibilities

Designed and implemented a drag and drop level editor for custom 2D levels using JQuery
Developed a Node.js/Express backend with RESTful API endpoints
Enabled dynamic loading and playing of custom levels
Integrated Planck.js for 2D physics simulation
Implemented projectile launching and object destruction
Implemented UI for level management and game states
Added robust error handling and data verification

Drag-and-Drop Level Editor

Designed an intuitive level editor interface allowing users to visually place, move and delete game objects(blocks, pigs, triangles)

Utilized JQuery UI for smooth drag and drop functionality and object manipulation

Implemented context menus and click events for quick object deletion and interactions

Added validation to ensure levels meet requirements before saving(ex.have at least one pig per level)

Developed features for saving, loading, renaming, and deleting levels using editor UI

Physics-Based Game Engine (Planck.js Integration)

Integrated Planck.js to simulate physics including gravity and collisions

Translated user-created level data though JSON data into interactive physics shapes in the game

Developed mechanics for launching a projectile(the bird), detecting collisions and handling object destruction

Implemented win/lose conditions based on if all pigs were destroyed with the limited number of birds player can launch

RESTful Backend for Level Management

Built a Node.js/Express backed with endpoints for creating, reading, updating, and deleting level data as JSON files

Ensured persistent storage and retrieval of user-enerated levels

Implemented error handling for file operations and invalid requests

Enabled CORS to allow secure communication between frontend adnd backend

Designed API responses for seamless integration with the frontend editor as well as the game