Processing 处理：如何固定计时器显示以及如何在游戏结束时显示时间分数？

我正在制作一个升序拼图，它记录了用户完成拼图所需的时间，一旦拼图完成，它会将用户带到屏幕上的一个游戏，向用户显示他们的时间。我的问题是，所显示的时间是重叠的，没有按应有的方式更新。我也不确定如何节省用户完成拼图所花费的时间

final int NUM_SQUARES = 4;
int[][] board = new int[NUM_SQUARES][NUM_SQUARES];
int sqSide;
Timer startTimer;

void setup(){
  size(500, 500);
  setupGame();
  sqSide = width/NUM_SQUARES;
}

void setupGame(){
  sqSide = width/NUM_SQUARES;
  startTimer = new Timer(0);
  //populate the board
    //generate random number
    //check if we have it already inside the array
    //if we have, then go on to generate another random number
    //if we do not have it, then we can store inside array
  for(int row=0; row<NUM_SQUARES; row++){
    for(int col=0; col<NUM_SQUARES; col++){
      int randVal;
      do{
        randVal = int(random(1, NUM_SQUARES*NUM_SQUARES+1) );
      }while( searchFor(randVal) );
      board[row][col] = randVal;
    }
  }
  
  //visual representation of the board
  for(int row=0; row<NUM_SQUARES; row++){
    for(int col=0; col<NUM_SQUARES; col++){
      fill(random(0,255), random(0,255), random(0,255));
      rect(col*sqSide, row*sqSide, sqSide, sqSide);
      fill(0);
      textSize(30);
      text(board[row][col], (col+0.5)*sqSide, (row+0.5)*sqSide);
    }
  }
}

class Timer{
  float Time;
  
  Timer(float set){
    Time = set;
  }
  float getTime(){
    return(Time);
  }
  void setTime(float set){
     Time = set;
  }
  void countUP(){
    Time += 1/frameRate;
  }
}


boolean searchFor(int itemToBeSearched){
  for(int i=0; i<NUM_SQUARES; i++){
    for(int j=0; j<NUM_SQUARES; j++){
      if(itemToBeSearched == board[i][j]){
        return true;
      }
    }
  }
  return false;
}

void draw(){
  startTimer.countUP();
  fill(0);
  text(startTimer.getTime(), 20,20);
}

int clickedRow, clickedCol, releasedRow, releasedCol;

void mousePressed(){
  clickedRow = int(mouseY/sqSide);
  clickedCol = int(mouseX/sqSide);
}
void mouseReleased(){
  releasedRow = int(mouseY/sqSide);
  releasedCol = int(mouseX/sqSide);
  //swap
  int buffer = board[clickedRow][clickedCol];
  board[clickedRow][clickedCol] = board[releasedRow][releasedCol];
  board[releasedRow][releasedCol] = buffer;
  
  //visual representation - finish up
  //show what is inside board[clickedRow][clikedCol]
  //then show what is inside board[releasedRow][releasedCol]
  //where the child pressed
  
  fill(random(0,255), random(0,255), random(0,255));
  rect(clickedCol*sqSide, clickedRow*sqSide, sqSide, sqSide);
  fill(0);
  text(board[clickedRow][clickedCol],(clickedCol+0.5)*sqSide, (clickedRow+0.5)*sqSide) ;
  
  //where the child released
  fill(random(0,255), random(0,255), random(0,255));
  rect(releasedCol*sqSide, releasedRow*sqSide, sqSide, sqSide);
  fill(0);
  text(board[releasedRow][releasedCol],(releasedCol+0.5)*sqSide, (releasedRow+0.5)*sqSide);
  
  
  if(gameOver()==true){ //calling function gameOver
    background(255);
    String s = "Congratulations!"; 
    String d = "Click to start again!";
    fill(0);
    text(s, 125, 225);
    text(d, 125, 250);
    if(mousePressed == true){
      setupGame();
    }
  }
}

//definition of gameOver
boolean gameOver(){
  int counter=1;
  for(int row=0; row<NUM_SQUARES; row++){
    for(int col=0; col<NUM_SQUARES; col++){
      if(board[row][col] !=counter){
        return false;
      }
      counter++;
    }
  }
  return true;
}

final int NUM_SQUARES=4；
int[][]板=新的int[NUM_SQUARES][NUM_SQUARES]；
内部sqSide；
定时器启动定时器；
无效设置（）{
大小（500500）；
设置游戏（）；
sqSide=宽度/平方数；
}
无效游戏（）{
sqSide=宽度/平方数；
startTimer=新计时器（0）；
//填充电路板
//生成随机数
//检查阵列中是否已经有它
//如果有，那么继续生成另一个随机数
//如果我们没有它，那么我们可以存储在数组中
对于（int row=0；row有很多好的工作，特别是在管理电路板/交换元素等方面。需要集中精力来控制它

看起来在绘画方面也有点混乱。
可以在draw（）中绘制一次元素；现在可以在顶部渲染重叠的元素，但是需要注意哪些元素需要渲染一次或多次

计时器文本留下痕迹，因为背景从未清除，但电路板仅绘制一次。您可能希望重新绘制背景/电路板以修复文本，但某些代码位需要移动或需要以不同方式处理

例如：

填充（随机（0255）、随机（0255）、随机（0255））；

如果你在
draw（）
中调用它，颜色会不断变化，这是你不想要的

但是，您可以在
setup（）
中生成颜色一次，然后在draw（）中重新使用它们，而无需重置值

对于鼠标事件和何时或应在何种状态下重置，似乎也存在一些混淆

以下是重新组织的代码版本，其中考虑了上述注释：

final int NUM_SQUARES=4；
int[][]板=新的int[NUM_SQUARES][NUM_SQUARES]；
//还要记住在setup（）中设置一次以在draw（）中重复使用的颜色
int[]boardColors=新int[NUM_SQUARES][NUM_SQUARES]；
内部sqSide；
定时器启动定时器；
int clickedRow、clickedCol、releasedRow、releasedCol；
//这将存储gameOver（）的结果一次，以便可以重复使用
布尔型isGameOver；
无效设置（）{
大小（500500）；
设置游戏（）；
}
无效游戏（）{
sqSide=宽度/平方数；
startTimer=新计时器（0）；
透明板（）；
//填充电路板
//生成随机数
//检查阵列中是否已经有它
//如果有，那么继续生成另一个随机数
//如果我们没有它，那么我们可以存储在数组中
沙狐牌（）；
}
空挡板（）{
对于（int row=0；row对于（int row=0；row）您在一个问题中有多个问题：尝试将问题分解成更小的部分，也许每个部分都要问一个问题。关于重叠的时间文本，您并没有清除背景。总体而言，如果您觉得有点困惑处理过程是如何绘制的以及事件是如何工作的（例如
mousePressed（）
，
鼠标释放（）因为你组织代码的方式不利于实现你的目标。理想情况下，你希望在游戏状态和游戏结束状态之间进行分离：这将便于更新计时器或在新游戏开始时暂停/显示并清除计时器。这是我第一次使用处理，所以是的，我有点困惑，但我很感激他提出了一些建议！我会单独解决的。非常感谢你的帮助。我真的很感谢你提供的信息，尤其是因为这些对我来说都是新的。我不认为我会考虑像这样构造代码。