Protect The Square - Instructions

About Page

Protect The Square is a small canvas game with deliberately rich testing possibilities. Your green square is vulnerable. Red squares move towards it. Clicking a red square destroys it, increases the score, and spawns more red squares.

The game is useful for exploring timing, game state, browser developer tools, and JavaScript manipulation.

Use it to practice:

• modelling score rules
• observing dynamic movement
• testing win and fail conditions
• exploring timing sensitivity
• inspecting JavaScript state and score handling

Exploratory Testing

Play several short sessions and record what triggers score changes or game-over states. Then inspect the implementation to compare your model with the code.

Try these exercises:

• figure out the rules by playing the game without reading the source
• identify obvious bugs and possible improvements
• list risks that might justify more testing
• try the game on a small screen or mobile browser and note what changes
• compare what you see on the canvas with the state stored in JavaScript
• read the JavaScript and identify variables or functions that affect score, movement, level changes, and game over

Technical Exercises

These exercises work well after you have played the game normally.

• Use the browser developer tools to inspect the canvas and surrounding DOM.
• Resize the canvas in the DOM and observe whether it changes the game rules or only changes what you can see.
• Find where the score is stored in JavaScript.
• Investigate whether you can give yourself a high score from the console.
• Investigate whether you can give yourself more time or prevent the green square from dying.
• Look for hidden or unused scoring display functions and try to enable them.
• Look for the experimental level data and consider how you would enable it.
• Try changing enemy speed, enemy size, or the game timer from the console.
• Add a small feature from the console, such as keyboard movement, a smart bomb, a proximity bomb, or a teleport action.
• Consider packaging a useful console change as a bookmarklet so you can replay the experiment.

Useful implementation names to inspect include baddiesKilled, baddies, homeSquare, currentLevels, experimentalLevels, showScore, showScoreInHTML, showScoreMinterStyle, killIfHit, movementStrategies, and zapThisPosition.

Testing Notes

• Canvas games can make testing feel opaque because the visible screen is not made of separate DOM elements.
• The state still exists in JavaScript memory, so technical testing can inspect and manipulate it.
• Anything running in the browser can be changed by the user; client-side state should not be trusted in a real client-server application.
• Simple rules can still create complex behaviour, especially when timing, spawning, movement, and collision rules interact.
• Technical understanding can reduce risk because you can decide what needs testing, what the browser already provides, and what behaviour belongs to the application code.

Online Course

For a guided walkthrough, see the Patreon exclusive course Protect The Square - Technical Web Testing.

The course uses this game as a practical introduction to technical web testing. It covers using browser developer tools, reading HTML and JavaScript, inspecting the DOM, executing JavaScript from the console, changing front-end state while the app runs, overriding functions, and adding new behaviour in the browser.