Question

I’m still struggling with my simple javascript game. Here is my previous question: Simple javascript game, hide / show random square

Some square show and hide randomely for a few seconds and you have to click on them. I use RaphaelJS to draw the square and a few of JQuery ($.each() function)

I can’t make the hide/show with the setInterval working for each square. The function made by Mishelle looks good but I get a “This is not a function” error.. I’ve test different stuff but it’s not as obvious as I thought :/

window.onload = function() {  

    var paper = new Raphael(document.getElementById('canvas_container'), 500, 500);
    // random function to for the x and y axis of the square
    function random(min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min;  
    }
    var rectanglemain = paper.rect(0, 0, 500, 500).attr({fill: "white",});
    var win_click = 0; // set the var to count the click on the square
    var recs = [];
    for(var i = 0; i < 50; i++) {
        var x = random(1,450);
        var y = random(1,450);
        var rec = paper.rect(x, y, 50, 50).attr({fill: 'blue'});
        recs.push(rec); // add the square in an array
        recs[i].click(function () {
        //counting the clicks
        win_click = win_click + 1;
        })
        function hideSquare() {recs[i].hide();}
        hideSquare();
    }   
    rectanglemain.click(function () {
        alert('you click on ' + win_click + ' squares');
    }); 
     /* here is a function made by Mishelle on my previous question, unfortunately I can't make it work (this is not a function error).
function showBriefly (timeFromNow, duration) {
        window.setTimeout(this.rec.show, timeFromNow);
        window.setTimeout(this.rec.hide, timeFromNow + duration);
        }
     recs[2].showBriefly(1000, 3000); to test the function
*/
}

Thanks for the help 🙂

Answer 1

try

window.setTimeout(function(){this.rec.show();}, timeFromNow )