A WebGL-based immersive cyber-security simulation.
Navigate abandoned facilities, hack terminals, and solve puzzles in a retro-futuristic 3D world.
CODECRAFT is an interactive 3D experience that blends exploration with puzzle-solving. Built with Three.js and vanilla JavaScript, the game drops you into a mysterious, abandoned facility where your only way out is to interact with the environment and bypass security systems.
The project features a unique Matrix-style transition system and a diegetic interface that immerses players in the role of a hacker.
- 3D Exploration 🏙️: Freely explore detailed environments with dynamic lighting and textures using the WASD keys.
- Hacking Mechanics 💻: Interact with in-game terminals to trigger a "Code Tetris" minigame, solving syntax puzzles to unlock doors.
- Matrix Transitions 🟩: Seamless, high-performance "code rain" effects when moving between levels.
- Inventory System 🎒: Collect keycards and items to solve environmental puzzles.
- Cinematic Narrative 🎬: Integrated video sequences that advance the story as you progress.
- Responsive Design 📱: Optimizations for different screen sizes (desktop focused).
This project relies on modern web technologies to deliver a high-performance 3D experience without heavy game engines.
- Three.js: The core 3D engine for rendering the world.
- Tailwind CSS: For rapid, consistent UI styling.
- Vanilla JavaScript: Game logic, state management, and interaction handling.
- Vite (Recommended): For a fast development server experience.
To run CODECRAFT locally, follow these simple steps:
-
Clone the repository:
git clone https://github.com/Joshua-Velasco/small-video-game-in-javascript.git
-
Navigate to the project directory:
cd small-video-game-in-javascript -
Start a local server: Since the project uses ES Modules, you need a local server.
Option A: Using Python (Pre-installed on macOS/Linux)
python3 -m http.server 5500
Option B: Using Node.js (npx)
npx serve
-
Open in Browser: Visit
http://localhost:5500(or the port shown in your terminal).
| Key | Action |
|---|---|
| W, A, S, D | Move Camera / Player |
| Arrow Keys | Move Camera / Player |
| X | Interact (Door, Terminal, Item) |
| 1 - 7 | Select Inventory Slot |
| ESC | Close Terminals / Minigames |
“The system has been dormant for decades. The logs are corrupted, and the security protocols are... aggressive. You are the first to enter since the lockdown. Find the mainframe. Decode the syntax. Get us back online.”
Made with by Joshua Velasco