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

p5.js Coding Questions
1

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)

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);
  }
}
1 Like
2
3

Would this work as a splice? `

 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;
    }
  }
4

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

// 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

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)”

1 Like
5

splice() isn’t a method from the class p5: reference | p5.js
But from the class Array:

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

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

2 Likes
6

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!