Написал змейку для двух игроков на Js хотел узнать как написать остановку игры когда голова одной из змей касается хвоста другой?

Question

[Дмитрий]

const canvas = document.getElementById("game-field"); /* announce the game-field */
const ctx = canvas.getContext("2d"); /* seting the spatial dimension */

        /* VARRIABLES */

const gameField = new Image();
gameField.src = "img/game-field.jpg";

const foodImg = new Image();
foodImg.src = "img/food.png";

let box = 32;

let score = 0;

let food = { /* writing a random spawn of food */
    x: Math.floor((Math.random() * 42 + 1)) * box, 
    y: Math.floor((Math.random() * 17 + 4)) * box,
};

let snake = []; /* set the snake spawn */
snake[0] = {
    x: 9 * box,
    y: 10 * box
};

document.addEventListener("keydown", direction);

let dir;

        /* END /VARRIABLES */

function direction(event) {
    if (event.keyCode == 65 && dir != "right")
        dir = "left";
    else if(event.keyCode == 87 && dir != "down")
        dir = "up";
    else if(event.keyCode == 68  && dir != "left")
        dir = "right";
    else if(event.keyCode == 83  && dir != "up")
        dir = "down";
}

function eatTail(head, arr) { /* responding for eating of tail */
    for(let i = 0; i < arr.length; i++) {
        if(head.x == arr[i].x && head.y == arr[i].y)
            clearInterval(game);
    }
}

function eatSecondTail(secondHead, secondArr) { /* responding for eating of tail */
    for(let j = 0; j < secondArr.length; j++) {
        if(secondHead.X == secondArr[j].X && secondHead.Y == secondArr[j].Y)
            clearInterval(game);
    }
}

        /* SECOND PLAYER */
        /* SECOND PLAYER */
        /* SECOND PLAYER */


        /* VARRIABLES 2*/

        let secondScore = 0;

        let secondSnake = []; /* set the snake spawn */
        secondSnake[0] = {
            X: 35 * box,
            Y: 10 * box
        };

        let secondDir;
    
            /* END /VARRIABLES 2 */
    
        document.addEventListener("keydown", secondDirection);

        function secondDirection(secondEvent) {
            if (secondEvent.keyCode == 37 && secondDir != "right")
                secondDir = "left";
            else if(secondEvent.keyCode == 38 && secondDir != "down")
                secondDir = "up";
            else if(secondEvent.keyCode == 39  && secondDir != "left")
                secondDir = "right";
            else if(secondEvent.keyCode == 40  && secondDir != "up")
                secondDir = "down";
        }

function drawGame() { /* responding for image drawing */
    ctx.drawImage(gameField, 0, 0);

    ctx.drawImage(foodImg, food.x, food.y);

    for(let i = 0; i < snake.length; i++) { /* draws a head and tail */
        ctx.fillStyle = i == 0 ? "#3498DB" : "#2874A6";
        ctx.fillRect(snake[i].x, snake[i].y, box, box);
    }

        ctx.fillStyle = "#3498DB"; /* Score */
        ctx.font = "63px Century Gothic";
        ctx.fillText(score, box * 9, box * 1.97);

        let snakeX = snake[0].x;
        let snakeY = snake[0].y;

        if (snakeX == food.x && snakeY == food.y) { /* accrual a score */
            score++;
        }

        if(snakeX == food.x && snakeY == food.y) { /* set the spawn of food */
            food = {
                x: Math.floor((Math.random() * 42 + 1)) * box,
                y: Math.floor((Math.random() * 17 + 4)) * box,
            };
        } else {
            snake.pop();
        }


        if(snakeX < box || snakeX > box * 44 /* set the border of game-field */
             || snakeY < 4 * box || snakeY > box * 20)
             clearInterval(game);

             

         /* prescribing the mobility of the snake */
                if(dir == "left") snakeX -= box;
                if(dir == "right") snakeX += box;
                if(dir == "up") snakeY -= box;
                if(dir == "down") snakeY += box;


                /* PRESCRIBING EATING SNAKES TAIL */
            
            
        let newHead = { /* prescribing the head of snake */
            x: snakeX,
            y: snakeY
        };

        eatTail(newHead, snake);

        snake.unshift(newHead);
    

        /* SECOND PLAYER */
        /* SECOND PLAYER */
        /* SECOND PLAYER */


        for(let j = 0; j < secondSnake.length; j++) { /* draws a head and tail */
            ctx.fillStyle = j == 0 ? "yellow" : "orange";
            
            ctx.fillRect(secondSnake[j].X, secondSnake[j].Y, box, box);
        }
    
            ctx.fillStyle = "yellow"; /* Score */
            ctx.font = "63px Century Gothic";
            ctx.fillText(secondScore, box * 35, box * 1.97);
    
            let secondSnakeX = secondSnake[0].X;
            let secondSnakeY = secondSnake[0].Y;
    
            if (secondSnakeX == food.x && secondSnakeY == food.y) { /* accrual a score */
                secondScore++;
            }
    
            if(secondSnakeX == food.x && secondSnakeY == food.y) { /* set the spawn of food */
                food = {
                    x: Math.floor((Math.random() * 42 + 1)) * box,
                    y: Math.floor((Math.random() * 17 + 4)) * box,
                };
            } else {
                secondSnake.pop();
            }
    
            if(secondSnakeX < box || secondSnakeX > box * 44 /* set the border of game-field */
                 || secondSnakeY < 4 * box || secondSnakeY > box * 20)
                 clearInterval(game);
    
             /* prescribing the mobility of the snake */
                    if(secondDir == "left") secondSnakeX -= box;
                    if(secondDir == "right") secondSnakeX += box;
                    if(secondDir == "up") secondSnakeY -= box;
                    if(secondDir == "down") secondSnakeY += box;
    
                
            let newSecondHead = { /* prescribing the head of snake */
                X: secondSnakeX,
                Y: secondSnakeY
            };
    
            eatSecondTail(newSecondHead, secondSnake);
    
            secondSnake.unshift(newSecondHead);

            if (snakeX == secondSnakeX && snakeY == secondSnakeY) {
                clearInterval(game);
            }

            if (secondArr.X == snakeX && secondArr.Y == snakeY) {
                clearInterval(game)
            }

    }

    let game = setInterval(drawGame, 100); /* update the timed in 100 miliseconds */

Comments

[Владислав Лысков]

Что б тебя мухи закусали за такую публикацию кода

[Денис Юрьев]

Владислав Лысков, зато сам "написал")

[Дмитрий]

Владислав Лысков, Это мой первый проект в Js, помогите пожалуйста .

[Владислав Лысков]

Dmitrie T, ты здеськод опубликуй по нормальному, что бы тот, кто захочет тебе помочь смог его прочесть

[WbICHA]

Dmitrie T, и запихнуть долбанный код в долбанный СПОЙЛЕР!
С каждым разом объёмы кода всё больше и больше, такими темпами сюда уже начнуть запихивтаь весь код не только программы, но и всех нод модулей.

[Ice]

Логика вроде простая.
На каждом обновлении экрана берешь координаты головы первой змеи и проверяешь на совпадение массива координат тела второй змеи.

[Дмитрий]

Ice, На первый взгляд это и мне казалось проста, например написать

if(secondHead.X == arr[i].x && secondHead.Y == arr[i].y) {
clearInterval(game);
}

но это так не работает

У меня получилось только когда головы сталкиваются друг с другом.

[Alixx]

Dmitrie T, нужно сравнивать координаты вокруг головы одной змеи (т.е. соседние координаты) с координатами другой змеи.

[Дмитрий]

Alixx, По идее это должно выглядеть так:

let secondFullSnakeX = secondSnake[j].X;
    let secondFullSnakeY = secondSnake[j].Y;

    if (snakeX == secondFullSnakeX && snakeY == secondFullSnakeY) {
                clearInterval(game);
    }

Но почему-то это так не работает...

[Alixx]

Dmitrie T, долго буду разбираться во всём вашем коде, поэтому просто подскажите snakeX и snakeY это координаты чего конкретно? Голова первой змеи?

[Дмитрий]

Alixx, Да

[Alixx]

Dmitrie T, значит это коорды только вехнего левого угла квадрата. А вам надо сравнивать координаты каждого угла квадрата головы с координатами каждого угла квадрата хвоста второй змеи. Пары координат головы: snakeX и snakeY, snakeX+ширина квадрата и snakeY, snakeX и snakeY + высота квадрата, snakeX+ширина квадрата и snakeY+ высота квадрата. Каждую из этих пар сравнить с каждой такой же парой координат для квадрата хвоста второй змеи. Как только где-то координаты совпали, значит квадраты соприкоснулись. Логически так, если змеи передвигаются чётко на 1 квадрат в какую-либо сторону.

[Alixx]

Dmitrie T, а вы сравниваете только верхний левый квадрат головы одной змеи с верхним левым квадратом второй.

[Дмитрий]

Alixx, Я понимаю что слишком много прошу но не могли бы вы мне показать на практике данный метод,
на любом примере.

[Alixx]

Dmitrie T, извините, не могла раньше написать. Вот суть алгоритма:

let snakeWidth, snakeHeight, /* ширина и высота квадрата, я так понимаю, у вас это переменная box */
snakeX, snakeY, /* координаты x,y верхнего левого угла квадрата головы первой змеи */
 secondSnakeX, secondSnakeY; /* координаты x,y верхнего левого угла квадрата хвоста второй змеи */

/* Массив координат 4х углов квадрата головы первой змеи */
let coordsFirstSnake = [
	[snakeX, snakeY],
	[snakeX + snakeWidth, snakeY],
	[snakeX, snakeY + snakeHeight],
	[snakeX + snakeWidth, snakeY + snakeHeight]
];
/* Массив координат 4х углов квадрата хвоста второй змеи */
let coordsSecondSnake = [
	[secondSnakeX , secondSnakeY],
	[secondSnakeX  + snakeWidth, secondSnakeY],
	[secondSnakeX , secondSnakeY + snakeHeight],
	[secondSnakeX  + snakeWidth, secondSnakeY + snakeHeight]
];
/* В первом цикле перебираем координаты головы первой */ 
for (let coordFirst of coordsFirstSnake) {
  /* Во втором сравниваем каждую координату с координатами хвоста второй */
  for (let coordSecond of coordsSecondSnake) {
    if (coordFirst[0] == coordSecond[0] && coordFirst[1] ==  coordSecond[1]) 
      console.log('координаты совпали! ' + coordFirst[0] +',' + coordFirst[1] + '   ' + coordSecond[0] + ',' + coordSecond[1]);
  }
}

[Дмитрий]

Alixx, Огромное спасибо за ваш алгоритм, правда он у меня не сработал но это уже не ваша проблема. Я думал может быть нужно провести какие нибудь манипуляций с функцией eatTail если она отвечает за поедание хвоста одной змей, значит может отвечать и за другой змеёй, но как бы я не старался ответа я не нашёл.

[Alixx]

Dmitrie T, ну как, у вас получилось что-нибудь? У меня вот так вроде получилось всегда ловить столкновений змей https://jsfiddle.net/g8db5avc/1/

[Дмитрий]

Alixx,
Ну знаете, оно вроде бы работает а вроде бы нет... Чаше всего происходит вот такое.


Ну скорее всего такой режим у меня уже не получиться напишу более простую игру, ибо здесь нужны знание разных библиотек/фреймворков а Js я меньше месяца изучаю. Огромное спасибо за ваше потраченное время, желаю успехов в вашем любимом деле.

[Alixx]

Dmitrie T, да не за что, собственно) (но по картинке я не поняла, что вы хотели показать, змеи не пересекаются, вроде бы это и нужно было не допускать) Ну да ладно. И вам успехов)

[Дмитрий]

Alixx, Я хотел показать что змеи не пересекаются но игра по-любому останавливаться.

[Alixx]

Dmitrie T, а вы полностью мой код взяли или только часть себе скопировали? Т.к. по ссылке, что я скинула, там у меня игра останавливается только когда одна из змей достигает другую. Не получается воспроизвести ситуацию, как на картинке, змеи дальше ползут.