Javascript 不断缩小和增长的画布创建了无法通过的边框

我知道这个问题听起来很奇怪，但我不知道如何最好地描述这个问题，所以请按照这个链接玩游戏，直到你得到15-20分，你会看到一旦画布变大，就会产生一条黑线，有点将画布分成两半

我不知道这个问题是由javascript还是css引起的，也不知道需要什么帮助

下面是这个游戏的所有代码

/*
-------------------------
settings.js
-------------------------
*/
var canvas=document.getElementById（“蛇画布”）；
var ctx=canvas.getContext（“2d”）；
var w=画布宽度；
var h=画布高度；
var得分=0；
变种蛇；
var-snakeSize=10；
食品；
/*
---------------------------
draw.js
---------------------------
*/
var drawModule=（函数（）{
var bodySnake=函数（x，y）{
ctx.fillStyle='绿色'；
ctx.fillRect（x*snakeSize，y*snakeSize，snakeSize，snakeSize）；
ctx.strokeStyle='暗绿色'；
ctx.strokeRect（x*蛇形尺寸，y*蛇形尺寸，蛇形尺寸，蛇形尺寸）；
}
变量=函数（x，y）{
ctx.fillStyle='黄色'；
ctx.fillRect（x*snakeSize，y*snakeSize，snakeSize，snakeSize）；
ctx.fillStyle='红色'；
ctx.fillRect（x*蛇形尺寸+1，y*蛇形尺寸+1，蛇形尺寸-2，蛇形尺寸-2）；
}
var scoreText=函数（）{
var score_text=“score:+分数；
ctx.fillStyle='蓝色'；
ctx.fillText（分数为145，h-5）；
}
var drawSnake=函数（）{
变量长度=4；
snake=[]；
对于（变量i=length-1；i>=0；i--）{
snake.push（{x:i，y:0}）；
}  
}
var paint=function（）{
ctx.fillStyle='浅灰色'；
ctx.fillRect（0,0,w,h）；
ctx.strokeStyle=‘黑色’；
ctx.strokeRect（0，0，w，h）；
btn.setAttribute（'disabled'，true）；
var snakeX=snake[0].x；
var snakeY=snake[0].y；
如果（方向=='右'）{
snakeX++；}
如果（方向=='left'）{
蛇--；}
如果（方向='up'）{
陷阱--；
}如果（方向=‘向下’）{
snakeY++；}
如果（蛇形图==-1 | |蛇形图==w/snakeSize | |蛇形图==-1 | |蛇形图==h/snakeSize | |检查碰撞（蛇形图，蛇形图，蛇形图））{
//重新开始游戏
btn.removeAttribute（'disabled'，true）；
ctx.clearRect（0,0，w，h）；
gameloop=清除间隔（gameloop）；
得分=0；
h=350；
w=350；
返回；
}
if（snakeX==food.x&&snakeY==food.y）{
var tail={x:snakeX，y:snakeY}；//创建一个新的头部，而不是移动尾部
分数++；
createFood（）；//创建新食物
}否则{
var tail=snake.pop（）；//弹出最后一个单元格
尾巴x=蛇x；
tail.y=snakeY；
}
//蛇现在可以吃食物了。
snake.unshift（tail）；//将尾部放回第一个单元格
对于（变量i=0；isnake.length；i++）{
var snakeX=snake[i].x；
var snakeY=snake[i].y；
如果（food.x==snakeX和food.y==snakeY和food.y==snakeY和food.y==snakeY和food.x==snakeX）{
food.x=数学地板（（数学随机（）*30）+1）；
food.y=Math.floor（（Math.random（）*30）+1）；
}
}
}
var checkCollision=函数（x，y，数组）{
对于（var i=0；i=5和分数<8）{
w=500；
h=350；
$（“#蛇画布”）。设置动画({
宽度：w，
身高：h
},2000);
}否则如果（分数>=8和分数<10）{
w=500；
h=350；
$（“#蛇画布”）。设置动画({
宽度：w，
身高：h
},2000);
}否则如果（分数>=10和分数<12）{
w=600；
h=350；
$（“#蛇画布”）。设置动画({
宽度：w，
身高：h
},2000);
}否则如果（分数>=12和分数<15）{
w=850；
h=350；
$（“#蛇画布”）。设置动画({
宽度：w，
身高：h
},2000);
}否则如果（分数>=15和分数<18）{
w=400；
h=350；
$（“#蛇画布”）。设置动画({
宽度：w，
黑格
/*
-------------------------
settings.js
-------------------------
*/
var canvas = document.getElementById("snakeCanvas");
var ctx = canvas.getContext("2d");
var w = canvas.width;
var h = canvas.height;
var score = 0;
var snake;
var snakeSize = 10;
var food;

/*
---------------------------
draw.js
---------------------------
*/

var drawModule = (function() {

  var bodySnake = function(x, y) {
    ctx.fillStyle = 'green';
    ctx.fillRect(x * snakeSize, y * snakeSize, snakeSize, snakeSize);
    ctx.strokeStyle = 'darkgreen';
    ctx.strokeRect(x * snakeSize, y * snakeSize, snakeSize, snakeSize);
  }

  var pizza = function(x, y) {
    ctx.fillStyle = 'yellow';
    ctx.fillRect(x * snakeSize, y * snakeSize, snakeSize, snakeSize);
    ctx.fillStyle = 'red';
    ctx.fillRect(x * snakeSize + 1, y * snakeSize + 1, snakeSize - 2, snakeSize - 2);
  }

  var scoreText = function() {
    var score_text = "Score: " + score;
    ctx.fillStyle = 'blue';
    ctx.fillText(score_text, 145, h - 5);
  }

  var drawSnake = function() {
    var length = 4;
    snake = [];
    for (var i = length - 1; i >= 0; i--) {
      snake.push({
        x: i,
        y: 0
      });
    }
  }

  var paint = function() {
    ctx.fillStyle = 'lightgrey';
    ctx.fillRect(0, 0, w, h);
    ctx.strokeStyle = 'black';
    ctx.strokeRect(0, 0, w, h);

    btn.setAttribute('disabled', true);

    var snakeX = snake[0].x;
    var snakeY = snake[0].y;

    if (direction == 'right') {
      snakeX++;
    } else if (direction == 'left') {
      snakeX--;
    } else if (direction == 'up') {
      snakeY--;
    } else if (direction == 'down') {
      snakeY++;
    }

    if (snakeX == -1 || snakeX == w / snakeSize || snakeY == -1 || snakeY == h / snakeSize || checkCollision(snakeX, snakeY, snake)) {
      //restart game
      btn.removeAttribute('disabled', true);

      ctx.clearRect(0, 0, w, h);
      gameloop = clearInterval(gameloop);
      score = 0;
      h = 350;
      w = 350;
      return;
    }

    if (snakeX == food.x && snakeY == food.y) {
      var tail = {
        x: snakeX,
        y: snakeY
      }; //Create a new head instead of moving the tail
      score++;

      createFood(); //Create new food
    } else {
      var tail = snake.pop(); //pops out the last cell
      tail.x = snakeX;
      tail.y = snakeY;
    }
    //The snake can now eat the food.
    snake.unshift(tail); //puts back the tail as the first cell

    for (var i = 0; i < snake.length; i++) {
      bodySnake(snake[i].x, snake[i].y);
    }

    pizza(food.x, food.y);
    scoreText();
  }

  var createFood = function() {
    food = {
      x: Math.floor((Math.random() * 30) + 1),
      y: Math.floor((Math.random() * 30) + 1)
    }

    for (var i = 0; i > snake.length; i++) {
      var snakeX = snake[i].x;
      var snakeY = snake[i].y;

      if (food.x === snakeX && food.y === snakeY || food.y === snakeY && food.x === snakeX) {
        food.x = Math.floor((Math.random() * 30) + 1);
        food.y = Math.floor((Math.random() * 30) + 1);
      }
    }
  }

  var checkCollision = function(x, y, array) {
    for (var i = 0; i < array.length; i++) {
      if (array[i].x === x && array[i].y === y)
        return true;
    }
    return false;
  }

  var init = function() {
    direction = 'down';
    drawSnake();
    createFood();
    gameloop = setInterval(paint, 80);
  }

  return {
    init: init
  };

}());

/*
-------------------
app.js
-------------------
*/

(function(window, document, drawModule, undefined) {

  var btn = document.getElementById('btn');
  btn.addEventListener("click", function() {
    drawModule.init();
  });

  document.onkeydown = function(event) {

    keyCode = window.event.keyCode;
    keyCode = event.keyCode;

    switch (keyCode) {

      case 37:
        if (direction != 'right') {
          direction = 'left';
        }
        console.log('left');
        break;

      case 39:
        if (direction != 'left') {
          direction = 'right';
          console.log('right');
        }
        break;

      case 38:
        if (direction != 'down') {
          direction = 'up';
          console.log('up');
        }
        break;

      case 40:
        if (direction != 'up') {
          direction = 'down';
          console.log('down');
        }
        break;
    }
  }

})(window, document, drawModule);

/*
---------------------
enhancements.js
---------------------
*/

function UpdateCanvas() {
  if (score == 0) {
    w = 350;
    h = 350;
    $('#snakeCanvas').animate({
      width: w,
      height: h
    }, 2000);
  } else if (score >= 5 && score < 8) {
    w = 500;
    h = 350;
    $('#snakeCanvas').animate({
      width: w,
      height: h
    }, 2000);
  } else if (score >= 8 && score < 10) {
    w = 500;
    h = 350;
    $('#snakeCanvas').animate({
      width: w,
      height: h
    }, 2000);
  } else if (score >= 10 && score < 12) {
    w = 600;
    h = 350;
    $('#snakeCanvas').animate({
      width: w,
      height: h
    }, 2000);
  } else if (score >= 12 && score < 15) {
    w = 850;
    h = 350;
    $('#snakeCanvas').animate({
      width: w,
      height: h
    }, 2000);
  } else if (score >= 15 && score < 18) {
    w = 850;
    h = 350;
    $('#snakeCanvas').animate({
      width: w,
      height: h
    }, 2000);
  } else if (score >= 18 && score < 21) {
    w = 950;
    h = 350;
    $('#snakeCanvas').animate({
      width: w,
      height: h
    }, 2000);
  }
}