简单的javascript游戏，隐藏/显示随机方块

发布于 2024-11-04 22:10:55 字数 705 浏览 9 评论 0原文

我正在开发一个简单的游戏，我需要一些帮助来改进我的代码

所以这是游戏：

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

我在div中工作，这就是我绘制正方形（6个正方形）的方式，xy是随机数。

 var rec1 = paper.rect(x, y, 50, 50).attr({
            fill: "blue",});

我可以使用 for() 来构建每个方块并使用不同的变量名称吗？ 我尝试使用 var = varName+i 但它不起作用。

为了隐藏和显示方块，我使用两个函数调用两个 setTimeout：

 function box1()  {rec1.show();}
 function hidebox1()  {rec1.hide();}
 var time1 = setTimeout(box1, 1000);
 var time1 = setTimeout(hidebox1, 2000);

我知道它看起来很糟糕...

我确信有一种方法可以使用切换，或者如果你能帮忙的话，可以使用更奇特的方法来做到这一点我找到了:)因为现在我必须对每个方块都这样做...

非常感谢您的帮助。

原文

I'm working on a simple game and I need some help to improve my code

So here's the game:

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

I work in a div, that's how I draw my squares (6 squares), x y are random numbers.

 var rec1 = paper.rect(x, y, 50, 50).attr({
            fill: "blue",});

Can I use for() to build my squares with a different var name for each one ?
I try with var = varName+i but it didn't work.

To hide and show the square I use two functions call with two setTimeout:

 function box1()  {rec1.show();}
 function hidebox1()  {rec1.hide();}
 var time1 = setTimeout(box1, 1000);
 var time1 = setTimeout(hidebox1, 2000);

I know it looks crappy...

I'm sure there is a way to use a toggle, or something more fancy to do that if you could help me finding it :) Because right now I have to do that for every square...

Thanks a lot for your help.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

黯淡〆 2024-11-11 22:10:55

您尝试使用 varName 加上一些 i 来识别您想要的 varName 的本能是正确的，JavaScript（像大多数语言一样）具有这一点通过所谓的数组内置的想法。

一个简单的看起来像这样：

var foo = [1, 5, 198, 309];

使用该数组，您可以访问 foo[0] （即 1），或 foo[3] （即 1）是 309。

请注意两件事：首先，我们使用方括号来标识我们想要的数组元素。其次，我们从 0 开始计数，而不是 1。

您可以创建一个空数组，例如 var varName = [];，然后添加新元素使用 varName.push( newValueToPutIn );

使用这些工具，您现在可以获得您想要的东西。现在您可以执行以下操作：

var recs = [];
for(var i = 0; i < 100; i++) {
    var rec = paper.rect(x, y, 50, 50).attr({fill: 'blue'});
    recs.push(rec);
}

recs[0] 和 recs[1] 等等将引用您的各个框。

Your instinct to try to use varName plus some i to identify which varName you want is spot on, and JavaScript (like most languages) has that idea built in through what's called an array.

A simple one looks something like this:

var foo = [1, 5, 198, 309];

With that array, you can access foo[0] which is 1, or foo[3] which is 309.

Note two things: First, we identify which element of the array we want using square brackets. Second, we start counting at 0, not 1.

You can create an empty array like var varName = []; and then add new elements to it using varName.push( newValueToPutIn );

With those tools, you can now get at what you wanted. Now you can do something like:

var recs = [];
for(var i = 0; i < 100; i++) {
    var rec = paper.rect(x, y, 50, 50).attr({fill: 'blue'});
    recs.push(rec);
}

And recs[0] and recs[1] and so forth will refer to your various boxes.

回复收藏 0 原文

难如初 2024-11-11 22:10:55

对于第一个问题，数组是最佳选择。
对于第二部分，您可以将正方形及其显示/隐藏内容封装到一个新的匿名对象中，如下所示：

var recs = [];
var numberOfRecs = 6;
for (var i = 0; i < numberOfRecs; i++) {
    //determine x and y?
    recs.push({
        box: paper.rect(x, y, 50, 50).attr({ fill: "blue" }),
        showBriefly: function(timeFromNow, duration) {
            window.setTimeout(this.box.show, timeFromNow);
            window.setTimeout(this.box.hide, timeFromNow + duration);
        }
    });
}


//show the 3rd box 1000 ms from now, for a duration of 1000 ms
recs[2].showBriefly(1000, 1000);

For the first question, an array is the way to go.
For the second part, you could encapsulate the square and its show/hide stuff into a new anonymous object, like this:

var recs = [];
var numberOfRecs = 6;
for (var i = 0; i < numberOfRecs; i++) {
    //determine x and y?
    recs.push({
        box: paper.rect(x, y, 50, 50).attr({ fill: "blue" }),
        showBriefly: function(timeFromNow, duration) {
            window.setTimeout(this.box.show, timeFromNow);
            window.setTimeout(this.box.hide, timeFromNow + duration);
        }
    });
}


//show the 3rd box 1000 ms from now, for a duration of 1000 ms
recs[2].showBriefly(1000, 1000);

回复收藏 0 原文

~没有更多了~