Splicing an array of objects (Pacman)

wjsandbe

I'm trying to make a simple version of pacman. I'm having a problem using the splice() function. I have an array of ellipses (called Food) and as the orange ellipse (pacman) moves over the food, I want the food to disappear. The problem right now is that about 39 food disappear instead of a single ellipse. I'm not sure what I'm doing wrong. My code is below:

    var foods = [];
    var pacman;
    var w = 40;


    function setup() {
      createCanvas(400, 400);
      var t = 0;
      pacman = new Pacman(0, 0);
      for (var f = 0; f < 10; f++) {
        for (var g = 0; g < 10; g++) {
          foods[t++] = new Food(g * 40 + 15, f * 40 + 15);
        }
      }
    }

    function draw() {
      background(51);
      pacman.show();
      pacman.borders();

      for (var i = 0; i < foods.length; i++) {
        foods[i].cook();
        if (pacman.eats(foods[i])) {
          foods[i].eaten();
        }
      }
      for (var j = 0; j < foods.length; j++) {
        if (foods[j].toDelete) {
          foods.splice(1, j);
          console.log(foods.length);
        }
      }
    }

    function Food(x, y) {
      this.x = x;
      this.y = y;
      this.r = 10;
      this.toDelete = false;

      this.cook = function() {
        fill(255);
        ellipseMode(CORNER);
        ellipse(this.x, this.y, this.r, this.r);
      }
        this.eaten = function() {
          this.toDelete = true;
      }
    }

    function keyPressed() {
      if (keyCode === RIGHT_ARROW) {
        pacman.moveh(1);
      }
      if (keyCode === LEFT_ARROW) {
        pacman.moveh(-1);
      }
      if (keyCode === UP_ARROW) {
        pacman.movev(-1);
      }
      if (keyCode === DOWN_ARROW) {
        pacman.movev(1);
      }
    }

    function Pacman(x, y) {
      this.x = x;
      this.y = y;
      this.toDelete = false;


      this.show = function() {
        noStroke();
        fill(255, 146, 0);
        ellipseMode(CORNER);
        ellipse(this.x, this.y, w, w);
      }

      this.moveh = function(dir) {
        this.x += dir * w;
      }
      this.movev = function(dir) {
        this.y += dir * w;
      }
      this.borders = function() {
        if (this.x > width - 1) {
          this.x = 0;
        }
        if (this.x < 0) {
          this.x = width - w;
        }

        if (this.y > height - 1) {
          this.y = 0;
        }
        if (this.y < 0) {
          this.y = height - w;
        }
      }
        this.eats = function(Food) {
        var d = dist(this.x, this.y, Food.x, Food.y);
        if (d < Food.x) {
          console.log("eaten");
          return true;
        } else {
          return false;
        }
      }
    }

TfGuy44

I would not splice the array at all. Instead, use the toDelete variable in a conditional statement in Food's cook() method. Do not draw the food if it has been eaten.

Also, I would stop using the drawn position of the food and pacman as the values for x and y. Instead, realize that all your objects are on a grid of squares, and number them with whole number indexes, starting at (0,0) in the top left. Then you can use the value of w in your draw() functions to position things.

Then you can check if a Food and a pacman share a same cell without relying on dist(). Also, why compare the distance, d, with Food.x? That's the logical mistake causing your food to be eaten at the wrong time.

GoToLoop

https://developer.Mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

https://forum.Processing.org/two/discussions/tagged?Tag=splice()

wjsandbe

TfGuy44 could give me an example of using toDelete within my cook() method? something like?:

if (!toDelete){
fill(255);
ellipse(this.x, this.y, this.r, this.r)}

TfGuy44

Remember the this. part, since that variable property is part of your Food class.

GoToLoop

...since your variable is part of your Food class.

Actually toDelete isn't a variable, but a property. :P
In order to be considered a variable in JS, it needs to be declared using 1 of these 5 keywords:

1. var
2. let
3. const
4. function
5. class

Otherwise it's a property of some object rather than a variable of some function or global scope. >-)

GoToLoop

P.S.: Parameters are also variables. But declared inside a function's parenthesis. :\">