# (web p5.js) 2048 - Lots of Undefined errors when I do remove(array, index)

**URL:** <https://discourse.processing.org/t/web-p5-js-2048-lots-of-undefined-errors-when-i-do-remove-array-index/9899>\
**Category:** Coding Questions\
**Created:** [April 2, 2019, 10:25pm UTC](https://discourse.processing.org/t/web-p5-js-2048-lots-of-undefined-errors-when-i-do-remove-array-index/9899 "2019-04-02T22:25:06Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![ILikePi](https://avatars.discourse-cdn.com/v4/letter/i/7ab992/32.png) [@ILikePi](https://discourse.processing.org/u/ILikePi)\
**Post date:** [April 2, 2019, 10:25pm UTC](https://discourse.processing.org/t/web-p5-js-2048-lots-of-undefined-errors-when-i-do-remove-array-index/9899/1 "2019-04-02T22:25:07Z")

</div>

This is the game of 2048, I am attempting to recreate it to practice using p5. The code is probably very messy, sorry in advance.

The First Error I get is " _remove is not defined_ "  
The Second Error I get is " _fill is not defined_ "  
The Third Error I get is " _random is not defined_ " (or floor)

```auto
tiles = [];
let r = 0;
let c = 0;

//buttons

let buttonUP;
let buttonLEFT;
let buttonDOWN;
let buttonRIGHT;

let dir = -10;
let tileamount = 0;
let gtp = false;

function setup() {
  createCanvas(400, 400);
  background(70);
  tiles = new tile();
  tiles[0] = new tile();
  tileamount = 1;
  textSize(32);

//button setup
  buttonUP = createButton('^');
  buttonUP.position(180, 0);
  buttonUP.size(40, 40);
  buttonUP.mousePressed(buttonUPc);

  buttonLEFT = createButton('<');
  buttonLEFT.position(0, 180);
  buttonLEFT.size(40, 40);
  buttonLEFT.mousePressed(buttonLEFTc);

  buttonRIGHT = createButton('>');
  buttonRIGHT.position(360, 180);
  buttonRIGHT.size(40, 40);
  buttonRIGHT.mousePressed(buttonRIGHTc);

  buttonDOWN = createButton('v');
  buttonDOWN.position(180, 360);
  buttonDOWN.size(40, 40);
  buttonDOWN.mousePressed(buttonDOWNc);

}

function draw() {
  background(70);
  for (let i = 0; i < tileamount; i++) {
    tiles[i].show();
    tiles[i].move(i);
  }
// checking if to place a tile
  if (gtp == true) {
    gtp = false;
    tiles[tileamount] = new tile();
    tileamount++;
  }
  dir = -10;
}

function checktile(r, c, n) {

  for (let i = 0; i < tileamount; i++) {
    if (tiles[i].rows == r && tiles[i].cols == c) {
      if (tiles[i].number == tiles[n].number) {
// where the errors originate
        remove(tiles, i);
        tileamount--;
        tiles[n].number *= 2;
        return true;
      }
      return false;
    }
  }
  if (r < 0 || c < 0 || c > 4 || r > 4) {
    return false;
  }
  return true;
}

function getrantile() {
  r = floor(random(0, 4));
  c = floor(random(0, 4));

  for (let i = 0; i < tileamount; i++) {
    if (tiles[i].rows == r && tiles[i].cols == c) {
      r = floor(random(0, 4));
      c = floor(random(0, 4));
    }
  }
}

function getran() {
  let x = random(0, 4);
  if (x > 2) {
    return 2;
  }
  if (x <= 2) {
    return 4;
  }
}

function buttonUPc() {
  dir = 1;
}

function buttonLEFTc() {
  dir = -1;
}

function buttonRIGHTc() {
  dir = -2;
}

function buttonDOWNc() {
  dir = 2;
}
class tile {
  constructor() {
    getrantile();
    this.rows = r;
    this.cols = c;
    this.number = getran();
  }

  move(i) {
    if (dir == 1) {
      if (checktile(this.rows, this.cols - 1, i) == true) {
        this.cols -= 1;
        gtp = true;
        tiles[i].move(i);
      }
    }

    if (dir == 2) {
      if (checktile(this.rows, this.cols + 1, i) == true) {
        this.cols += 1;
        gtp = true;
        tiles[i].move(i);
      }
    }

    if (dir == -1) {
      if (checktile(this.rows - 1, this.cols, i) == true) {
        this.rows -= 1;
        gtp = true;
        tiles[i].move(i);
      }
    }

    if (dir == -2) {
      if (checktile(this.rows + 1, this.cols, i) == true) {
        this.rows += 1;
        gtp = true;
        tiles[i].move(i);
      }
    }

  }

  show() {
    fill(220, 20, 20);
    rect(this.rows * 100, this.cols * 100, 100, 100);
    fill(255, 255, 255);
    text(this.number, this.rows * 100 + 40, this.cols * 100 + 60);
  }
}

```

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [April 3, 2019, 12:41am UTC](https://discourse.processing.org/t/web-p5-js-2048-lots-of-undefined-errors-when-i-do-remove-array-index/9899/2 "2019-04-03T00:41:48Z")

</div>

> **[Array.prototype.splice()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice)**
>
> The splice() method changes the contents of an array by removing or replacing existing elements and/or adding new elements in place.

---

<div class="post-metadata">

**Author:** ![ILikePi](https://avatars.discourse-cdn.com/v4/letter/i/7ab992/32.png) [@ILikePi](https://discourse.processing.org/u/ILikePi)\
**Post date:** [April 3, 2019, 1:11am UTC](https://discourse.processing.org/t/web-p5-js-2048-lots-of-undefined-errors-when-i-do-remove-array-index/9899/3 "2019-04-03T01:11:56Z")

</div>

Would this work as a splice? `

```auto
 for (let i = 0; i < tileamount; i++) {
    if (tiles[i].rows == r && tiles[i].cols == c) {
      if (tiles[i].number == tiles[n].number) {
        splice(tiles, i);
        tileamount--;
        tiles[n].number *= 2;
        return true;
      }
      return false;
    }
  }

```

---

<div class="post-metadata">

**Author:** ![ILikePi](https://avatars.discourse-cdn.com/v4/letter/i/7ab992/32.png) [@ILikePi](https://discourse.processing.org/u/ILikePi)\
**Post date:** [April 3, 2019, 1:29am UTC](https://discourse.processing.org/t/web-p5-js-2048-lots-of-undefined-errors-when-i-do-remove-array-index/9899/4 "2019-04-03T01:29:09Z")

</div>

New Error, It says that tiles[i].show(); is not a function… but there is

```auto
// This is in the *tile* class
 show() {
    fill(220, 20, 20);
    rect(this.rows * 100, this.cols * 100, 100, 100);
    fill(255, 255, 255);
    text(this.number, this.rows * 100 + 40, this.cols * 100 + 60);
  }

```

and this is the code which has the error

```auto
function draw() {
  background(70);
  for (let i = 0; i < tileamount; i++) {
    if (tiles[i]){
    tiles[i].show();
    tiles[i].move(i);
    }
  }
  if (gtp == true) {
    gtp = false;
    tiles[tileamount] = new tile();
    tileamount++;
  }
  dir = -10;
}

```

the error occurs after the splice.  
The error is “_Uncaught TypeError: tiles[i].show is not a function (sketch: line 46)_”

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [April 3, 2019, 6:40am UTC](https://discourse.processing.org/t/web-p5-js-2048-lots-of-undefined-errors-when-i-do-remove-array-index/9899/5 "2019-04-03T06:40:47Z")

</div>

> [@ILikePi](#):
>
> `splice(tiles, i);`

**splice()** isn’t a method from the class **_p5_** : [reference | p5.js](http://p5js.org/reference/)  
But from the class **_Array_** :

> **[Array - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)**
>
> The Array object, as with arrays in other programming languages, enables storing a collection of multiple items under a single variable name, and has members for performing common array operations.

> [@ILikePi](#):
>
> `for (let i = 0; i < tileamount; i++) {`

Arrays already got a property which tracks its current size called _length_:

> **[Array: length - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/length)**
>
> The length data property of an Array instance represents the number of elements in that array. The value is an unsigned, 32-bit integer that is always numerically greater than the highest index in the array.

You should host & update your most current attempt on Open Processing:

> **[My Sketch - Guest User - OpenProcessing](https://openprocessing.org/sketch/create)**

---

<div class="post-metadata">

**Author:** ![ILikePi](https://avatars.discourse-cdn.com/v4/letter/i/7ab992/32.png) [@ILikePi](https://discourse.processing.org/u/ILikePi)\
**Post date:** [April 3, 2019, 7:22pm UTC](https://discourse.processing.org/t/web-p5-js-2048-lots-of-undefined-errors-when-i-do-remove-array-index/9899/6 "2019-04-03T19:22:18Z")

</div>

Wow, OpenProcessing is very useful. Though, the error if I use the Array.splice is _Line 65: Uncaught TypeError: tiles.splice is not a function_

Thanks for helping me so far!