Question

我正在尝试制作游戏。玩家点击＆＃34; Ready，＆＃34;我想要＆＃34; Ready＆＃34;盒子消失（现在，如果你在准备好的盒子里面没有任何反应，我不确定为什么）并且有一个随机的矩形（随机的x和y坐标）来产生。玩家在第一个矩形的墙内点击后，产生2个矩形，用户必须在这些墙内点击。然后3个产生spawn，4等。我试图将游戏分成场景但是有必要吗？此外，它会更好吗＆＃39;使用我当前的按钮对象的矩形？这是可汗学院btw。

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();

}
}
};

Answer 1

我将在Processing中将此转发给您，但由于我将使用一些psudeocode，因此应该很容易转换为JS。

你应该从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;
       }
    }
  }
}

然后创建一个包含两个全局整数的框的ArrayList。一个用于跟踪需要点击多少个框，一个用于剩余多少个框。

ArrayList<Box>boxes;
int boxes_goal;
int boxes_left;

在程序的安装部分中，实例化ArrayList，然后添加第一个框。然后，将您创建的两个整数设置为一个，因为您希望从屏幕上的一个矩形开始。

void setup(){ //this method only runs once, at the beginning.
    boxes = new ArrayList<Box>;
    boxes.add(new Box());
    boxes_goal = 1;
    boxes_left = 1;
}

另外，不确定为什么你的就绪按钮方法不起作用，但要确保边界正确，然后有一个名为“播放”或“正在进行”的全局布尔变量或类似的东西，并设置为假。 如果所述布尔值为false，则仅调用您的就绪按钮方法（显示它）！一旦按下该按钮，将布尔值设置为true。

然后，无论你在哪里运行代码来显示盒子/矩形（main / draw方法）并与之交互，都要把它全部放在if语句中：

if(going){
    //everything to do with boxes should go here.
}

在这段代码中，就是这一切都在下降。

你说目标是点击屏幕上的第一个方框，当点击该方框时，将其删除并在屏幕上放两个新方框，然后点击这两个方框后，制作三个新方框，对吗？ 以下是我将如何理解：

使用for循环浏览所有方框，看看我们所在的方框是否“点击”。
如果该框被点击，请删除该框。另外，从boxes_left中减去一个。
如果boxes_left = 0（屏幕上没有任何框），我们在你调用时完成了“场景”，但我们不需要“场景”。只需在boxes_goal中添加一个，因为我们每次打到所有框时都会增加目标。如果还有剩下的盒子，我们可以跳过下一步！
由于没有任何盒子，我们需要创建一些新盒子。使用for循环创建新框。 提示：创建一个等于amount_boxes的数量的方框！
显示所有未点击的框！

应该是它，我希望这会有所帮助，你可以使用它！如果您需要其他任何帮助，请随时询问：）

编辑：我会为您澄清按钮优惠：

我所有的按钮类都是：

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(); 
}

动臂。

用户点击准备就绪后生成越来越多的rects

1 个答案: