Objects from an array not showing.

LSB_

The idea is, the apples in the array that are eaten are not shown on the canvas. If there are less that 20 apples on the canvas, more are pushed to the array and are shown. Code for all my files are as follows:

Sketch-

var s;
var food = [];
var foodCount = 1;
var clr = [
  [180, 92, 111],
  [116, 51, 111],
  [116, 204, 193],
  [116, 204, 59],
  [211, 204, 59],
  [29, 98, 59],
  [29, 98, 193],
  [193, 230, 12]
];

function setup() {
  frameRate(10);
  createCanvas(400, 400);
  s = new snake();
  food.push(new apple(pickLocation(), pickLocation(), clr[floor(random(8))]));
}
//function to make apples with rand colours as long as n of apples is < n.
//check if snake colour and apple colour are the same, die if not.  

function draw() {
  background(71);
  updateScore();
  s.die();
  s.update();
  s.show();
  foodEaten();
  genFood();
  showFood();
}

function pickLocation() {
  var n = Math.round(random(400) / 10) * 10;
  return n;
}

function showFood() {
  for (i = 0; i == food.length - 1; i++) {
    if (food[i].eaten === false) {
      food[i].show()
      console.log("shown")
    } else {
      console.log("not shown")
    }
  }

}

function foodEaten() {
  for (i = 0; i == food.length - 1; i++) {
    if (s.x == food[i].x && s.y == food[i].y) {
      food[i].eaten = true;
      s.total++;
      foodCount--;
    }
  }
}

function restart() {
  s.x = 200;
  s.y = 200;
  s.xspeed = 0;
  s.yspeed = 0;
  s.total = 0;
  s.tail = [];
  s.col = 255;

  food = [];
  food.push(new apple(pickLocation(), pickLocation(), clr[floor(random(8))]));
}

function updateScore() {
  fill(255);
  text("Score: " + s.total, 0, 0, 50, 50);
}

function genFood() {
  if (foodCount 

Snake -

function snake() {
  this.x = 200;
  this.y = 200;
  this.xspeed = 0;
  this.yspeed = 0;
  this.total = 0;
  this.tail = [];
  this.col = 255;

  this.update = function() {
    if (dist(s.x, s.y, food[food.length - 1].x, food[food.length - 1].y) > 75) {
      if (random(1) > 0.8) {
        this.col = clr[floor(random(8))];
      }
    }
    for (var i = 0; i < this.tail.length - 1; i++) {
      this.tail[i] = this.tail[i + 1];
    }
    if (this.total >= 1) {
      this.tail[this.total - 1] = createVector(this.x, this.y);
    }
    this.x = this.x + this.xspeed;
    this.y = this.y + this.yspeed;
  }

  this.show = function() {
    fill(this.col);
    for (var i = 0; i < this.tail.length; i++) {
      rect(this.tail[i].x, this.tail[i].y, 10, 10);
    }
    rect(this.x, this.y, 10, 10);
  }

  this.direction = function(x, y) {
    this.xspeed = x;
    this.yspeed = y;
  }

  this.die = function() {
    for (var i = 0; i < this.tail.length - 1; i++) {
      if (this.x == this.tail[i].x && this.y == this.tail[i].y) {
        restart();
      }
    }
    if (this.x > 400 || this.x < 0 || this.y > 400 || this.y < 0) {
      restart();
    }
  }
}

Apple -

function apple(x, y, z) {
  this.x = x;
  this.y = y;
  this.eaten = false;
  this.col = z;

  this.show = function() {
    fill(z);
    rect(this.x, this.y, 10, 10);
    //ellipseMode(RADIUS);
    //ellipse(this.x,this.y, 50, 50);
  }
}

LSB_

Also, the making of a colour for some reason doesn't work.

{
    "x": 400,
    "y": 210,
    "eaten": false,
    "col": {
      "$ref": "$[0][\"col\"]"
    }
  },
  {
    "x": 60,
    "y": 200,
    "eaten": false,
    "col": [
      180,
      92,
      111
    ]
  },
  {
    "x": 110,
    "y": 20,
    "eaten": false,
    "col": [
      116,
      204,
      59
    ]
  },
  {
    "x": 310,
    "y": 360,
    "eaten": false,
    "col": {
      "$ref": "$[0][\"col\"]"
    }
  }
]

kfrajer

Notice in your first block of code, there are lines missing at the bottom. Is this a fragment of your code or is a sample that can be run by itself?

Related to the color in your json file, what do lines 6 and 34 do? Is that handled by your code?

Kf