<p>If you completed the challenges in the previous chapter, you likely noticed a issue: to make multiple squares, you had to duplicate your variables and code.</p>
<p>Complete games don't just have one or two objects. Even a simple level can contain hundreds of entities! Map tiles, players, enemies, NPCs, UI elements, weapons, and pickups are all individual entities. Imagine having to manually declare <code>playerX</code>, <code>playerY</code>, <code>enemyX</code>, <code>enemyY</code> for every single one of them. That is a nightmare.</p>
<p>This is where <strong>Object-Oriented Programming (OOP)</strong> and <strong>Classes</strong> come to the rescue.</p>
<h3>What is a Class in Game Development?</h3>
<p>Think of a class as a <strong>blueprint</strong>. If you want to build a house, you don't invent a new architecture from scratch every time; you use a blueprint, and build as many houses as you need from it.</p>
<p>In game development, we create a blueprint (a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">Class</a>) for a generic game object. From that single blueprint, we can generate thousands of individual objects, each with their own unique coordinates, colors, and behaviors.</p>
<h3>The Base Sprite Class</h3>
<p>In modern JavaScript (ES6+), we use the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">Class</a> keyword to create our blueprints.</p>
<p>For a 2D game, nearly every visual object needs the same basic properties: an X/Y position, a width, a height, and a method to draw itself on the canvas. Let's create a generic <code>Sprite</code> class that provides this foundation.</p>
<pre><code class="language-javascript">const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");

class Sprite {
    // The constructor fires immediately when a new object is created
    constructor(x, y, width, height, color = "black") {
        this.x = x;
        this.y = y;
        this.width = width;
        this.height = height;
        this.color = color;
    }

    // Every sprite should know how to draw itself
    draw(ctx) {
        ctx.fillStyle = this.color;
        ctx.fillRect(this.x, this.y, this.width, this.height);
    }
    
    // Placeholder for movement and physics logics
    update(dt) {
        // We will expand it later!
    }
}
</code></pre>
<p>Now, instead of writing dozens of variables, creating a new object is a single line of code using the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new">new</a> keyword:</p>
<pre><code class="language-javascript">// Instantiating our class
const player = new Sprite(50, 50, 20, 20, "blue"); 
const enemy1 = new Sprite(100, 100, 20, 20, "red");
const enemy2 = new Sprite(150, 100, 20, 20, "red");

// Drawing them
player.draw(context); 
enemy1.draw(context);
enemy2.draw(context);
</code></pre>
<h3>Inheritance: Classes Extending Classes</h3>
<p>A generic <code>Sprite</code> is great, but a Player and an Enemy behave very differently. We don't want to rewrite the X/Y coordinates and drawing logic for every specific type of character.</p>
<p>Instead, we use <strong>Inheritance</strong>. We can create a specific <code>Enemy</code> class that <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/extends">extends</a> (inherits from) our base <code>Sprite</code> class. It gets all the drawing and coordinate logic for free, but we can add unique properties like <code>health</code> or <code>attackPower</code>.</p>
<pre><code class="language-javascript">// Enemy inherits everything from Sprite
class Enemy extends Sprite {
    constructor(x, y, name, strength) {
        // 'super' calls the constructor of the parent (Sprite) class
        super(x, y, 20, 20, "red"); 
        
        // Unique Enemy properties
        this.name = name;
        this.strength = strength;
    }

    // Unique Enemy methods
    attack() {
        console.log(`\({this.name} attacks for \){this.strength} damage!`);
    }
}

// Creating an Enemy
const boss = new Enemy(200, 50, "Bug", 500);

boss.draw(context); // Inherited from Sprite!
boss.attack();      // Specific to Enemy!
</code></pre>
<h3>Managing the Chaos with Arrays</h3>
<p>We solved the blueprint problem, but manually calling <code>enemy1.draw()</code>, <code>enemy2.draw()</code>, and <code>boss.draw()</code> is still tedious.</p>
<p>To manage large groups of objects, we use <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array"><strong>Arrays</strong></a>. By pushing all our game objects into an array, we can use a loop to update and draw hundreds of enemies in just three lines of code.</p>
<pre><code class="language-javascript">const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");

// Create empty arrays to hold our entities
const players = [];
const enemies = [];

// Populate the arrays
players.push(new Sprite(10, 50, 20, 20, "green"));

// Let's spawn a row of 5 enemies using a loop!
for(let i = 0; i &lt; 5; i++) {
    let startX = i * 40; // Spaces them out horizontally
    enemies.push(new Enemy(startX, 100, "Bug", 10));
}

// --- Inside your Game Loop ---

// Using loop to update/draw everything
for (const player of players) {
    player.draw(context);
}

for (const enemy of enemies) {
    enemy.draw(context);
}
</code></pre>
<p>By combining Classes, Inheritance, and Arrays, you now have the exact architectural foundation used by professional game engines to manage massive, complex game states efficiently!</p>
<h3>Next Chapter: User Input &amp; Interactivity — Breathing Life into Our Sprites</h3>
<p>Spawning arrays of sprites is satisfying, but right now, our game world is completely static. Our player is just sitting there staring at a row of unmoving enemies.</p>
<p>In the next chapter, we are going to hook up our keyboard to the game loop. We will learn how to capture user input state efficiently, map keys to velocities, and finally utilize that <code>update(dt)</code> function we left behind to make our player zip smoothly across the screen! See you there.</p>


https://sudarshanrai.hashnode.dev/03-managing-game-entities-with-objects-and-classes

03 - Managing Game Entities with Objects and Classes

<h2>The Game Loop</h2>
<blockquote>
<p><strong>Note:</strong> <em>While the architecture discussed here is a classic and widely accepted foundation, it is not the only way to build a game. Software engineering offers many patterns, and as your games grow in complexity, your loop architecture will likely evolve.</em></p>
</blockquote>
<p>At the heart of every video game—from a retro 2D platformer to a massive 3D open-world RPG—is a single, relentless engine: <strong>The Game Loop</strong>.</p>
<p>Strip away the graphics and audio, and a game is essentially an infinite loop. On every iteration, it performs three core tasks at a highly controlled frequency:</p>
<ul>
<li><p><strong>Processes Input</strong> (What did the player do?)</p>
</li>
<li><p><strong>Updates Game Logic</strong> (How does the world react?)</p>
</li>
<li><p><strong>Renders the Scene</strong> (What does the player see?)</p>
</li>
</ul>
<p>While complex game engines separate these systems across multiple CPU threads using concurrent programming (mutexes, workers, and promises), JavaScript's single-threaded, asynchronous nature is incredibly capable. When leveraged correctly, JavaScript can run highly performant, buttery-smooth games right in your web browser.</p>
<h3>Loop Life Cycle</h3>
<p>In its most abstract form, the life cycle of a game loop looks like this:</p>
<pre><code class="language-javascript">let gameIsRunning = true;

function gameLoop() {
    if (!gameIsRunning) return;

    processInput();
    updateLogic();
    render();

    // Schedule the next frame
    requestAnimationFrame(gameLoop);
}
</code></pre>
<h4>1. Process Input (<code>processInput</code>)</h4>
<p>This phase gathers data from any peripheral device connected to the user's system—keyboards, mice, gamepads, or touchscreens.</p>
<p>Historically, developers manually managed <strong>Event Queues</strong> to store and poll hardware events. Today, modern operating systems and web APIs abstract much of this complexity away.</p>
<p>In browser-based game development, we typically use a <strong>Key Manager</strong> pattern. Instead of executing game actions immediately when a key is pressed, we simply record the state of the keyboard in a global object. The <code>updateLogic</code> phase then reads this object to decide how the player should move.</p>
<pre><code class="language-javascript">const keys = {};

window.addEventListener('keydown', (e) =&gt; { 
    keys[e.code] = true; 
});
window.addEventListener('keyup', (e) =&gt; { 
    keys[e.code] = false; 
})
</code></pre>
<h4>2. Update Logic (<code>updateLogic</code>)</h4>
<p>This is the brain of your game. It is where your mathematics, physics, AI, and rules live.</p>
<p>During the update phase, you calculate character movements, check for collisions, update animations, track scores, and evaluate enemy behavior. The input gathered in the previous step is consumed here. For example, if your Key Manager says <code>keys['ArrowRight']</code> is <code>true</code>, the update function increments the player's X-coordinate.</p>
<h4>Render</h4>
<p>The rendering phase handles drawing your game objects onto the screen (usually via a HTML5 <code>&lt;canvas&gt;</code> API or WebGL).</p>
<p>A critical rule of game architecture is to <strong>never mix logic updates with rendering</strong>. Rendering should only ever happen <em>after</em> the entire game state has been updated for that frame. If you attempt to draw objects while they are still calculating their positions, you will introduce visual bugs, stuttering, and screen tearing. Rendering is simply a visual snapshot of your completed logic update.</p>
<h3>The Crucial Element: Time &amp; Frame Capping</h3>
<p>If you run the primitive <code>while(gameIsRunning)</code> loop directly in JavaScript, it will freeze your browser tab. It executes as fast as the CPU allows.</p>
<p>This introduces a massive problem: <strong>Hardware Variance</strong>. A loop running uncapped on a 60Hz office laptop might execute 60 times a second, while on a 240Hz gaming rig, it might execute 240 times a second. Without managing time, your game characters would move <strong>four times faster</strong> on the gaming machine!</p>
<p>To fix this, games use a concept called <strong>Delta Time</strong> . Delta Time is the exact amount of time it took for the previous frame to finish executing.</p>
<p>Instead of moving a player by a fixed pixel amount per frame:</p>
<pre><code class="language-javascript">// Dangerous: Speed is dependent on frame rate
player.x += player.speed
</code></pre>
<p>We multiply the speed by Delta Time to make movement dependent on real world time:</p>
<pre><code class="language-javascript">// Safe: Speed is consistent regardless of hardware performance
player.x += player.speed * deltaTime;
</code></pre>
<h3>Implementing a Modern Canvas Loop</h3>
<p>In modern web development, we no longer use <code>setInterval</code> or <code>setTimeout</code> for games because they don't sync with the monitor's refresh rate. Instead, we use <code>requestAnimationFrame</code>. This native browser API pauses when the user switches tabs to save battery, and automatically targets a smooth 60 frames per second (or matches the monitor's native refresh rate).</p>
<p>Here is a robust, production-ready implementation of a time-aware game loop in JavaScript:</p>
<p><a class="embed-card" href="https://codepen.io/sudarshanrai/embed/BaJrxdb?default-tab=js%2Cresult&amp;editable=true">https://codepen.io/sudarshanrai/embed/BaJrxdb?default-tab=js%2Cresult&amp;editable=true</a></p>

<h3>Challenges: Put Your Knowledge to the Test</h3>
<p>To help anchor these core concepts, try modifying the code snippet above to complete these tasks:</p>
<ol>
<li><p><strong>Reverse it:</strong> Alter the logic so the object moves backward autonomously.</p>
</li>
<li><p><strong>Styling:</strong> Change the rendering function so it only draws the stroke/border of the player, rather than a solid filled square.</p>
</li>
<li><p><strong>Screen Boundaries:</strong> Constraint the player’s movement so they cannot cross outside the boundaries of the canvas width and height.</p>
</li>
<li><p><strong>Elastic Physics (The Bounce):</strong> Combine boundary constraints with direction manipulation to make the square bounce back and forth automatically whenever it hits a edge.</p>
</li>
<li><p><strong>Trigonometric Movement:</strong> Use <code>Math.sin()</code> or <code>Math.cos()</code> inside your update logic using accumulated time to make the square move smoothly in circles or ellipses.</p>
</li>
<li><p><strong>Multiplicity:</strong> Add a second game object array, updating and rendering both independently inside the single loop lifecycle.</p>
</li>
</ol>
<h3>What's Next?</h3>
<p>Manually writing code for individual variables becomes incredibly messy when dealing with dozens of elements. In the next chapter, we will solve this bottleneck by introducing <strong>Object-Oriented Programming (OOP) and Classes</strong>, enabling us to spawn and manage hundreds of distinct game objects instantly.</p>


https://sudarshanrai.hashnode.dev/02-game-loops

02 Game Loops

<h2 id="heading-what-is-canvas">What is Canvas?</h2>
<blockquote>
<p>The <strong>Canvas API</strong> provides a means for drawing graphics via <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript">JavaScript</a> and the <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML">HTML</a>  <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas"><code>&lt;canvas&gt;</code></a> element. Among other things, it can be used for animation, game graphics, data visualization, photo manipulation, and real-time video processing. <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API">Read More...</a></p>
</blockquote>
<h3 id="heading-basic-setup">Basic Setup</h3>
<p>You must retrieve the canvas element via JavaScript, after the DOM tree has been created. Usually, multiple canvas tags are used to boost performance. To start drawing, input the necessary content as follows:</p>
<pre><code class="lang-js">&lt;!--html--&gt;
<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">canvas</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"canvas"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">canvas</span>&gt;</span></span>
</code></pre>
<pre><code class="lang-Js"><span class="hljs-comment">// JavaScript  </span>
<span class="hljs-keyword">var</span> canvas = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">"canvas"</span>);
<span class="hljs-keyword">var</span> context = canvas.getContext(<span class="hljs-string">"2d"</span>);
</code></pre>
<p>We draw using the <strong>"context"</strong> object. Take that as our "paint brush" for the canvas.</p>
<h3 id="heading-coordinates-in-canvas">Coordinates in canvas</h3>
<p>This section is fairly important to know and keep in mind!
Drawing coordinates on computers is not the same as usual cartesian coordinates in math. (0, 0) is not in the center, it is located at the top left of the window. Anything above and below the window's width and height will exist and be sent to be drawn, but not be visible! Note how that is a performance problem.</p>
<p><strong><em>X</em></strong> positioning is LEFT (negative) and RIGHT (positive) - also COLUMNS and WIDTH .
<strong><em>Y</em></strong> positioning is UP (negative) and DOWN (positive) - also ROWS and HEIGHT.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1649269759647/8je4nUFTK.png" alt="javascript-game-development.png" />
Play with the numbers below (line number 4 in codepen ) and try all kinds of numbers to get the idea! (x pos, y pos, width, height)</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1649273810097/KIvh62I0O.png" alt="Group 2.png" /></p>
<div class="embed-wrapper"><div class="embed-loading"><div class="loadingRow"></div><div class="loadingRow"></div></div><a class="embed-card" href="https://codepen.io/sudarshanrai/embed/xxpWZNj?default-tab=js%2Cresult&amp;editable=true">https://codepen.io/sudarshanrai/embed/xxpWZNj?default-tab=js%2Cresult&amp;editable=true</a></div>
<h3 id="heading-basic-canvas-features">Basic Canvas Features</h3>
<p>Canvas can draw a rectangle, an arc, an ellipse, a line, and paths. A square would be a rectangle and a circle would be an arc. Other things we can do on canvas are scale, rotate, translate, transform, composite, style lines, strokes, fill, shadows, gradients, text, pixel manipulation, draw images, use CSS filters, use some CSS in general, and other things I can't recall off the top of my head.</p>
<p>There are 2 types of drawing: fill (which fills the shape with a color) and stroke (which only has an outline, or border). These can be mixed for outlined shapes. Stroke is great for checking and debugging collision bounds! It's not going to be used, but anything other than rectangles requires a "path" (shown below).</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1649320128646/Klgrf9-L-.png" alt="Frame 15.png" /></p>
<p>Fool around with the code below!</p>
<div class="embed-wrapper"><div class="embed-loading"><div class="loadingRow"></div><div class="loadingRow"></div></div><a class="embed-card" href="https://codepen.io/sudarshanrai/embed/WNdzXpJ?default-tab=js%2Cresult&amp;editable=true">https://codepen.io/sudarshanrai/embed/WNdzXpJ?default-tab=js%2Cresult&amp;editable=true</a></div>
<h3 id="heading-next-chapter">Next Chapter</h3>
<p>Next time, we will look at a brief intro to game loops and start animating. Thank you, and I'll see you later.</p>


https://sudarshanrai.hashnode.dev/01-html-5-canvas-for-games

01 HTML 5 Canvas for Games

<h3>01- What to Expect &amp; Setting Up Your Workspace</h3>
<p>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.</p>
<p>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:</p>
<ul>
<li><p><strong>Functions &amp; Arrow Functions</strong></p>
</li>
<li><p><strong>ES6 Classes &amp; Objects</strong></p>
</li>
<li><p><strong>Basic Loops (</strong><code>for</code><strong>,</strong> <code>while</code><strong>) &amp; Conditionals</strong></p>
</li>
</ul>
<p>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.</p>
<h3>02- The Minimalist Workspace</h3>
<p>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.</p>
<ol>
<li><p><strong>The Editor:</strong> I'll be using <a href="https://code.visualstudio.com/"><strong>Visual Studio Code (VS Code)</strong></a> throughout this guide, but use whatever makes you happy.</p>
</li>
<li><p><strong>The Browser:</strong> 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.</p>
</li>
</ol>
<p>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.</p>
<h3>03- Organizing the Chaos: Project File Structure</h3>
<p>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.</p>
<p>Establishing a clean directory structure early keeps your code modular and scalable. Here is the blueprint we will( I use ) use for game projects:</p>
<img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1649267552072/aRb00JG7H.jpg" alt="file_structure_gokndq.jpg" style="display:block;margin:0 auto" />

<ul>
<li><p><code>/assets</code><strong>:</strong> This acts as our repository for raw game resources. We separate visual media (<code>/images</code>) from audio (<code>/sounds</code>) so our scripts know exactly where to fetch resources.</p>
</li>
<li><p><code>/src</code><strong>:</strong> This is where the magic happens. Instead of writing a massive 2,000-line file, we modularize our codebase. Your main orchestrator lives in <code>main.js</code>, while utility functions and your core entity classes live in their own dedicated files.</p>
</li>
<li><p><code>index.html</code><strong>:</strong> The entry point that mounts our canvas element to the DOM and bootstraps our entry script.</p>
</li>
</ul>
<p>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.</p>
<h3>Next Chapter: Navigating the Graphics Plane &amp; The HTML5 Canvas</h3>
<p>Now that your workspace is organized, it's time to actually render something on screen. In the next chapter, we will introduce the HTML5 <code>&lt;canvas&gt;</code> 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!</p>


https://sudarshanrai.hashnode.dev/00-introduction

Blog

Thoughts on software engineering & web development

03 - Managing Game Entities with Objects and Classes

02 Game Loops

01 HTML 5 Canvas for Games

00 Introduction