如何重绘然后删除不规则形状的旧版本？

Question

我想让一个对象移动，然后在绘制后删除它原来的对象。这是我下面的完整代码，现在鱼在移动，但在移动后不会自行移除。我试过添加 screenClear() 但这不起作用，因为我有更多的对象并且每次都无法清除屏幕。我需要一些可以去除鱼的东西。

class Fisk {
 constructor(lenght, width, color, eyecolor, x, y, speed) {
    this.lenght = lenght;
    this.width = width;
    this.color = color;
    this.eyecolor = eyecolor;
    this.x = x;
    this.y = y;
    this.x_speed = speed;
    this.y_speed = speed;
    fish_group.push(this);

   
    this.draw();
   
 }
  
    mage() {
        circle(this.x+40, this.y, 60, this.color)      
    }
  
    bakfena() {
        triangle(this.x+20, this.y, this.x-70, this.y-60, this.x-70, this.y+50, this.color)      
    }
  
    topfena() {
        triangle(this.x+10, this.y-50, this.x+70, this.y-50, this.x+40, this.y-90, this.color)      
    }
  
    underfena() { // Ska animeras 
        triangle(this.x+60, this.y+50, this.x+10, this.y+50, this.x+20, this.y+90, this.color)      
    }
  
  öga() {
        // Ögat (outer)
        circle(this.x+80, this.y-20, this.width-50, fishEyeColor); // Anger specifikationerna 
        
        // Ögat (inner)
        circle(this.x+80, this.y-20, this.width-55, "Black"); // Anger specifikationerna 

  }
  
  
  mun() {
        // Cirkel 1 (undre) (själva munnen)
        circle(this.x+90, this.y+10, this.width-50, "Black"); // Anger specifikationerna
        
        // Cirkel 2 (övre) (den som täcker munnen)
        circle(this.x+90, this.y+5, this.width-50, this.color); // Anger specifikationerna

    
  }
  
  draw() { // Målar upp hela kroppen
    this.mage();
    this.bakfena();
    this.topfena();
    this.underfena();
    this.öga(); 
    this.mun(); 
    
  }
  
  uppdatera() { // Uppdaterar skärmen efter varje förändring hos fisken
    this.draw();

 
    
  }
  
 
  
  flytta_vänster() {
    this.x += this.x_speed * -1;
    this.y_speed = 0;
  }
  
  flytta_höger() {
    this.x += this.x_speed * 1;
    this.y_speed = 0;
  }
  
  flytta_upp() {
    this.x += this.x_speed * 1;
    this.y_speed = 0;

  }
  
  flytta_ner() {
    this.x += this.x_speed * -1;
    this.y_speed = 0;
  }
  

  
}
  
// Funktioner
function skapa_fiskar() {

   
  for (amountOfFish; amountOfFish < max_amountOfFish; amountOfFish++) { // Denna funktion skapar exakt så många fiskar som ska skapas
    var y = Math.floor(Math.random() * 100); // Randomizar y position | max
    const color = fish_colors[Math.floor(Math.random() * fish_colors.length)]; // Randomizar färg
    
    new Fisk(0, 60, color, fishEyeColor, 10, y, 1); // Lenght, Width, Color, eyeColor, X, Y, speed

  }
  
  //fisk1 = new Fisk(0, 60, fish_colors[0], fishEyeColor, 100, 100, 10); 
  
  
  
}

  
function simulation_loop() {
    for (var num in fish_group) {
        fish_group[num].flytta_höger();
        fish_group[num].uppdatera();
    
  }
    
    
}

  
// -------
// Variabler
var fish_colors = ['#FFA500', '#6633ff', '#ceaf9b', '#8ebd9d', '#e6e953'];    
var fishEyeColor = "#f0ffff";
  
var amountOfFish = 0;
var max_amountOfFish = 1;
var fish_group = new Array();


// -------
skapa_fiskar();
setInterval(simulation_loop, 100); // 33 milliseconds = ~ 30 frames per sec

Answer 1

找到问题并解决了。

function simulation_loop() { 

// Fiskarna 
skapa_fiskar();
clearScreen();
bakgrund();
for (var num in fish_group) { // Movement av fisken
    fish_group[num].flytta_höger();
    fish_group[num].uppdatera();
  
    if (fish_group[num].x >= totalWidth+80) { 
        delete fish_group[num];
        amountOfFish-=1;
    }

}

问题出在代码的顺序上。我必须清空屏幕然后画出所有的鱼。

如何重绘然后删除不规则形状的旧版本？

How do I redraw and then remove the old version of an irregular shape?

javascript

loops

draw