An immersive, interactive web-based narrative game built with pure Vanilla web technologies.
Step into the cockpit of Grendizer, make critical decisions, manage your resources, and defend Earth against the Vega forces.
- 🔒 Authentication System: LocalStorage-based user registration and login. Your profile, high scores, and completed missions are saved locally on your browser.
- 📖 Interactive Narrative Engine: A branching storyline where every choice matters. Certain choices require specific amounts of energy or items, and each decision impacts your health, energy, and score.
- 📱 Fully Responsive UI: A premium, glassmorphism-inspired design that automatically adapts to look perfect on desktops, tablets, and mobile phones. Custom scrollbars, flexible grids, and mobile-optimized HUD.
- 🔊 Dynamic Audio & Visuals:
- Custom particle engine (stars, warp speed, explosions).
- CSS-based entity art and animations (hovering ships, lasers).
- Dynamic background images that shift based on the current scene.
- Screen shakes, glitch effects, and colored flashes for taking damage or triggering explosions.
- Synchronized sound effects for typing, clicking, lasers, explosions, and power-ups.
- 💊 HUD & Inventory System: Real-time tracking of Health and Energy levels. Use in-game boosters (Repair Kits and Energy Cells) strategically from your inventory to survive.
No build step or server is required! This project is built using purely Vanilla HTML, CSS, and JavaScript.
- Clone the repository:
git clone https://github.com/ProMoath/grendizer-space-epic.git
- Navigate to the project directory:
cd grendizer-space-epic - Open
index.htmlin any modern web browser (Chrome, Edge, Firefox, Safari).- Optional but recommended: Use a local development server like Live Server in VS Code for the best experience.
| Technology | Usage |
|---|---|
| HTML5 | Semantic structure & Canvas element |
| CSS3 | Custom Properties, Flexbox, Grid, Animations, Glassmorphism |
| Vanilla JavaScript (ES6+) | Game logic, State management, DOM manipulation |
| Web Audio API | Procedural sound effects generation |
| Canvas API | Particle system & starfield rendering |
| LocalStorage API | User authentication & progress persistence |
Zero Dependencies — No frameworks. No libraries (except Font Awesome for icons and Google Fonts for typography).
├── index.html # Main HTML structure and UI containers
├── style.css # Master stylesheet (Glassmorphism, Animations, Responsive rules)
└── js/
├── engine.js # Main game loop, state management, and UI controller
├── story.js # The branching narrative data and nodes
├── particles.js # Custom canvas particle system (stars, explosions)
└── audio.js # Audio controller for procedural sound effects
| Resource | Icon | Description |
|---|---|---|
| Health | ❤️ | Starts at 100%. Taking damage reduces it. If it reaches 0%, the mission fails. |
| Energy | ⚡ | Starts at 100%. Certain powerful actions or evasive maneuvers require and consume energy. |
| Score | 🎯 | Earned by making successful tactical decisions. Try to reach the "Legend" rank! |
| Repair Kit | 🔧 | Restores 50% Health. Use strategically from your inventory. |
| Energy Cell | 🔋 | Restores 50% Energy. Use strategically from your inventory. |
As a back-end developer transitioning to full-stack, I built this project to:
- Strengthen Vanilla JavaScript before diving deep into React and Node.js
- Practice state management without relying on frameworks (Redux, Context API)
- Understand front-end architecture — DOM manipulation, event handling, CSS animations
- Explore browser APIs — Canvas, Web Audio, LocalStorage — which are the foundation of modern web development
┌─────────────────────────────────────────────┐
│ 👤 My Role │
│ • Designed the game mechanics & story tree │
│ • Made all architectural decisions │
│ • Directed the AI on technical specs │
│ • Reviewed every line of generated code │
│ • Identified bugs and specified fixes │
│ • Ensured responsive design quality │
└─────────────────────────────────────────────┘
│
│ Directs & Reviews
▼
┌─────────────────────────────────────────────┐
│ 🤖 AI Assistant (Code Implementation) │
│ • Generated code based on my specifications │
│ • Applied fixes based on my directions │
│ • Optimized responsive breakpoints │
└─────────────────────────────────────────────┘
- Application state management (similar to session/data handling in Laravel)
- Authentication logic (Register, Login, Session persistence)
- CRUD operations (LocalStorage as a client-side database)
- Data structure design (Story nodes, Inventory system)
- Vanilla JavaScript DOM manipulation (preparation for React's virtual DOM concepts)
- CSS Architecture — Custom Properties, Animations, Responsive Design
- Web APIs — Canvas API, Web Audio API, LocalStorage API
- Event-driven programming in the browser
- Web Audio API (
audio.js): I understand what each function does, but the deep details of oscillators and audio scheduling are part of my current learning. - Canvas performance optimization: Memory management for particle systems.
Transparency Note: Parts of the audio engine were implemented by AI under my direction. I am currently studying these components to achieve 100% deep understanding. This is a learning project, and this README reflects my honest assessment of where I am in my journey.
| Skill | How I Used It Here | Relevance |
|-------|-------------------|-----------|
| **State Management** | Game state (health, energy, score, inventory) | Directly applicable to React state / Redux |
| **API-like Logic** | Story data as JSON objects, CRUD operations | Same logic patterns as Laravel APIs |
| **Authentication** | LocalStorage-based login/register | Same concepts as JWT/session auth |
| **Responsive Design** | Mobile-first CSS with breakpoints | Essential for any front-end role |
| **Vanilla JavaScript** | ES6+ Classes, Promises, Event Loop | Foundation before React/Node |
[Moath Abdu]
- 💻 Back-End Developer (Laravel)
- 🌱 Currently expanding to Full-Stack (Learning: React & Node.js)
- ⚡ Building side projects to deepen JavaScript fundamentals
Current Stack:
- Back-End: Laravel (PHP) ██████████░░░░ Experienced
- Front-End: React ██████░░░░░░░░ Learning
- Back-End: Node.js █░░░░░░░░░░░░░ Learning
- Vanilla JS: ███████░░░░░░░ Strengthening
"I may not have written every line manually, but I understand every function's purpose. And what I don't fully understand yet, I'm actively learning."
Contributions, issues, and feature requests are welcome! Feel free to check the issues page.
This project is licensed under the MIT License. See the LICENSE file for details.
Copyright © 2025 Moath Abdu
⭐ If you liked this project, please give it a star!
Built with curiosity. Directed by a human. Implemented with AI assistance.