加工中的打地鼠

Question

我正在处理一个学校项目（Java 模式）。我们有一张游戏应该是什么样子的图片。

所以任务是用正方形创建一个网格。随机方块应亮起红色。如果单击红色方块，它应该将颜色更改为绿色并保持绿色。

目前我的代码是什么样的：

Square[][] grid;
 
int cols = 20;
int rows = 20;
 
void setup() {
  size(400, 400);
  grid = new Square[cols][rows];
  for (int i = 0; i < cols; i++) {
    for (int j = 0; j < rows; j++) {
      grid[i][j] = new Square(i*20, j*20, 20, 20);
    }
  }
}
 
void draw() {
  background(0);
  for (int i = 0; i < cols; i++) {
    for (int j = 0; j < rows; j++) {
      grid[i][j].display();
      if (grid[i][j].x<mouseX && mouseX < grid[i][j].x + grid[i][j].w && grid[i][j].y<mouseY && mouseY < grid[i][j].y + grid[i][j].h && mousePressed) {
        color col = color(0,204,0);
        grid[i][j].update(col);
      }
    }
  }
}

Class 正方形：

class Square {
  float x, y;  
  float w, h;  
  color c;


  Square(float tempX, float tempY, float tempW, float tempH) {
    x = tempX;
    y = tempY;
    w = tempW;
    h = tempH;
     c = color(0);
  } 
 
  void display() {
    stroke(0);
    fill(c);
    rect(x, y, w, h);
  }
 
  void update(color c) {
    this.c = c;
  }
}

所以现在，你点击的每个方块都会变成绿色。我不确定如何编写代码，使随机方块的颜色变为红色并每 5 秒洗牌一次。您对如何继续编写代码或采取哪些思考步骤来解决此任务有什么建议吗？

Answer 1

首先，接受你的任务：

So the task is to create a grid out of squares. Random squares should light up in red. If a red square is clicked, it should change colors to green and stay green.

并将其分解：

用正方形创建网格：做得很好！
随机方块应亮起红色
如果一个红色方块被点击
更改颜色为绿色并保持绿色

你如何在 Processing 中使用随机数？最简单的方法是使用 random() 方法：你可以传递两个值，你会得到一个介于这些值之间的随机数。

假设您想掷一枚硬币，那么（大约）50-50 的变化是正面或反面。你可以这样：

if(random(0, 100) > 50){
  println("head");
}else{
  println("tails");
}

例如

甚至可以是random(0.0, 1.0) > 0.5，道理是一样的。你可以想到 throwing a dice or a number of dices 等。请记住这些是伪随机的，您可以在自己的时间探索其他伪随机相关的方法，例如 randomGauss() and noise()。 random() 现在可能已经足够好了，第 2 部分已完成:)

您即将完成第 3 部分：

if (grid[i][j].x<mouseX && mouseX < grid[i][j].x + grid[i][j].w && grid[i][j].y<mouseY && mouseY < grid[i][j].y + grid[i][j].h && mousePressed) {

但您还需要检查点击的方块是否为红色。很高兴有一些红色方块开始。假设 color(204, 0, 0) 是你的红色，你可以简单地添加一个额外的检查：

if(grid[i][j].c == color(204, 0, 0)){
   println("red block clicked");
   grid[i][j].c = color(0, 204, 0);
}

大致将您的草图变成：

Square[][] grid;

int cols = 20;
int rows = 20;

final color RED   = color(204, 0, 0);
final color GREEN = color(0, 204, 0);

void setup() {
  size(400, 400);
  grid = new Square[cols][rows];
  for (int i = 0; i < cols; i++) {
    for (int j = 0; j < rows; j++) {
      grid[i][j] = new Square(i*20, j*20, 20, 20);
      // roughly 50 - 50 % change a grid square will be red
      if (random(0, 100) > 50) {
        grid[i][j].update(RED);
      }
    }
  }
}

void draw() {
  background(0);
  for (int i = 0; i < cols; i++) {
    for (int j = 0; j < rows; j++) {
      grid[i][j].display();
      if (grid[i][j].x<mouseX && mouseX < grid[i][j].x + grid[i][j].w && grid[i][j].y<mouseY && mouseY < grid[i][j].y + grid[i][j].h && mousePressed) {
        // if the square is red
        if (grid[i][j].c == RED) {
          // change colour to GREEN
          grid[i][j].update(GREEN);
        }
      }
    }
  }
}

class Square {
  float x, y;  
  float w, h;  
  color c;

  Square(float tempX, float tempY, float tempW, float tempH) {
    x = tempX;
    y = tempY;
    w = tempW;
    h = tempH;
    c = color(0);
  } 

  void display() {
    stroke(0);
    fill(c);
    rect(x, y, w, h);
  }

  void update(color c) {
    this.c = c;
  }
}

关于每 5 秒洗牌一次的颜色，我建议：

每 5 秒你可以使用 millis()
上面有一个在 setup() 中完成洗牌的示例，尽管您可能希望在 void shuffle() 函数中封装一个带有随机条件的嵌套循环，例如您可以轻松地调用每个函数5秒。
请注意，此方法会将绿色方块重置为红色，您可能需要 else 在那种情况下将方块重置为黑色（否则，随着时间的推移，大多数方块会变成红色），等等。

玩得开心！

P.S。我倾向于将状态数据与表示分开。例如，我会添加一个变量来跟踪每个方块状态（例如 OFF, INTERACTIVE, ACTIVATED），更新方块颜色及其状态之间的基本 finite state machine, then render colours accordingly. What you have above is a tight coupling。对于家庭作业，你已经完成了，但在未来，对于更复杂的项目，你可能需要考虑程序中的数据流以及你如何表示它。

加工中的打地鼠

Whack-a-mole in Processing

java

processing