Coloured Square Changing Game - Instructions

About Page

This game adds changing state to the coloured-square interaction.

Use it to practice:

• observing dynamic changes
• modelling state transitions
• checking timing assumptions
• inspecting JavaScript state
• identifying inconsistent game rules

Exploratory Testing

Take notes in a simple action-result table. Dynamic behaviour is easier to reason about when you capture the sequence of states.

DevTools Exercises

Use DevTools to slow the game down, expose hidden controls, and inspect the live state.

Things to try:

• inspect debugMode, colourBlindModeEnabled, lives, score, timeToChangeSquare, and timeToChangeButton
• set debugMode = true to show timing values in the status text
• set colourBlindModeEnabled = true to show the button colour as text
• remove display:none from the hidden changeLink so you can change the square manually
• reduce the colours array to make matching easier
• adjust the timing variables to make the game slower or faster

Example console experiments:

debugMode = true;
colourBlindModeEnabled = true;

colours = ["red"];

timeToChangeSquare = 500;
timeToChangeButton = 500;
currentButtonChanges = 10;
currentSquareChanges = 10;

Try a bot that keeps the square colour matched to the button colour:

var colourChangeBot = setInterval(function() {
    var square = document.getElementById("theSquare");
    var button = document.getElementById("theButton");

    if (square.style.backgroundColor !== button.style.backgroundColor) {
        square.style.backgroundColor = button.style.backgroundColor;
    }
}, 500);

Stop it with:

clearInterval(colourChangeBot);

Try a bot that clicks when the colours match:

var gamePlayBot = setInterval(function() {
    var square = document.getElementById("theSquare");
    var button = document.getElementById("theButton");

    if (square.style.backgroundColor === button.style.backgroundColor) {
        checkColour();
    }
}, 100);