I am attempting to make the classic snake game in p5.js. I have a snake object and I'm storing the locations of its body in a 2d array, this.data, where each element stores an x value and a y value (at index 0 and 1 respectively). As the snake moves, I push new positions into the array.

I ran into a problem when I tried to detect whether or not the snake had run into itself. What I tried to do was test whether its current position was already in the array using indexOf, reasoning that if the new location was open, it would only occur once in the array, at index one less than the array's length. Otherwise, if the location already existed elsewhere in the array (indicating the snake had run into itself), it would return a value less than the length minus one.

However, this doesn't seem to be happening.

function Snake()
{
    this.x; //x-coordinate of head
    this.y; //y-coordinate of head
    this.dx; //velocity in x-direction
    this.dy; //velocity in y-direction
    this.length; //length of snake
    this.data; //stores all locations snake occupies
    this.alive = 1; //is the snake alive?

    this.update = function(board)
    {
	    if (this.alive)//update head position
	    {
		    this.x += this.dx;
		    this.y += this.dy;
		
		    let tempCoords = [this.x,this.y];
		    this.data.push(tempCoords);
		
		    while (this.data.length > this.length) //janky
		    {
			    this.data = this.data.slice(1);
		    }
		
		    if (this.data.indexOf(tempCoords) + 1 != this.data.length) //make sure snake hasn't hit itself
		    {
			    this.alive = 0;
		    }
	    }
	
    }
}

The final if statement always evaluates false even when the snake intersects itself. From the testing I've done, this seems to be an issue with using indexOf on multidimensional arrays. What solutions are there to this problem?

Essentially, you have the following data and you want to see if the data in head is equal to any of the elements in points

var points = [[1,1],[1,2],[1,3]]
var head = [1,2]

You can check for any matches in an array using Array.some() like this:

var overlap = points.some(p => p[0] === head[0] && p[1] === head[1])
<!-- begin snippet: js hide: true console: true babel: false --> <!-- language: lang-js -->
var points = [[1,1],[1,2],[1,3]]
var head = [1,2]

var overlap = points.some(p => p[0] === head[0] && p[1] === head[1])

console.log(overlap)
<!-- end snippet -->