Franks laboratory

Creative coding experiments, generative art & game development with vanilla JavaScript & HTML canvas. No frameworks and no libraries. Every project is explained line by line as I write the code using just plain vanilla JavaScript & HTML5 canvas element. If you want to SUPPORT me you can use the links below and get some one my EXTENDED classes! :) https://www.udemy.com/course/learn-creative-coding-with-vanilla-javascript/?referralCode=7C560D4661C5C59262BB https://www.udemy.com/course/learn-game-development-with-javascript/?referralCode=69874A38D543D7F510F2 https://www.udemy.com/course/learn-html-canvas-pixels-particles-physics/?referralCode=F7977062A4BC964A1F5E https://www.udemy.com/course/remake-retro-games-with-javascript/?referralCode=2ACCA21F16FE78E631F7 Get Skillshare FREE for 1 month: https://www.skillshare.com/en/r/profile/Frank-Dvorak/507488567?gr_tch_ref=on&gr_trp=on

Education 7 summaries
May 11 - May 17, 2026
2 videos
The Formula Every Game Developer Needs to Know thumbnail

The Formula Every Game Developer Needs to Know

The video explains how to implement efficient circle-circle collision detection (using squared distances to avoid square roots) and uses it as the building block for many interactions in a 2D game. It then shows how to structure a data-driven, modular starter kit with separate managers for collisions, audio, images, and UI, using events to decouple systems (e.g., player damaged and enemy died) and prepare a reusable framework for future games.

00:01:39 read 00:36:05 video 10 chapters
The Math Formula Every Game Developer Needs to Know thumbnail

The Math Formula Every Game Developer Needs to Know

The video explains how to implement basic circle-based collision detection and a modular, data-driven game architecture. It covers using geometry and squared distance for collision checks, creating dedicated managers (collision, image, audio) to keep code organized, and building a layered, animated health bar driven by CSS and events. It also demonstrates wiring game events to UI updates and audio, while keeping assets data-driven and ready for expansion.

00:01:36 read 00:28:34 video 8 chapters
May 04 - May 10, 2026
1 video
Why Event Systems Change Everything thumbnail

Why Event Systems Change Everything

The video explains how directly coupling game components creates technical debt and introduces a clean solution: an event system using the observer pattern. It walks through building a lightweight event emitter in plain JavaScript, wiring it into UI, sound, and game state, and demonstrates how emitting and listening to events decouples components for scalable, flexible gameplay.

00:01:04 read 00:21:48 video 6 chapters
Apr 20 - Apr 26, 2026
1 video
I Made Enemy AI That Can Do Anything (Vanilla JavaScript) thumbnail

I Made Enemy AI That Can Do Anything (Vanilla JavaScript)

The video demonstrates building a data-driven, scalable enemy system in plain JavaScript using the strategy (composition) pattern. It shows creating independent behavior classes (seek, drift), a behavior factory, and an entity pool to swap behaviors at runtime, plus a spawning system, rendering with sprites, and a modular architecture that scales to many enemy types without hard-coding logic. Emphasis is on modularity, reset mechanics, edge spawning, and a clean separation of concerns for easy extension.

00:01:20 read 00:48:45 video 10 chapters
Apr 06 - Apr 12, 2026
1 video
How Object Pooling Fixes Game Performance thumbnail

How Object Pooling Fixes Game Performance

The video explains how object pooling improves performance in a JavaScript game by reusing objects (enemies, particles, projectiles) instead of constantly creating and destroying them. It walks through building a generic pooler with two arrays, a factory function, and rest parameters, and shows how to integrate it with an enemy manager and game loop to keep memory usage stable and frames smooth.

00:01:03 read 00:25:16 video 6 chapters
Mar 30 - Apr 05, 2026
1 video
Build a Data-Driven Enemy System in JavaScript thumbnail

Build a Data-Driven Enemy System in JavaScript

The video demonstrates building a scalable, data-driven game architecture by fully separating data from logic and using modular managers. It covers creating a robust enemy system (data-driven enemy types, an enemy manager, and object pooling), standardizing access via single points (sound, UI, and game state management), and replacing hard-coded “magic” values with centralized constants to enable easy balancing and expansion.

00:01:23 read 00:35:46 video 8 chapters
Mar 23 - Mar 29, 2026
1 video
The Right Way to Load Images and Audio in JavaScript thumbnail

The Right Way to Load Images and Audio in JavaScript

The video explains building a robust asset loading system with Promises and async/await to load images and audio in parallel, ensuring the game only starts once all assets are ready and the loading screen is shown appropriately. It covers introducing separate managers (UI, Audio, Render) to offload responsibilities from Game.js, implementing a timer UI, and refining the codebase with defensive programming and a modular architecture for a polished game experience.

00:01:32 read 00:33:37 video 10 chapters

Related Channels

Get daily AI recaps from
Franks laboratory in your inbox

Get AI-powered summaries delivered to your inbox. Save hours every week while staying fully informed.

Subscribe to Franks laboratory