01- What to Expect & Setting Up Your Workspace
Welcome to the starting line! Before we dive into the matrix of rendering pipelines and collision physics, we need to make sure your toolkit is ready.
This series is designed for developers who already have a basic grasp of JavaScript. We won't be spending time covering fundamental programming concepts. To get the most out of these chapters, you should be comfortable with:
Functions & Arrow Functions
ES6 Classes & Objects
Basic Loops (
for,while) & Conditionals
If you're brand new to JS, I highly recommend brushing up on those core concepts first. If you're already writing code, you are good to go.
02- The Minimalist Workspace
You don’t need an incredibly complex setup or a massive game engine like Unity or Unreal to build browser games. All you need is a browser and a text editor.
The Editor: I'll be using Visual Studio Code (VS Code) throughout this guide, but use whatever makes you happy.
The Browser: Google Chrome or Firefox are highly recommended. Their built-in developer tools—specifically the performance and rendering profiling panels—are invaluable for debugging frame drops and canvas stuttering later on.
What about game assets like pixel art, sprites, and sound effects? While professional game designers use heavy-duty software like Aseprite, Photoshop, or FL Studio to craft assets, you don't need to worry about that right now. We will be using simple geometric shapes or free placeholder assets while we learn the engine architecture.
03- Organizing the Chaos: Project File Structure
As a game grows, the number of files can explode exponentially. If you throw your audio tracks, player sprites, tilemaps, and source code all into a single root folder, you will lose your mind by chapter four.
Establishing a clean directory structure early keeps your code modular and scalable. Here is the blueprint we will( I use ) use for game projects:
/assets: This acts as our repository for raw game resources. We separate visual media (/images) from audio (/sounds) so our scripts know exactly where to fetch resources./src: This is where the magic happens. Instead of writing a massive 2,000-line file, we modularize our codebase. Your main orchestrator lives inmain.js, while utility functions and your core entity classes live in their own dedicated files.index.html: The entry point that mounts our canvas element to the DOM and bootstraps our entry script.
Set up this folder structure on your local machine right now, because in the next section, we are throwing open the doors to the canvas pipeline.
Next Chapter: Navigating the Graphics Plane & The HTML5 Canvas
Now that your workspace is organized, it's time to actually render something on screen. In the next chapter, we will introduce the HTML5 <canvas> element, explain how the 2D rendering context handles coordinate systems (hint: Y doesn't go the direction you think it does!), and draw our very first graphic primitives. See you there!