“Whack-a-mole in Processing” 可以翻译为 “在Processing中的打地鼠游戏”。

huangapple
go评论174阅读模式
英文:

Whack-a-mole in Processing

问题

I understand your request. Here's the translation of the text you provided:

[![whack-a-mole][1]][1]

我正在处理一个Processing（Java模式）的学校项目。我们有一个游戏应该看起来像什么的图片。

因此，任务是创建一个由正方形组成的网格。随机的正方形应该变成红色。如果点击了红色的正方形，它应该变成绿色并保持绿色。

目前我的代码是这样的：

```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 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秒钟随机变化。
您有关于如何继续编写代码或采取哪些思考步骤来解决这个任务的任何提示吗？


<details>
<summary>英文:</summary>
[![whack-a-mole][1]][1]
[1]: https://i.stack.imgur.com/M48ta.png
I am working on a school project in Processing (Java Mode). We have a picture of how the game should look like. 
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. 
What my code looks like at the moment: 
Square[][] grid;
int cols = 20;
int rows = 20;
void setup() {
size(400, 400);
grid = new Square[cols][rows];
for (int i = 0; i &lt; cols; i++) {
for (int j = 0; j &lt; rows; j++) {
grid[i][j] = new Square(i*20, j*20, 20, 20);
}
}
}
void draw() {
background(0);
for (int i = 0; i &lt; cols; i++) {
for (int j = 0; j &lt; rows; j++) {
grid[i][j].display();
if (grid[i][j].x&lt;mouseX &amp;&amp; mouseX &lt; grid[i][j].x + grid[i][j].w &amp;&amp; grid[i][j].y&lt;mouseY &amp;&amp; mouseY &lt; grid[i][j].y + grid[i][j].h &amp;&amp; mousePressed) {
color col = color(0,204,0);
grid[i][j].update(col);
}
}
}
}
Class for squares:
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;
}
}
So at the moment, every square you click turns green. I am not sure how to write the code, so that random squares change color to red and shuffle every 5 seconds. 
Do you have any tips on how to proceed with the code or which thinking steps to take to be able to solve this task?
</details>
# 答案1
**得分**: 5
首先，执行你的任务：
&gt;任务是创建一个由正方形组成的网格。随机正方形应该变成红色。如果点击了一个红色正方形，它应该变成绿色并保持绿色。
然后将其分解：
1. 创建一个由正方形组成的网格：已经很好地完成了！
2. 随机正方形应该变成红色
3. 如果点击了一个红色正方形
4. 更改颜色为绿色并保持绿色
在Processing中如何使用随机数？最简单的方法是使用 [`random()`][1] 方法：你可以传递两个值，然后得到两个值之间的随机数。
假设你想要抛硬币，以便有大约50-50的机会得到正面或反面。你可以这样做：
```java
if (random(0, 100) > 50) {
println("head");
} else {
println("tails");
}

也可以是 random(0.0, 1.0) > 0.5，思想是一样的。
你可以考虑投掷骰子或多个骰子等情况。
请记住这些是伪随机数，你可以在自己的时间内探索其他与伪随机数相关的方法，比如 randomGauss() 和 noise()。
random() 现在可能足够了，第2部分完成了 “Whack-a-mole in Processing” 可以翻译为 “在Processing中的打地鼠游戏”。

你几乎完成了第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("红色块被点击");
  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);
      // 大致50 - 50%的机会一个网格正方形会是红色的
      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 (grid[i][j].c == RED) {
          // 更改颜色为绿色
          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），然后根据状态更新基本的有限状态机，然后相应地渲染颜色。你上面的做法是正方形的颜色与其状态之间的紧耦合。对于你现在的作业来说，这是可以的，但在将来，对于更复杂的项目，你可能要考虑程序中的数据流以及如何表示它。

7:

英文:

First, take your task:

>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.

and break it down:

  1. create a grid out of squares: nicely done already !
  2. Random squares should light up in red
  3. If a red square is clicked
  4. change colors to green and stay green

How do you use random numbers in Processing ?
The simplest method is using the random() method: you can pass two values and you'll get back a random number between those values.

Let's say you want to flip a coin so there's a (roughly) 50-50 change you get heads or tails. You could so something like:

if(random(0, 100) &gt; 50){
println(&quot;head&quot;);
}else{
println(&quot;tails&quot;);
}

Could even be random(0.0, 1.0) &gt; 0.5 for example, the idea is the same.
You could think of throwing a dice or a number of dices, etc.
Remember these are pseudo-random and in your own time can explore other pseudo random related methods such as randomGauss() and noise().
random() may be good enough for now, part 2 done “Whack-a-mole in Processing” 可以翻译为 “在Processing中的打地鼠游戏”。

You're almost done with part 3:

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

but you need to also check if the clicked square is red.
Would nice to have some red squares to begin with. Let's assume color(204, 0, 0) is your red, you could simply add an additional check:

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

Which roughly turns your sketch into:

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 &lt; cols; i++) {
for (int j = 0; j &lt; 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) &gt; 50) {
grid[i][j].update(RED);
}
}
}
}
void draw() {
background(0);
for (int i = 0; i &lt; cols; i++) {
for (int j = 0; j &lt; rows; j++) {
grid[i][j].display();
if (grid[i][j].x&lt;mouseX &amp;&amp; mouseX &lt; grid[i][j].x + grid[i][j].w &amp;&amp; grid[i][j].y&lt;mouseY &amp;&amp; mouseY &lt; grid[i][j].y + grid[i][j].h &amp;&amp; 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;
}
}

“Whack-a-mole in Processing” 可以翻译为 “在Processing中的打地鼠游戏”。

In terms of shuffling colours every 5 seconds I recommend:

  • for every 5 seconds you could use millis()
  • above there is an example of shuffling done in setup() though you might want to encapsulate a nested loop like that with the random condition in a void shuffle() function for example which you could easily call every 5 seconds.
  • note that this approach will reset green blocks to red, you might want an else in that condition to reset blocks to black (otherwise, with time, most will turn red), etc.

Have fun!

P.S. I tend to separate state data from representation. For example I would add a variable to keep track of each square state (e.g. OFF, INTERACTIVE, ACTIVATED), update a basic finite state machine, then render colours accordingly. What you have above is a tight coupling between the colour of a Square and it's state. For the homework you've got that's ok, but in the future, for more complex projects you might want to consider data flows through your program and how you represent it.

huangapple
  • 本文由 发表于 2020年8月1日 00:45:21
  • 转载请务必保留本文链接：https://go.coder-hub.com/63195938.html
  • java
  • processing
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定