Build a Memory Card Matching Game with HTML5 Canvas and JavaScript
Build a shuffled deck, a two-card state machine, Canvas rendering, and keyboard controls using the working Memory Match project.
HoloViral articles
Game development blog
Canvas, animation, input, and game rules, explained through the projects on this site.
35 published articles about building, testing, and sharing browser games.
Shape Short Game Sounds with Envelopes and Cleanup
A synthesized game effect needs more than an oscillator frequency.
Understand Canvas Drawing State and Scoped Transforms
A Canvas context remembers more than the pixels you just drew.
Keep Canvas Game Coordinates Separate from Display Size
Changing a canvas from 960 pixels wide to 390 pixels wide sounds like a responsive layout change.
Map Pointer Coordinates onto a Responsive Canvas
A collector that follows your finger on a desktop can jump away from it on a phone.
Test Circle–Rectangle Contact for a Collector Paddle
A more precise collision test is useful when the visual corners of a paddle matter.
Read the Collector Collision Band One Condition at a Time
Gem Collector does not use a physics library.
Deploy Plain HTML Game Projects on Cloudflare Pages
A plain HTML site does not need a framework build directory merely because the hosting dashboard says “build output.” On Cloudflare Pages, the directory containing your finished HTML and assets can be the upload directory itself.
Treat Game Difficulty Settings as Reviewable Data
A difficulty selector becomes hard to maintain when every option is a separate game page with a few constants changed.
Shuffle a Memory Card Deck with Fisher–Yates
Randomizing a memory board is an algorithm problem before it is a visual one.
Introduce Fixed Simulation Steps with Bounded Catch-Up
The shared HoloViral loop advances each engine once per animation callback using a capped variable delta.
Update a Game HUD without Announcing Every Frame
A game's internal state can change every frame without requiring every number to be announced or every label to be rebuilt.
Writing a Simple Game Loop with requestAnimationFrame
Use the Gem Collector engine to build a delta-time loop with safe pause, restart, input, spawning, and collision behavior.
Use Held-Key State for Continuous Game Movement
Continuous movement should depend on how long a direction is held, not how frequently the operating system repeats keydown events.
Draw a Sharper Canvas on High-Density Screens
A canvas can have correct proportions and still look softer than nearby text.
Add Keyboard Controls to a Canvas Memory Board
Drawing a button-shaped rectangle on Canvas does not create a keyboard-accessible button.
Model a Two-Card Turn as a Small State Machine
A memory game does not need a large state-machine library to benefit from explicit states.
Handle Card Mismatch Delays without Stale Timeouts
A delayed card flip is an easy place to introduce a stale callback.
Make a Racer Change One Lane per Key Press
Holding an arrow key should not send the car repeatedly across all three lanes.
Package a Browser Game as a Runnable Source Download
A source download is useful only if it contains everything required to run the example.
Pause and Resume an Animation Loop without a Jump
The most visible pause bug is a large jump on resume.
Use Pointer Capture for Reliable Touch Controls
A movement button can work perfectly until a finger slides outside it.
Profile a Small Canvas Game before Optimizing It
A small Canvas game can feel uneven even when its source looks simple.
Separate Racing Distance from Coin Bonuses
Lane Racer's counter is labeled progress rather than pure distance because collecting a coin increases the same value that grows with driving time.
Remove Consumed Objects before They Score Twice
A gem that touches the paddle remains near it for more than one animation frame.
Restart a JavaScript Game without Carrying over Old State
Restart is more than setting score to zero.
Write Repeatable Engine Tests with Seeded Randomness
A failing collision test is difficult to debug if the next run creates different objects.
Choose between Simulation Time and a Wall-Clock Deadline
Gem Collector displays a 75-second limit, but under a severe rendering slowdown a round can last longer than 75 seconds on a stopwatch.
Define What Happens When Win and Loss Conditions Coincide
A collector catches its final required gem in the same update that a hazard removes its last life.
Move a Timing Target with a Sine Wave
Timing Tap moves its ring without storing a separate horizontal velocity or bouncing it off invisible walls.
Preserve the Remainder in a Game Spawn Timer
The collector creates an object when its spawn timer crosses an interval, then resets the timer to zero.
Interpret a Swipe as One Lane-Change Command
A swipe is not just a click with a large coordinate.
Test an Animation Loop without Waiting in Real Time
Waiting for real animation frames makes scheduler tests slow and unreliable.
Define and Test the Boundaries of a Timing Window
The highlighted zone in Timing Tap is a promise about a rule.
Start Web Audio Effects from an Explicit User Action
The four game demos are silent by default.