蛇游戏 - 我的蛇在每一步都留下了痕迹

Question

我无法让我的蛇转身而不留下痕迹。每当我的蛇转向不同的方向时，它就会留下自己的碎片。每一块都是一个应用于div块的“悬停”。

我创建了一个函数，我希望在转弯时删除多余的部分。我的函数removeExtra确实在每个回合中移除了多余的碎片（每次箭头被击中时都会从moveSnake函数中调用removeExtra），但是当它转动时它也会移除蛇的每一块。因此，每当我转弯时，蛇就会从那个方向开始，然后扩展到当前的大小。用户可以玩，永远不会碰到任何蛇的身体碎片。如果我不使用这个功能，虽然它在整个棋盘上留下了很少的蛇屎！

有人可以帮我修复我的removeExtra函数，以便它只删除不属于蛇体数组的悬停类吗？（var snake）在removeExtra函数中我创建了一个数组每个悬停类（每个蛇块）。然后我在for循环中使用它的长度。我也尝试使用这个数组和当前的snake数组（var combo）之间的区别作为for循环的第二个参数，但是当我转弯时，这并不能始终清除蛇位。

我意识到我的代码很糟糕。我这样做比应该更复杂。我应该用画布。但是我已经走到这一步了，我希望有一些方法来挽救比赛，再也不会想到蛇了。如果真的没有办法解决我所造成的混乱，请告诉我，这样我就可以继续我的生活。谢谢！

Here is the Codepen with the game.

这是给我带来麻烦的功能：

removeExtra = function(){

var array = [];

$(".hover").each(function() {
  array.push($(this).attr("data"));
});

var len = array.length
var len2 = snake.length
var combo = len-len2

for (var i=0;i<len;i++){
  $('*[data="' + array[i] + '"]').removeClass("hover");

}}

由于这是一项正在进行的工作（惊喜！），如果您没有看到任何蓝色的“食物”，只需刷新页面。箭头键会移动蛇。您可能必须先点击电路板。

//In the moveSnake function I had to use code from the below link in order to ignore multiple keydown events.
//https://stackoverflow.com/questions/9098901/how-to-disable-repetitive-keydown-in-jquery

$(document).ready(function() {
  makebox();
  addSnake();
  moveSnake();
  addBorder();
  addFood();
  killSnake();
  addToSnake();
});

function makebox() {
  var size = 30; //24
  var boxSize = 20; //12
  for (i = 1; i <= size * size; i++) {
    $("#container").append("<div class='box'></div>");
  };
  $("#container").width(size * boxSize + "px");
  $(".box").width(boxSize + "");
  $(".box").height(boxSize + "px");
  $(".box").each(function(i) {
    $(this).attr('data', (i + 1));
  });
};

function addBorder() {
  //find all of the border divs and add a border class to them
  $(".box").each(function() {

    if ($(this).attr('data') % 25 == 0) {
      $(this).addClass("right-border")
    } else if ($(this).attr('data') % 25 == 1) {
      $(this).addClass("left-border")
    } else if ($(this).attr('data') < 25) {
      $(this).addClass("top-border")
    } else if ($(this).attr('data') >= 877) {
      $(this).addClass("bottom-border")
    }
  })
}

function addSnake() {

  var rightTime, leftTime, downTime, upTime;


  moveRight = function() {
    down = {}
    rightTime = setInterval(function() {
      for (var i = 0; i < snake.length; i++) {
        snake[i]++
          $('*[data="' + snake[i] + '"]').addClass("hover moving")
        $('*[data="' + (snake[snake.length - 1] - snake.length) + '"]').removeClass("hover");

      }
    }, 150)

  };

  moveLeft = function() {
    down = {}
    leftTime = setInterval(function() { //snake -= 1
      for (var i = 0; i < snake.length; i++) {
        snake[i] -= 1
        $('*[data="' + snake[i] + '"]').addClass("hover");
        $('*[data="' + (snake[snake.length - 1] + snake.length) + '"]').removeClass("hover");

      }
    }, 150)

  };

  moveDown = function() {
    down = {}
    downTime = setInterval(function() { //snake += 25
      for (var i = 0; i < snake.length; i++) {
        snake[i] += 25
        $('*[data="' + snake[i] + '"]').addClass("hover");
        $('*[data="' + (snake[snake.length - 1] - 25 * snake.length) + '"]').removeClass("hover");


      }
    }, 150)

  };

  moveUp = function() {
    down = {}
    upTime = setInterval(function() { //snake -= 25
      for (var i = 0; i < snake.length; i++) {
        snake[i] -= 25
        $('*[data="' + snake[i] + '"]').addClass("hover");
        $('*[data="' + (snake[snake.length - 1] + 25 * snake.length) + '"]').removeClass("hover");
      }
    }, 150)

  };

  addTail = function() {
    snake.push(snake[snake.length - 1])
  }

  var snake = [42]

  $('*[data="' + snake[0] + '"]').addClass("hover");

  var down = {};

  removeExtra = function() {

    var array = [];

    $(".hover").each(function() {
      array.unshift($(this).attr("data"));
    });

    var len = array.length
    var len2 = snake.length
    var combo = len - len2

    for (var i = 0; i < len; i++) {
      $('*[data="' + array[i] + '"]').removeClass("hover");

    }
  }

  moveSnake = function() {

    $(document).keydown(function(event) {

      var keycode = (event.keyCode ? event.keyCode : event.which);

      if (keycode == '39') {
        if (down['39'] == null) {
          window.clearInterval(leftTime);
          window.clearInterval(downTime);
          window.clearInterval(upTime);
          moveRight();
          removeExtra();
          down['39'] = true;
        }
      } else if (keycode == '37') {
        if (down['37'] == null) {
          window.clearInterval(rightTime);
          window.clearInterval(downTime);
          window.clearInterval(upTime);
          moveLeft();
          removeExtra();
          down['37'] = true;
        }
      } else if (keycode == '40') {
        if (down['40'] == null) {
          window.clearInterval(leftTime);
          window.clearInterval(rightTime);
          window.clearInterval(upTime);
          moveDown();
          removeExtra();
          down['40'] = true;
        }
      } else if (keycode == '38') {
        if (down['38'] == null) {
          window.clearInterval(leftTime);
          window.clearInterval(rightTime);
          window.clearInterval(downTime);
          moveUp();
          removeExtra();
          down['38'] = true;
        }
      }

    });

    addToSnake = function() {
      var count = 0;

      var config = {
        attributes: true,
        childList: true,
        characterData: true
      };

      $(".box, .food").each(function() {
        var target = this;
        var observer = new MutationObserver(function(mutations) {
          mutations.forEach(function(mutation) {
            if ($(".food").hasClass("hover") == true) {
              $(".box").removeClass("food")
              addTail();
              addFood();
            }
          });
        });

        observer.observe(target, config);

      });

    }

    killSnake = function() {
      var config = {
        attributes: true,
        childList: true,
        characterData: true,
        subtree: true
      };

      $(".right-border, .left-border, .top-border, .bottom-border").each(function() {
        var target = this;
        var observer = new MutationObserver(function(mutations) {
          mutations.forEach(function(mutation) {
            console.log("Game over!")
          });
        });

        observer.observe(target, config);
      });
    }
  }

  addFood = function() {
    var random = Math.floor(Math.random() * (900 - 1 + 1)) + 1;
    $('*[data="' + random + '"]').addClass("food")

  };

};

.box {
  display: inline-block;
  border: 2px grey solid;
}

#container {
  display: block;
  border: 2px black solid;
  border-radius: 5px;
  font-size: 0;
  margin: 10px auto;
}

.hover {
  background-color: black;
}

.food {
  background-color: blue;
}

.white {
  background-color: white;
}

.right-border,
.left-border,
.top-border,
.bottom-border {
  background: red;
  border: 2px red solid;
}

<!DOCTYPE html>

<html lang="en">

<head>

  <title>Snake</title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  <link rel="stylesheet" href="style.css">

  <script type="text/javascript" src="script.js"></script>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

</head>

<body>

  <div class="container">

    <center>
      <h1>Snake</h1>

      <div id="container"></div>
    </center>

  </div>

</body>

</html>