A browser-based arcade puzzle game built with HTML5, CSS3, Bootstrap, and JavaScript.
The player must navigate through a damaged reactor facility, strategically place bombs to destroy obstacles, and escape through the exit before the reactor becomes unstable.
- Live Demo
- Project Goals
- Wireframes & Design Planning
- Color Palette
- Screenshots
- User Stories & Acceptance Criteria
- Features
- Technologies Used
- Project Structure
- How to Play
- Deployment
- Testing
- Accessibility
- Future Improvements
- AI Usage Reflection
- Credits
- Author
The primary objective of this project was to demonstrate proficiency in JavaScript by building an interactive browser game that incorporates:
- DOM manipulation
- Event handling
- HTML5 Canvas rendering
- API integration
- Local Storage persistence
- Responsive web design
- Modular code architecture
- User-centered design principles
The project was intentionally developed as a Minimum Viable Product (MVP) with a scalable architecture to support future enhancements such as additional levels, enemy AI, animations, and online leaderboards.
The project was initially designed using wireframes and visual mockups before development began. These designs helped define the layout, component hierarchy, user experience, and responsive behavior of the application.
The final implementation closely follows the original design while simplifying certain interface elements and prioritizing gameplay functionality.
The visual identity of Reactor Escape is based on a futuristic neon sci-fi aesthetic inspired by reactor control rooms, arcade games, and cyberpunk interfaces.
The project supports both Dark and Light themes through CSS custom properties (variables), allowing consistent styling while maintaining accessibility and readability across different viewing preferences.
Responsive Mockups
CLICK to view more screenshots
Dark Theme
Light theme
As a player, I want the user interface to be clean, intuitive and to be able to easily start a new game so that I can begin playing immediately.
Acceptance Criteria
The application provides a clean, intuitive, and responsive interface where the Start button is clearly visible and easily accessible, allowing the player to begin a new game immediately and understand the main controls without additional guidance.
As a player, I want to control my character using the keyboard so that I can navigate the map.
Acceptance Criteria
Given the game is running, when the player presses W, A, S, D, the Arrow Keys or the touchscreen buttons, then the character moves one tile in the selected direction. The character cannot move through walls or obstacles.
As a player, I want to place bombs so that I can destroy obstacles blocking my path.
Acceptance Criteria
When the player presses the Spacebar or the touchscreen button a bomb is placed on the player's current tile and a bomb placement sound is played. The bomb explodes after a short delay
As a player, I want to reach the exit so that I can complete the level.
Acceptance Criteria
When the player reaches the exit tile the win condition is met. Then a victory message is displayed, a victory sound is played and the player's score is saved.
As a player, I want the game to detect when I am caught in an explosion so that failure conditions are clear.
Acceptance Criteria
If the player is inside an explosion area when the bomb detonates then the game ends, a game over message is displayed and a game over sound is played.
As a player, I want my scores to be saved so that I can compare my performance across multiple attempts.
Acceptance Criteria
When a game has ended the score is recorded and stored in Local Storage. The leaderboard is updated and scores persist after the browser is refreshed.
As a player, I want to enable or disable game sounds so that I can choose my preferred experience.
Acceptance Criteria
After the game is loaded when the player clicks the Sound button then all game audio is muted and the button icon updates accordingly. When clicked again the audio is re-enabled.
As a user, I want to switch between dark and light themes so that I can choose a comfortable viewing mode.
Acceptance Criteria
When the user clicks the Theme Toggle button the application theme changes and the selected theme remains active throughout the session.
As a user, I want to see that the dashboard provides useful real-world weather information data.
Acceptance Criteria
Given the application has loaded, when weather data is successfully retrieved from the API, the current weather is displayed and the weather icons update dynamically.
- Grid-based arcade game built using HTML5 Canvas
- Player movement using keyboard controls
- Bomb placement and explosions
- Destructible crates
- Exit-based win condition
- Game over state
- Responsive dashboard layout
- Dark / Light theme toggle
- Mobile-friendly controls
- Bootstrap modals
- Pause and resume functionality
- Bomb placement sound
- Explosion sound
- Victory sound
- Game over sound
- Sound toggle button
- Real-time weather information
- OpenWeather API integration
- Temperature display
- Humidity display
- Wind speed display
- Dynamic weather icons
- LocalStorage persistence
- High score tracking
- Automatic score saving
- Score ranking system
- HTML5
- CSS3
- Bootstrap 5
- JavaScript (ES6+)
- OpenWeather API
- HTML5 Canvas
- Local Storage
- Git
- GitHub
- VS Code
project-root/
│
├── assets/
│ │
│ ├── css/
│ │ └── style.css
│ │
│ ├── docs/ screenshots and validation
│ │
│ ├── fonts/ used fonts stored locally for best performance
│ │
│ ├── images/ game's main image files
│ │
│ ├── js/
│ │ ├── ui.js
│ │ ├── levels.js
│ │ ├── game.js
│ │ └── weather.js
│ │
│ └── sounds/ sound files
│
├── index.html
│
└── README.md
Escape the reactor facility by destroying crates to clear the path.
| Action | Key |
|---|---|
| Move Up | W / ↑ |
| Move Down | S / ↓ |
| Move Left | A / ← |
| Move Right | D / → |
| Place Bomb | Space |
| Pause / Resume | P |
| Action | Points |
|---|---|
| Destroy Crate | +100 |
| Complete Level | +1000 |
| Time Bonus | Remaining Time × Bonus Multiplier |
The project was deployed using GitHub Pages.
Tested using browser developer tools and linting tools.
- Player movement
- Bomb placement
- Explosion logic
- Win condition
- Game over condition
- Weather API
- Sound system
- Theme toggle
- Leaderboard persistence
The project includes:
- Semantic HTML structure
- Keyboard navigation
- Accessible button labels
- Responsive layouts
- High-contrast theme support
Potential future features include:
- Multiple levels
- Enemy AI
- Animated sprites
- Particle effects
- Online leaderboard
- Additional power-ups
- Difficulty settings
- Touch gestures for mobile
AI tools were used throughout the development process to:
- Generate boilerplate code
- Images and favicon generation
- Assist with debugging
- Improve project structure
- Optimize UI and UX decisions
- Assist with API integration
- Review code quality
All generated code was reviewed, modified, tested, and integrated manually. AI was used as a development assistant rather than a replacement for understanding or implementing the project.
AI-generated code was not always immediately usable and required review, testing, and modification. Several issues still required manual debugging and problem-solving, such as API configuration, font loading errors, gameplay adjustments, and user interface refinements. This highlighted the importance of understanding the underlying technologies rather than relying solely on generated solutions.
Overall, AI had a positive impact on the project by accelerating development and providing guidance, while still requiring critical thinking, testing, and decision-making from the developer. The experience demonstrated that AI is most effective as a collaborative tool that supports learning and productivity rather than replacing technical understanding.
OpenWeather API
Pixabay Sound Effects
https://pixabay.com/sound-effects/
Bootstrap Icons
https://icons.getbootstrap.com/
Constantin Onisor
©2026 Nuke Reactor Escape All rights reserved