看起来你的贪吃蛇JS逻辑已经捋顺了，要实现蛇身块之间的黑色空白，核心是利用CSS布局属性给方块创造间隙就行，下面给你两种简单易上手的方案，都不用大改现有代码：

方法一：用Flex布局的gap属性（推荐） #

这个方法最贴合你想要的[s] [s] [s]效果——蛇身块保持原10px大小，块间自然留出黑色空白，完全不影响游戏逻辑。

你只需要修改updateDOM函数里的行容器设置，给每行加上Flex布局和间隙，同时把游戏板背景设为黑色（间隙会自动继承这个颜色）：

function updateDOM(game) {
  var el = document.getElementById("gameboard");
  el.innerHTML = "";
  el.style.position = "relative";
  el.style.background = "black"; // 游戏板背景设为黑色，间隙会显示成黑色
  el.style.padding = "1px"; // 可选：给游戏板加一圈黑色边框

  var scoreEl = document.getElementById("score");
  scoreEl.innerText = game.score;

  if (game.genApple) {
    generateAppleNoCollision(game);
  }

  for (let i =0;i<game.board.length;i++){
    let snakeRowDiv = document.createElement("div");
    // 新增这两行设置Flex布局和间隙
    snakeRowDiv.style.display = "flex";
    snakeRowDiv.style.gap = "1px"; // 这里可以调整间隙大小，比如2px就是更宽的空白

    for (let j=0;j<game.board[i].length;j++){
      let whichDiv = null;
      if (game.board[i][j]){
        whichDiv = snakeDiv();
      } else if (i==game.apple.x && j == game.apple.y){
        whichDiv = appleDiv();
      }
      if (whichDiv == null){
        whichDiv = emptyDiv();
      }
      snakeRowDiv.appendChild(whichDiv);
    }
    el.appendChild(snakeRowDiv); // 别忘把每行添加到游戏板容器里
  }
}

小提醒：看你原代码的updateDOM最后好像漏了把snakeRowDiv添加到游戏板里，一定要补上el.appendChild(snakeRowDiv)，不然方块不会渲染到页面上哦。

方法二：给蛇身块加黑色边框 #

如果你不想调整布局，也可以直接给蛇身块加边框来实现分隔：

修改snakeDiv函数：

let snakeDiv = function(){
  let div = genericDiv("lime");
  div.style.boxSizing = "border-box"; // 让边框算在10px尺寸内，避免方块变大
  div.style.border = "1px solid black";
  return div;
}

这个方法的小缺点是蛇身的绿色区域会缩小（变成8px），因为边框占了2px空间，所以更推荐第一种方案。

关于你的绘制方式：没问题！ #

你用二维数组记录蛇身位置，再逐行逐列生成对应颜色div的思路，是前端实现贪吃蛇非常常规且合理的方式，完全不需要担心逻辑错误～

内容的提问来源于stack exchange，提问作者Adelin