Chimptest

I recently came accross an instagram post about a chimpanzee who was completing a research task at the Kyoto University. I wondered if I could perform aswell as the chimp. I have recreated the scale and timing of the game for this post below. Hit the reset button, quickly memorize the number pattern and then click the white squares in order from 1-10. Good Luck!

Below is the html and javascript used to program this game.

<script>
    var gameWidth;
    var gameHeight;
    var gameOffset = 20;
    var gameContext;
    var gameCanvas;
    var gameScore;
    var numbers;
    var guessIndex;

    window.onload = function () {
        newGame();
    }

    newGame = function () {
        numbers = Array(40);
        for (var i = 0; i < 40; i++) numbers[i] = i;
        numbers.sort(() => Math.random() - 0.5)
        score.innerHTML = "&nbsp;";
        drawGame();
        startGame();
    }

    startGame = function () {
        guessIndex = 0;
        window.setTimeout(hideGame, 2000);

    }

    hideGame = function () {
        for (var i = 0; i < guessIndex; i++)
            hideNumber(numbers[i], '#112211');
        for (var i = guessIndex; i < 9; i++)
            hideNumber(numbers[i], '#eeeeee');
    }


    window.onresize = function () {
        drawGame();
    }

    clicked = function (e) {
        var rect = gameCanvas.getBoundingClientRect();
        var x = Math.floor(8 * (e.clientX - rect.x - gameOffset) / gameWidth);
        var y = Math.floor(5 * (e.clientY - rect.y - gameOffset) / gameHeight);
        var index = y * 8 + x;

        if (numbers[guessIndex] == index) {
            score.innerHTML = score.innerText + '&nbsp;&#10084;'
            guessIndex++;
        }
        else if (validGuess(index))
            score.innerHTML = score.innerHTML + '&nbsp;&#9760;';
        hideGame();
    }

    validGuess = function (index) {
        var retval = false;
        for (var i = guessIndex; i < 9; i++)
            retval = retval | (numbers[i] == index);
        return retval;
    }

    drawGame = function () {
        var wrapper = document.getElementById("canvasWrapper")
        gameScore = document.getElementById("score");
        gameCanvas = document.getElementById("myCanvas");
        gameCanvas.addEventListener('click', clicked);

        gameWidth = wrapper.clientWidth - 2 * gameOffset;
        gameHeight = Math.floor(5 * gameWidth / 8);
        gameCanvas.width = gameWidth + 2 * gameOffset;
        gameCanvas.height = gameHeight + 2 * gameOffset;

        gameContext = gameCanvas.getContext("2d");
        gameContext.beginPath();
        gameContext.rect(gameOffset, gameOffset, gameWidth, gameHeight);
        gameContext.stroke();

        for (var i = 0; i < 9; i++)
            drawNumber(numbers[i], i + 1);
    }

    drawNumber = function (number, text) {
        drawText(number % 8, Math.floor(number / 8), text);
    }

    hideNumber = function (number, color) {
        saveStyle = gameContext.fillStyle;
        gameContext.fillStyle = color;
        x = number % 8;
        y = Math.floor(number / 8);
        size = Math.floor(gameHeight / 5);
        gameContext.fillRect(gameOffset + x * size + 5, gameOffset + y * size + 5, size - 10, size - 10);
        gameContext.fillStyle = saveStyle;
    }

    drawText = function (x, y, text) {
        var size = Math.floor(gameHeight / 5);
        gameContext.font = 'bold ' + gameWidth / 9 + 'px Arial';
        gameContext.textAlign = "center";
        gameContext.textBaseline = "middle";
        gameContext.fillStyle = "#eeeeee";
        gameContext.fillText(text, gameOffset + 5 + x * size + size / 2, gameOffset + 5 + y * size + size / 2);
    }
</script>

<div id="canvasWrapper">
    <canvas style="background: #112211;" id="myCanvas"></canvas>
    <button type="button" onclick="newGame()">Reset</button><br />
    <span style="font-size: small" id="score"></span>
</div>