JavaScript Snake Game with two Snakes (Local Mutiplayer)

let canvas = document.getElementById('game');
let ctx = canvas.getContext('2d');

let grid = 10;
let count = 0;

//Scores
let Score = 0;
let HighScore = 0;

let Speed = 15;

//Snake Base Stats
let snake = {
  x: 200,
  y: 200,
  dx: grid,
  dy: 0,
  cells: [],
  maxCells: 4,
  alive: true, // moved the global var here
  active: true, // added this in order to track multiple snakes being active
  color: 'white' // moved this here to define it per-snake
};

let snake2 = {
  x: 200,
  y: 200,
  dx: grid,
  dy: 0,
  cells: [],
  maxCells: 4,
  alive: true,
  active: false,
  color: 'red'
};

// keep track of active snakes
let snakes = [
  snake
];

//First Apple Spawn
let apple = {
  x: 320,
  y: 320,
  color: 'gold'
};

//Random Int for Apple Spawn
function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min)) + min;
}

function loop() {
  requestAnimationFrame(loop);

  //Tic speed
  if (++count < Speed) {
    return;
  }

  count = 0;
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  moveSnakes(snakes, canvas);

  //Apple Color
  ctx.fillStyle = apple.color;
  ctx.fillRect(apple.x, apple.y, grid - 1, grid - 1);

  drawSnakes(snakes, ctx, apple);
}


//Arrow Key Movement
document.addEventListener('keydown', function(e) {

  if (e.which === 37 && snake.dx === 0) {
    snake.dx = -grid;
    snake.dy = 0;
  } else if (e.which === 38 && snake.dy === 0) {
    snake.dy = -grid;
    snake.dx = 0;
  } else if (e.which === 39 && snake.dx === 0) {
    snake.dx = grid;
    snake.dy = 0;
  } else if (e.which === 40 && snake.dy === 0) {
    snake.dy = grid;
    snake.dx = 0;
  }
});

//TODO: add movement for snake2

requestAnimationFrame(loop);

function moveSnakes(snakes, canvas) {
  snakes.forEach(function(snake) {
    if (!snake.active) {
      return;
    }

    snake.x += snake.dx;
    snake.y += snake.dy;

    if (snake.x < 0) {
      snake.x = canvas.width - grid;
    } else if (snake.x >= canvas.width) {
      snake.x = 0;
    }

    if (snake.y < 0) {
      snake.y = canvas.height - grid;
    } else if (snake.y >= canvas.height) {
      snake.y = 0;
    }

    snake.cells.unshift({
      x: snake.x,
      y: snake.y
    });

    if (snake.cells.length > snake.maxCells) {
      snake.cells.pop();
    }
  });
}

function drawSnakes(snakes, ctx, apple) {
  snakes.forEach(function(snake) {
    if (!snake.active) {
      return;
    }

    //Snake Color
    ctx.fillStyle = snake.color;

    snake.cells.forEach(function(cell, index) {
      //Snake Color
      ctx.fillRect(cell.x, cell.y, grid - 1, grid - 1);

      //Snake Eat Apple
      if (cell.x === apple.x && cell.y === apple.y) {
        snake.maxCells++;
        apple.x = getRandomInt(0, 25) * grid;
        apple.y = getRandomInt(0, 25) * grid;
        SnakeScore(snake);
      }

      //Snake Dies
      for (var i = index + 1; i < snake.cells.length; i++) {

        if (cell.x === snake.cells[i].x && cell.y === snake.cells[i].y) {

          SummonSnake(snake);
          snake.alive = false;
          SnakeScore();
        }
      }
    });
  });
}

//Score
function SnakeScore(snake) {

  if (snake.alive) {
    Score++;
    document.getElementById("Score").innerHTML = Score;
  } else if (!snake.alive) {
    Score = 0;
    document.getElementById("Score").innerHTML = Score;
    snake.alive = true;
  }
  if (Score > HighScore) {
    SnakeHighscore();
  }
}

//Highscore
function SnakeHighscore() {

  HighScore = Score;
  document.getElementById("Highscore").innerHTML = HighScore;

}

//Snake Summon Stats
function SummonSnake(snake, y) {

  snake.x = 200;
  snake.y = y;
  snake.cells = [];
  snake.maxCells = 4;
  snake.dx = grid;
  snake.dy = 0;

}

function activateSnakes(numberOfSnakes) {
  if (numberOfSnakes === 1) {
    SummonSnake(snake, 200);
    snakes = [snake];
    snake2.active = false;
  } else if (numberOfSnakes === 2) {
    SummonSnake(snake, 180);
    SummonSnake(snake2, 220);
    snakes = [snake, snake2];
    snake2.active = true;
  }
}

//Gamemodes
function GameMode() {
  value = document.getElementById('valueGames').value;

  if (value === "E") {
    Speed = 15;
    activateSnakes(1);
  } else if (value === "M") {
    Speed = 10;
    activateSnakes(1);
  } else if (value === "H") {
    Speed = 5;
    activateSnakes(1);
  } else if (value === "Multiplayer") {
    Speed = 5;
    activateSnakes(2);
  }
  
  Score = 0;
  document.getElementById("Score").innerHTML = Score;
}

GameMode();

body {
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url('https://wallpapercave.com/wp/wp3493594.png');
}

canvas {
  width: 403px;
  height: 403px;
  border: 2px solid rgb(255, 213, 0);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#ScoreCSS {
  margin-right: 50px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="main.css">
  <meta charset="UTF-8">
  <title>Snake NICEEE</title>
</head>

<body>
  <!-- Scores -->
  <h1 id="ScoreCSS">Score: <a id="Score">0</a></h1>
  <h1>Highscore: <a id="Highscore">0</a></h1>

  <!-- Canvas (Game Field)-->
  <canvas id="game" width="400" height="400"></canvas>

  <!-- Dropdown for GameModes -->
  <select id="valueGames" onchange="GameMode()">
    <option value="E">Easy</option>
    <option value="M">Middle</option>
    <option value="H">Hard</option>
    <option value="Multiplayer" selected>Multiplayer</option>
  </select>
</body>

</html>