Frontend Documentation
Overview
DNA Dynamite is a browser-based educational game that teaches DNA base-pairing (A–T and G–C) through interactive gameplay.
This documentation describes the structure of the frontend codebase, including file roles, styling framework, and best practices for development.
File Structure
Directory: assets/js/dynamite/
| File | Description |
|---|---|
BaseMoving.js |
Controls how DNA strands scroll upward during gameplay. |
GameController.js |
Manages game controls like start, pause, resume, and speed changes. |
GameEnv.js |
Sets up the canvas, renders elements, and handles scoring and game state. |
GameSetup.js |
Initializes the game, including strand generation and UI components. |
GameObject.js |
Defines object traits like collision detection and movement. |
ScoreAPI.js |
Handles high score data storage and retrieval. |
Frontend Diagrams
Entry Point
index.md acts as the main webpage that hosts the game.
It integrates the game’s frontend logic and UI into a static site and loads game scripts and the canvas display.
Styling
The project uses Tailwind CSS for utility-first styling.
- Layout & spacing:
flex,grid,p-4,gap-4 - Typography:
text-lg,font-bold,text-center - Colors:
bg-pink-500,text-black,hover:bg-pink-600 - Responsive design:
sm:,md:,lg: