Why isn't includes working in my javascript snake game

I’m a javascripot beginner learning CSS and HTML aswell. I’m practicing by creating a snake game, as many do, but I’m not following a tutorial. So I know my code is probably terrible and doesn’t follow good practices, but I’m just doing this for fun.

let playerXpos =0;
let playerYpos =0;

let coordArray = [[playerXpos, playerYpos]];

//player movement
document.addEventListener('keydown', (e) => playerMove(e.key));
function playerMove (key) {
    clearInterval(playerRightInterval);
    clearInterval(playerLeftInterval);
    clearInterval(playerUpInterval);
    clearInterval(playerDownInterval);
    switch(key) {
        case "ArrowRight":
            playerRightInterval = setInterval(function () {
                if (playerXpos > 67.5) {deathFunction();} else {
                    playerXpos += 1.5;
                    playerGrowth();
                }
            }, 90);
        break;     
        case "ArrowLeft":
            playerLeftInterval = setInterval(function () {
                if (playerXpos <= 0) {deathFunction();} else {
                    playerXpos -= 1.5;
                    playerGrowth();
                }
            }, 90);
        break;
        case "ArrowDown":
            playerDownInterval = setInterval(function () {
                if (playerYpos > 57.5) {deathFunction();} else {
                    playerYpos += 1.5;
                    playerGrowth();
                }
            }, 90);
            break;
        case "ArrowUp":
            playerUpInterval = setInterval(function () {
                if (playerYpos <= 0) {deathFunction();} else {
                    playerYpos -= 1.5;
                    playerGrowth();
                }
            }, 90);
            break;
    }
}

//player growing & more moving
function playerGrowth () {
    if (coordArray.includes([playerXpos, playerYpos])) {
        console.log("ya dead lol");
    }
    coordArray.unshift([playerXpos, playerYpos]);
    if (playerXpos == appleX && playerYpos == appleY) {
        playerArray.push(document.createElement("div"));
        playerArray[playerArray.length-1].className = "player";
        wholeSnake.appendChild(playerArray[playerArray.length-1]);
        playerArray[playerArray.length-1].style.backgroundColor = colourArray[(playerArray.length -1)-(Math.floor((playerArray.length -1)/6)*6)];
        appleMove();
    } else {
        coordArray.pop();
    }
    for (let i=0; i < coordArray.length; i++) {
        playerArray[i].style.marginLeft = coordArray[i][0] + "vh";
        playerArray[i].style.marginTop = coordArray[i][1] + "vh";
    }
}

I have the postions of the "snake pieces" stored in an array, that uses .unshift and .pop to to update the positions as the snake moves. I figured to check if the snak hits itself, I could just check whether the coordinate array contains the next position of the snake, and if it did, to run the death function, but for some reason it just won’t work.

The line that I’m tallking about is just under the comment heading "player growing & more moving"

I’ve been stuck on this for ages, please help!

>Solution :

if (coordArray.includes([playerXpos, playerYpos])) {

In JavaScript, there are essentially two types of values that variables can hold. Some of them, like numbers and strings, are known as "primitives". Others – objects, functions, and arrays – are reference values. The key difference here is that if you try to compare two reference values, even if they contain identical data, they will not appear to be the same.

3 === 3; // true
[3] === [3]; // false

It may help to think of arrays and objects as storing a value that is a label for the location in memory where their data is kept.

So, in your case, includes doesn’t work because you’re constructing a new array, which even though it contains the same data as what you’re looking for it isn’t actually the same.

To get around this, you essentially need to write your own function to figure out if your coordinate information is the same. You can use a different array function, find, to do this.

For example:

if (coordArray.find(
  (coords) => 
    coords[0] === playerXpos &&
    coords[1] === playerYpos
) {

This way, your code will compare the x and y coordinates (which are numbers, so can be compared directly) instead of comparing two arrays, so it should be able to find what you need.

The find function is a little different to includes in that it doesn’t return true or false, instead it returns either the element it finds (if it found one) or undefined. In this case, that will work just as well in your if condition because if it finds something that will be truthy, whereas undefined is falsy.

EDIT: Alternately, you could use the some method, which works similarly to find but does return true or false.