Javascript Can'；我不知道如何在块之间增加一点空间

我在这篇文章的底部写了小蛇游戏

现在，我想在蛇体的每个块之间留出一点（黑色）空间，以便绿色块之间明显地有一点距离

类似于

[s][s][s]

的东西

[s]

现在是一个单独的绿色蛇身块，但我不知道如何在两者之间添加

空间

我对JS很熟悉，但是CSS的这些细节对我来说仍然是个谜。我甚至不确定我一开始是否使用了正确的方法来“画”蛇

let\u游戏；
var-gameLoopHandle；
波林汉德尔变种；
设Snake=函数（forGame、startingDirection、startingBody）{
this.go=startingDirection | | |“RIGHT”；
this.go=函数（方向）{
设snakeHead={x:this.getHead（）.x，y:this.getHead（）.y}；
开关（direction.toLowerCase（））{
案例“左”：
蛇头；
this.go=“LEFT”；
打破
案例“权利”：
蛇头；
this.go=“RIGHT”；
打破
案例“up”：
蛇头；
这是“向上”；
打破
案例“向下”：
蛇头.x++；
这是一个“下降”；
打破
}
让新锁=
生成块（蛇头.x，蛇头.y，
这个.gameInstance.boardSizeX，这个.gameInstance.boardSizeY）；
如果（这个posIsApple（新锁））{
这个.gameInstance.score++；
this.gameInstance.genApple=true；
}否则{
这是。从snake（）中删除bocktail；
}
如果（此posIsTail（新锁））{
this.gameInstance.end=true；
}
这个。addBlockHeadToSnake（新块）；
};
this.body=startingBody | |[
{x:9，y:8}，
{x:9，y:9}，
{x:9，y:10}，
{x:9，y:11}
];
this.gameInstance=forGame；
this.getHead=函数（）{
返回this.body[this.body.length-1]；
};
this.posIsTail=函数（pos）{
对于（设i=0；i您可以在
genericDiv
中设置边框，并将必要的值传递到
snakeDiv
中

let snakeDiv = function(){
   return genericDiv("lime", "1px solid #000000");
}

可以将边框大小设置为所需的大小


let\u游戏；
var-gameLoopHandle；
波林汉德尔变种；
设Snake=函数（forGame、startingDirection、startingBody）{
this.go=startingDirection | | |“RIGHT”；
this.go=函数（方向）{
设snakeHead={x:this.getHead（）.x，y:this.getHead（）.y}；
开关（direction.toLowerCase（））{
案例“左”：
蛇头；
this.go=“LEFT”；
打破
案例“权利”：
蛇头；
this.go=“RIGHT”；
打破
案例“up”：
蛇头；
这是“向上”；
打破
案例“向下”：
蛇头.x++；
这是一个“下降”；
打破
}
让新锁=
生成块（蛇头.x，蛇头.y，
这个.gameInstance.boardSizeX，这个.gameInstance.boardSizeY）；
如果（这个posIsApple（新锁））{
这个.gameInstance.score++；
this.gameInstance.genApple=true；
}否则{
这是。从snake（）中删除bocktail；
}
如果（此posIsTail（新锁））{
this.gameInstance.end=true；
}
这个。addBlockHeadToSnake（新块）；
};
this.body=startingBody | |[
{x:9，y:8}，
{x:9，y:9}，
{x:9，y:10}，
{x:9，y:11}
];
this.gameInstance=forGame；
this.getHead=函数（）{
返回this.body[this.body.length-1]；
};
this.posIsTail=函数（pos）{
对于（设i=0；i您需要执行以下操作
css:

并按如下方式更新
snakeDiv
：

// pass extra parameter to track the snake blocks
let snakeDiv = function(){
    return genericDiv("lime", 'snake');
}
// depending on the extra parameter add extra css property to snake blocks only
let genericDiv = function(color, snake){
  let returnDiv = document.createElement("div");
  returnDiv.style.height = "10px";
  returnDiv.style.width = "10px";
  returnDiv.style.background = color;
    if(snake){
        returnDiv.style.borderWidth = "1px";
        returnDiv.style.borderColor = "black";
        returnDiv.style.borderStyle = "solid";
    }
  return returnDiv;
}

工作小提琴：


let\u游戏；
var-gameLoopHandle；
波林汉德尔变种；
设Snake=函数（forGame、startingDirection、startingBody）{
this.go=startingDirection | | |“RIGHT”；
this.go=函数（方向）{
设snakeHead={x:this.getHead（）.x，y:this.getHead（）.y}；
开关（direction.toLowerCase（））{
案例“左”：
蛇头；
this.go=“LEFT”；
打破
案例“权利”：
蛇头；
this.go=“RIGHT”；
打破
案例“up”：
蛇头；
这是“向上”；
打破
案例“向下”：
蛇头.x++；
这是一个“下降”；
打破
}
让新锁=
生成块（蛇头.x，蛇头.y，
这个.gameInstance.boardSizeX，这个.gameInstance.boardSizeY）；
如果（这个posIsApple（新锁））{
这个.gameInstance.score++；
this.gameInstance.genApple=true；
}否则{
这是。从snake（）中删除bocktail；
}
如果（此posIsTail（新锁））{
this.gameInstance.end=true；
}
这个。addBlockHeadToSnake（新块）；
};
this.body=startingBody | |[
{x:9，y:8}，
{x:9，y:9}，
{x:9，y:10}，
{x:9，y:11}
];
this.gameInstance=forGame；
this.getHead=函数（）{
返回this.body[this.body.length-1]；
};
this.posIsTail=函数（pos）{
对于（让i=0；这太好了！当它与电路板的最外层极限相切时，看起来有点奇怪，但我现在看到了方向。谢谢！@Adelin您可以通过向所有div（genericDiv）添加边框来避免这个问题。将此行
returnDiv.style.border=border；
替换为
returnDiv.style.border=“1px solid\000000”
很酷，现在我甚至不需要知道这是不是一个蛇形潜水艇
// pass extra parameter to track the snake blocks
let snakeDiv = function(){
    return genericDiv("lime", 'snake');
}
// depending on the extra parameter add extra css property to snake blocks only
let genericDiv = function(color, snake){
  let returnDiv = document.createElement("div");
  returnDiv.style.height = "10px";
  returnDiv.style.width = "10px";
  returnDiv.style.background = color;
    if(snake){
        returnDiv.style.borderWidth = "1px";
        returnDiv.style.borderColor = "black";
        returnDiv.style.borderStyle = "solid";
    }
  return returnDiv;
}