Day 100 of Learning MERN Stack

#javascript #programming #webdev #opensource

Hello Dev Community! 👋

It is officially DAY 100 of my 100-day full-stack and backend engineering marathon! 🎯💯 We have officially hit the legendary century mark! Instead of just writing a theoretical wrap-up post, I decided to celebrate this massive milestone by launching a premium, multi-day game development project: Building a classic Flappy Bird Clone ("Bird Hurdle") using Pure Vanilla HTML, CSS, and JavaScript! 🎮✨

To ensure production-grade optimization, I am partitioning this build across two distinct deployment segments:

Day 100 (Today): Layout architecture, element design pipeline, positioning frameworks, and scoreboard status setups.
Day 101 (Tomorrow): Game loops, gravity physics computations, obstacle spawning intervals, and boundary collision detection.

🧠 Breaking Down the Day 100 UI & Architecture Setup

As compiled in my local browser preview inside "Screenshot (225).jpg", today was all about creating the structural layout engine for a 2D side-scroller:

1. Vector Layout & Asset Pipeline

Positioned the core player element (the bird) relative to the main viewport wrapper, preparing its coordinate variables ($X, Y$) for real-time manipulation tomorrow.
Designed the classic green hurdle pipes, configuring structural pairs with specific gap ratios to ensure fair, algorithmic gameplay paths later.

2. Dual-Panel Component Layout

The Game Canvas: A beautiful wide aspect-ratio window rendering a scrolling sky backdrop and ground markers.
The Control Room Dashboard: As displayed in "Screenshot (225).jpg", I engineered a dedicated status grid displaying the Game Title, a real-time responsive Score : 0 text counter wrapper, and a dynamic state monitor labeled Game Start.

💡 The Architectural Lesson: Layout Foundations Precede Logical Loops

Many developers rush into binding intervals and rendering velocities before their underlying layout blocks are mathematically consistent. By locking in relative coordinates, explicit sizing vectors, and clean CSS flex/grid boundary panels today, tomorrow's JavaScript logic will simply have to update simple numeric offsets without breaking the screen layout!

🎯 Target Milestones for Tomorrow (Day 101)

The journey goes beyond the century mark to finish this epic project:

Coding the Asynchronous Game Loop Engine using requestAnimationFrame() for absolute smooth rendering.
Implementing gravity vectors and bounding-box collision logic to calculate dynamic scores!

💬 Let's Connect!

To all software engineers: When building interactive 2D components in browser sandboxes, do you lean toward native HTML div manipulation combined with CSS positions, or do you prefer working exclusively with HTML5 Canvas layers? Let's discuss optimization below!

My active solution archive updates daily on GitHub!
[Links in the Comments]

100 days of absolute grit, evolution, and code. The foundation is unshakeable! 🚀