My very own WebOS
- 3 Devlogs
- 3 Total hours
A retro-themed operating system running entirely in the browser. Built with vanilla HTML, CSS, and JavaScript — no frameworks, no build tools.
A retro-themed operating system running entirely in the browser. Built with vanilla HTML, CSS, and JavaScript — no frameworks, no build tools.
RetroOS Dev Log #3 — Game Fixes & ImprovementsAll 7 games got a round of bug fixes, a tutorial system, and event listener cleanup.Event Listener Leaks FixedEvery game was leaking keydown and setInterval handlers when the window closed. If you opened Snake, played a bit, closed it, then opened it again — you’d have two game loops running simultaneously. Fixed by adding proper destroy() methods to every game that clean up intervals and remove keyboard listeners on window close.Tutorial SystemAdded a first-time “HOW TO PLAY” overlay for each game. Shows control instructions when you open a game for the first time, with a “GOT IT!” button. Uses localStorage to remember which tutorials you’ve seen, so they only appear once. Fixed a bug where the GOT IT button was replacing the entire overlay innerHTML instead of appending — the tutorial layer now sits on top of the game overlay without destroying it.Game-Specific FixesTetris — Fixed a speed scaling bug caused by a const closure in the interval callback. Level progression now correctly adjusts speed (50ms at max, scaling down from 500ms). Hard drop scoring fixed.Pong — Fixed keyboard controls bleeding between windows. Added focus management so arrow keys don’t scroll the page. Prevented default key behavior during gameplay. AI paddle smoothing adjusted for more natural movement.Snake — Fixed game-over overlay not rendering properly. Cleaned up interval cleanup on close. Speed increase now properly floors at 60ms minimum.Breakout — Fixed ball getting stuck in infinite bounce loops at edge cases. Brick collision now uses minimum overlap detection for correct directional bounce. Side panel layout fixed for smaller screens.Minesweeper — Fixed first-click mine placement to guarantee a safe 3x3 starting area. Win detection now correctly counts unrevealed cells vs mine count.2048 — Fixed tile merge logic preventing double-merges in a single move. Win overlay now shows without blocking continued play.Flappy Bird — Fixed pipe spawning overlap on fast refresh. Added state machine to prevent movement before first flap. Touch event support added for mobile.
RetroOS Dev Log #2 — The AppsAfter getting the core OS shell running, it was time to fill it with actual software. Here’s everything that went in.Music PlayerAdded a background music system with 3 chiptune tracks (all CC0 licensed). Auto-loops, auto-advances to the next track on end, and gracefully skips broken files. Volume sits at 0.3 so it doesn’t fight with the sound effects. Toggleable from Settings or via Ctrl+M.TerminalBuilt a full command-line emulator with 11 commands. Supports command history (arrow keys), Ctrl+L to clear, and auto-scroll. Commands include the basics (help, clear, echo, date, whoami) plus some fun ones:ls / cat — Virtual filesystem with 4 readable filescolor — Change terminal text color (8 options)calc — Evaluate math expressions inlinefortune — Random quote from a pool of 8neofetch — ASCII art logo with system info (resolution, uptime since boot)shutdown — Triggers the OS shutdown sequenceNotepadSimple text editor with word wrap toggle, tab key support (inserts 2 spaces), and a statusbar showing character/line count. Every keystroke plays a typing sound for that retro feel.PaintPixel art canvas with a 24-color palette and 3 brush sizes. Drawing uses line interpolation so fast strokes don’t leave gaps. Includes eraser, fill, clear, and save as PNG. Touch support for tablets. Everything renders pixel-perfect with imageSmoothingEnabled = false.CalculatorStandard calculator with chained operations. Color-coded buttons — green for functions, blue for operators, purple for equals. Handles decimals, negation, percent, and division by zero gracefully.SettingsThe theme engine. 6 CRT color themes (Green, Amber, Blue, Cyan, Red, White) that dynamically restyle the entire OS. 5 toggle switches for scanlines, flicker, curvature, glow, and music. Music section shows the current track with a next button. All settings persist to localStorage.7 GamesEvery game renders on , handles keyboard input, and cleans up properly when the window closes.Snake — Classic grid-based movement. Speed ramps up as you eat. Head drawn with eyes.Tetris — Full implementation with rotation, wall-kicks, ghost piece, next-piece preview, scoring (100/300/500/800 per lines cleared × level), and level progression.Pong — Ball physics with increasing speed per hit. 2-player (W/S vs ↑/↓) or vs AI with smooth interpolation chasing. First to 7 wins.Breakout — 6 rows of colored bricks, mouse/keyboard/touch paddle, side panel with lives and score. Brick collision uses minimum overlap detection for correct bounce direction.Minesweeper — 12×12 grid with 20 mines. Safe first click guaranteed. Recursive flood-fill on zero cells. Right-click to flag.2048 — Slide and merge tiles. Handles all 4 directions via transpose/reverse tricks. Win at 2048 but game continues. Dynamic font scaling for large numbers.Flappy Bird — Gravity simulation with pipe scrolling. Space/click/tap to flap. Yellow bird with beak and eye. State machine prevents movement before first flap.App-Specific StylingAdded comprehensive CSS for all 12 apps — terminal output colors, notepad toolbar, paint swatches, game canvas overlays, calculator grid with color-coded buttons, custom settings toggles, clock widget positioning, and breakout’s side panel layout.What’s in: 12 apps, 7 games, 1 music player, full theme system Stack: Still zero dependencies. All vanilla.
RetroOS Dev Log #1 — The First HourBuilt a retro-themed OS that runs in the browser. In one hour, got the core shell running: CRT monitor effects (scanlines, flicker, phosphor glow), a BIOS boot sequence, draggable/resizable windows with edge-snapping, 4 virtual desktops, taskbar with start menu, keyboard shortcuts, and localStorage persistence. All vanilla HTML/CSS/JS — zero dependencies.The full version ships with 12 apps (terminal, notepad, paint, calculator, 7 games), but the first hour was all about making the OS feel real. Every window opens with a sound effect, the boot screen counts up memory like it’s 1995, and the whole thing glows green like a CRT monitor. More apps incoming.Stack: Vanilla JS, CSS3, Web Audio API, Canvas Repo: https://github.com/shritej-koneru/WebOS