Joséph Flames Joséph Flames - 4 months ago 7
CSS Question

Shrinking and growing canvas creates non-passable border

I know this question sounds wierd but I have no clue how to best describe the issue so please follow this link and play the game till you get score around 15-20 and you will see that once the canvas grows a black line is created kinda splitting the canvas in half
Link to game

I have no clue weather the issue occurs from javascript or css or what help is much appreciated

Below is all my code for this game



/*
-------------------------
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

To achieve expected result, please make below changes in your code

  1. Remove setInterval(UpdateCanvas,1000);
    2.Update 1000 to 2000 for scores - score >= 15 && score < 18 and score >= 18 && score < 21
    3.Increase width for both sections to 850 and 950 respectively

reduction in size to 200 is causing black line

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

I have tested above code till score -35 and it looks fine.... Hope this works for you :)