如何在不同时间隐藏/显示多个方块

Question

我仍在为我的简单 JavaScript 游戏而苦苦挣扎。这是我之前的问题：简单的javascript游戏，隐藏/显示随机方块

一些方块随机显示和隐藏几秒钟，你必须点击它们。我使用 RaphaelJS 绘制正方形和一些 JQuery （$.each() 函数），

我无法使用 setInterval 对每个正方形进行隐藏/显示。 Mishelle 制作的函数看起来不错，但我收到“这不是函数”错误。我测试了不同的东西，但它并不像我想象的那么明显：/

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
*/
}

感谢您的帮助:)

Answer 1

尝试

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

Answer 2

刚刚遇到你的问题，以防万一你读到这篇文章并且想知道问题是什么。 this 在回调中是未定义，因此您需要将您引用的矩形存储在变量中（我将其称为square） ，请参阅我的代码：

showBriefly: function(timeFromNow, duration) {
    square = this.box;
    setTimeout(function(){square.show();}, timeFromNow )
    setTimeout(function(){square.hide();}, timeFromNow + duration )
}

干杯