javascript - 缩小和增大 Canvas 会产生无法通过的边框

Question

我知道这个问题听起来很奇怪，但我不知道如何最好地描述这个问题，所以请点击此链接并玩游戏，直到你得到 15-20 左右的分数，你会看到一旦 Canvas 长出一条黑线创建了将 Canvas 分成两半的效果 Link to game

我不知道问题是由 javascript 还是 css 发生的，也不知道需要什么帮助

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

/*
-------------------------
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 = 400;
        h = 350;
		$('#snakeCanvas').animate({
    		width: w,
        	height: h
    	},1000);
    }else if(score >= 18 && score < 21){
    	w = 250;
        h = 350;
		$('#snakeCanvas').animate({
    		width: w,
        	height: h
    	},1000);
    }
}

setInterval(UpdateCanvas,1000);

#home {
      width: 350px;
      height: 350px;
      background-image: url('../img/snake.png');
      background-size: auto 350px;
      background-repeat: no-repeat;
      background-color: lightblue;
      background-position: center center;
      padding: 0;
      margin: 03;

    }
    
    button {
      background-color: green;
      color: white;
      border: none;
      bottom: 0;
      height: 30px;
      font-size: 12pt;
      float: left;
      width: 90px;
      margin: 10px 0 0 0;
    }
    button:hover {
      background-color: orange;
    }

    button:disabled {
      background-color: grey;
    }

    p {
      font-family: Helvetica;
      font-weight: bold;
      width: 250px;
      margin: 18px 0 5px 8px;
      float: left;
    }

    .game {
      margin: 0 auto;
    }

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Snake: Remastered</title>
	<link rel="stylesheet" href="css/Style.css">
    <script   src="https://code.jquery.com/jquery-3.1.0.min.js"   integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s="   crossorigin="anonymous"></script>
</head>
<body>
	<div class= 'game'>
		<div id = 'home'>
			<canvas id='snakeCanvas' width='350' height='350'></canvas>
		</div>
		<p>Press start and eat the pizza!</p>
		<button id='btn'>START</button>
	</div>
    
    <script src="js/settings.js"></script>
    <script src="js/draw.js"></script>
    <script src="js/app.js"></script>
    <script src="js/enhancements.js"></script>
</body>
</html>

Answer 1

要达到预期结果，请对代码进行以下更改

1. 删除 setInterval(UpdateCanvas,1000);
   2.将分数从 1000 更新为 2000 - 分数 >= 15 && 分数 < 18 且分数 >= 18 && 分数 < 21
   3.将两个部分的宽度分别增加到850和950

尺寸减小到 200 会导致黑线

JS:

/*
-------------------------
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);
  }
}

Codepen-http://codepen.io/nagasai/pen/yJjaWV

我已经测试了上面的代码，直到得分 -35，它看起来不错......希望这对你有用:)