Javascript 在用户单击就绪后生成越来越多的矩形

我想做一个游戏。在玩家点击“准备就绪”后，我希望“准备就绪”框消失（现在如果你点击“准备就绪”框，什么都不会发生，我不确定为什么），并生成一个随机矩形（随机x和y坐标）。玩家在第一个矩形的墙内单击后，会生成两个矩形，用户必须在这些墙内单击。然后3个矩形产生，4个，等等。我试图将游戏分割成场景，但是这是必要的吗？另外，对矩形使用我当前的按钮对象是否“更好”？顺便说一句，这里是汗学院

var randX = random(20, 370);
var randY = random(20, 370);
var randW = random(5, 45);
var randH = random(5, 45);
var currentScene;
var xPos = [];
var yPos = [];

//start button
var Button = function(config) {
    this.x = config.x;
    this.y = config.y;
    this.width = width;
    this.height = height;
    this.label = config.label;
};
Button.prototype.draw = function() {
    fill(0, 0, 0);
    rect(this.x-5, this.y+64, this.width-208, this.height-340, 5);
    fill(252, 18, 29);
    textSize(40);
    textAlign(CENTER);
    text(this.label, this.x+89, this.y+106);
};
var btn1 = new Button ({
    currentScene: 1,
    x: 111,
    y: 100,
    label: "Ready?"
}
);
btn1.draw();



//generate increasing number of rectangles
var randRect = function() {
    currentScene = 2;
    for (var i = 0; i <= 1; i++) {    
        fill(random(0,255), random(0, 255), random(0, 255));
        rect(randX[i], randY[i], randW, randH);
}
};

//when player clicks the ready box
draw = function() {
if (mouseIsPressed && mouseX >= 120 && mouseX <= 248 && mouseY <= 263 && mouseY >= 15) {
        if (currentScene === 1){
            randRect();

}
}
};

var randX=random（20370）；
var randY=随机（20370）；
var randW=随机（5,45）；
var randH=随机（5,45）；
当前场景；
var xPos=[]；
var yPos=[]；
//开始按钮
var按钮=功能（配置）{
this.x=config.x；
this.y=config.y；
这个。宽度=宽度；
高度=高度；
this.label=config.label；
};
Button.prototype.draw=函数（）{
填充（0,0,0）；
rect（this.x-5，this.y+64，this.width-208，this.height-340，5）；
填充（252、18、29）；
文本大小（40）；
文本对齐（中心）；
文本（this.label，this.x+89，this.y+106）；
};
var btn1=新按钮({
当前场景：1，
x:111，
y:100，
标签：“准备好了吗？”
}
);
btn1.draw（）；
//生成越来越多的矩形
var randRect=函数（）{
当前场景=2；
对于（var i=0；i=120&&mouseX，我将在处理过程中向您转达这一点，但它应该很容易转换为JS，因为我将使用一些psudeocode

您应该从Box类开始，如下所示：

class Box {
   float x, y, w, h;
   boolean hit;

   public Box() {
       //creates a new box with an x-pos, y-pos, a width and a height.
       w = random(0, 200);
       h = random(0, 200);
       x = random(0, width-x);
       y = random(0, height-h);
       hit = false;
    }

   void display() {
      //if the box isn't hit, display it!
      if (!hit) {
      fill(100, 100);
      rect(x, y, w, h);
     }
  }

   void checkHit() {
     //if the box isn't hit, check if it is, and if it is, set "hit" to true.
     if (!hit) {
       if ((mouseX>x) && (mouseX<x+w) && (mouseY>y) && (mouseY<y+h)) {
          hit = true;
       }
    }
  }
}

在这段代码中，这就是一切的出发点

您说过目标是单击屏幕上的第一个框，当单击该框时，将其移除并在屏幕上放置两个新框，然后单击这两个框后，创建三个新框，对吗？我将这样做：

用for循环遍历所有的框，看看我们所处的框是否“命中”

如果该框被击中，则移除该框。同时，从左框中减去一

如果boxes\u left=0（屏幕上没有剩余框），我们完成了您所称的“场景”，但我们不需要“场景”。只需在boxes\u目标中添加一个，因为我们每次点击所有框时都会增加目标。如果仍然有框，我们可以跳过下一步

由于没有剩余的方框，我们需要创建一些新的方框。使用for循环创建新的方框。提示：创建的方框数量等于amount_box

显示所有未命中的框

应该是这样，我希望这有帮助，您也可以使用它！如果您还需要其他帮助，请随时询问：）

编辑：我将为您澄清按钮交易：

我所有的按钮类是：

void readyButton(){ 
    fill(255,0,0) //make it red
    rect((width/2)-100, (height/2)-40, 200,80);
}

要检查按钮是否已单击并相应调整播放布尔值：

void mouseClicked(){  
   if (!playing){
       if (*see if the mouse is over the button*){
           playing = true;
       }
   }  
}

那么在程序的绘图部分：

if (!playing){
    readyButton(); 
}

轰。
谢谢！我想知道，我不知道在khan academy上“void”和“public”的等价物是什么。
void
只是表示该方法不返回任何内容。如果您有一个名为
String getName（）的方法
该方法需要返回一个字符串。Public、Protected和Private是可见性修饰符。希望这有帮助！
void readyButton(){ 
    fill(255,0,0) //make it red
    rect((width/2)-100, (height/2)-40, 200,80);
}

void mouseClicked(){  
   if (!playing){
       if (*see if the mouse is over the button*){
           playing = true;
       }
   }  
}

if (!playing){
    readyButton(); 
}