how to join the body of snake in 2D snake game

Question

i'm making a snake game in javaScript from scratch. The problem is that the snake looks disjoint(see image). How can I connect the body(rectangles) of the snake?

here is the code of drawing snake:

    paintSnake(margin) {
    //draws the body of the snake
    this.snake.forEach((egg) => {
      //console.log(egg)
      const isSnakeHead = egg.cellX === this.headCellX && egg.cellY === this.headCellY
      if (!isSnakeHead) {
        this.ctx.fillStyle = "#9ef739"
        this.ctx.fillRect(egg.cellX * this.cellSize + margin,
          egg.cellY * this.cellSize + margin,
          this.cellSize - 2 * margin,
          this.cellSize - 2 * margin)
      }
    })
    //snake head
    // this.ctx.beginPath()
    // this.ctx.lineWidth = 4
    // this.ctx.strokeStyle = "red"
    // this.ctx.rect(this.headCellX * this.cellSize + margin, this.headCellY * this.cellSize + margin, this.cellSize - 2 * margin, this.cellSize - 2 * margin)
    // this.ctx.stroke()
    let head =
    {
      X: this.headCellX * this.cellSize + margin,
      Y: this.headCellY * this.cellSize + margin,
      width: this.cellSize,
      height: this.cellSize
    }

    const args = [head.X,
    head.Y,
    head.height,
    head.width]
    //draw the head of the snake
    if (this.direction === "up") {
      this.ctx.drawImage(
        snakeHeadUpImg,
        ...args)
    }
    else if (this.direction === "down") {
      this.ctx.drawImage(
        snakeHeadDownImg,
        ...args)
    }
    else if (this.direction === "right") {
      this.ctx.drawImage(
        snakeHeadRightImg,
        ...args)
    }
    else if (this.direction === "left") {
      this.ctx.drawImage(
        snakeHeadLeftImg,
        ...args)
    }
  }
}

to see the whole code go to: https://github.com/hackasaur/snake-game/blob/master/main.js

i know that the rectangles(body parts) need to be extended in the direction of the next rectangle but how can i achieve this?

Answer 1

Assuming that your snake's body is stored in ordered sequence from head to tail:

for (let p = 0; p < snake.length; p++)
{
    if (p == 0)
    {
        //use head sprite with your given direction
    }
    else // p > 0
    {
        //check last piece against next piece.
        let o = p - 1;
        let previous = snake[o];
        let current  = snake[p];

        //...these look like {cellX: 2, cellY: 5}

        if (current.cellX == previous.cellX) //they're on the same column
        {
            if (Math.abs(current.cellY - previous.cellY) == 1) //and adjacent rows
            {
                //use vertical body sprite
            }

        }
        else
        if (current.cellY == previous.cellY) //they're on the same row
        {
            if (Math.abs(current.cellX - previous.cellX) == 1) //and adjacent columns
            {
                //use horizontal body sprite
            }

        }
    }
}