CODEWITHSUNDEEP
javascriptoopcanvas
user5808331
user5808331

Reputation:

How do I get this shape to move in JavaScript Canvas?

I am attempting a game of snake, although the shape seems to not be moving. I don't know why it is doing this and it is not a typographical error. In order to see my problem, see snippet below ↓.

I have added both a CSS and HTML file as well, so you know I did that right. My method of making this is to get the direction of the snake (represented by the variables 'vx' and 'vy') and then use the direction to calculate the future position of the 'snakePiece()' object in the Array of 'snake'.

window.onload = function main() {
  var c = document.getElementById("canvas");
  var ctx = c.getContext("2d");

  function snakePiece() {
    this.color = "#9999ff";
    this.dimension = 25;
    this.x = 0;
    this.y = 0;
    this.vx = 0;
    this.vy = 0;
  }

  var snake = new Array(new snakePiece());

  function setPosition() {
    for (i = 0; i < snake.length; i++) {
      switch (snake[i].vx) {
        case 1:
          snake[i].x += snake[i].dimension;
          snake[i + 1].x = snake[i].x - snake[i].dimension;
          snake[i + 1].vx = 1;
          break;
        case -1:
          snake[i].x -= snake[i].dimension;
          snake[i + 1].x = snake[i].x + snake[i].dimension;
          snake[i + 1].vx = -1;
          break;
      }
      switch (snake[i].vy) {
        case 1:
          snake[i].y -= snake[i].dimension;
          snake[i + 1].y = snake[i].y + snake[i].dimension;
          snake[i + 1].vy = 1;
          break;
        case -1:
          snake[i].y += snake[i].dimension;
          snake[i + 1].y = snake[i].y - snake[i].dimension;
          snake[i + 1].vy = -1;
          break;
      }
    }
  }

  setInterval(function draw() {
    setPosition();
    ctx.clearRect(0, 0, c.width, c.height);
    for (j = 0; j < snake.length; j++) {
      ctx.fillStyle = snake[j].color;
      ctx.fillRect(snake[j].x, snake[j].y, snake[j].dimension, snake[j].dimension);
    }
  }, 500);

  document.onkeydown = function(event) {
    var keyPress = String.fromCharCode(event.keyCode);
    switch (keyPress) {
      case 40: //DOWN
        snake[0].vy = 1;
        snake[0].vx = 0;
        break;
      case 39: //RIGHT
        snake[0].vx = 1;
        snake[0].vy = 0;
        break;
      case 38: //UP
        snake[0].vy = -1;
        snake[0].vx = 0;
        break;
      case 37: //LEFT
        snake[0].vx = -1;
        snake[0].vy = 0;
        break;
    }
  }
}
body {
  padding: 15px;
}
#canvas {
  border: 3px solid black;
  background-color: #FFB6C1;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Simple Snake</title>
  <script src="snake-java.js" type="text/javascript" rel="javascript"></script>
  <link href="snake-css.css" type="text/css" rel="stylesheet" />
</head>

<body>
  <canvas height="900" width="900" id="canvas"></canvas>
</body>

</html>

Upvotes: 0

Views: 87

Answers (1)

PinkTurtle
PinkTurtle

Reputation: 7041

Here's my take on it. I added comments in the code where I modified something to exlain what was wrong.

window.onload = function main() {
  var c = document.getElementById("canvas");
  var ctx = c.getContext("2d");

  function snakePiece() {
    this.color = "#9999ff";
    this.dimension = 25;
    this.x = 100;
    this.y = 100;
    this.vx = 0;
    this.vy = 0;
  }

  var snake = new Array(new snakePiece());

  function setPosition() {
    for (i = 0; i < snake.length; i++) {
      switch (snake[i].vx) {
        case 1:
          snake[i].x += snake[i].dimension;
          
          // You don't need all the commented lines in this function.
          // The for loop is already taking care of your snake cells.
          // Moreover snake[i + 1] is undefined if your snake is length 1 (hence a JS error).
          
          //snake[i + 1].x = snake[i].x - snake[i].dimension;
          //snake[i + 1].vx = 1;
          break;
        case -1:
          snake[i].x -= snake[i].dimension;
          //snake[i + 1].x = snake[i].x + snake[i].dimension;
          //snake[i + 1].vx = -1;
          break;
      }
      switch (snake[i].vy) {
        case 1:
          snake[i].y -= snake[i].dimension;
          //snake[i + 1].y = snake[i].y + snake[i].dimension;
          //snake[i + 1].vy = 1;
          break;
        case -1:
          snake[i].y += snake[i].dimension;
          //snake[i + 1].y = snake[i].y - snake[i].dimension;
          //snake[i + 1].vy = -1;
          break;
      }
    }
  }

  setInterval(function draw() {
    setPosition();
    ctx.clearRect(0, 0, c.width, c.height);
    for (j = 0; j < snake.length; j++) {
      ctx.fillStyle = snake[j].color;
      ctx.fillRect(snake[j].x, snake[j].y, snake[j].dimension, snake[j].dimension);
    }
  }, 500);

  document.onkeydown = function(event) {
    //var keyPress = String.fromCharCode(event.keyCode); <- this is wrong -> verify with : console.log(keyPress);
    switch (event.keyCode) { // switch on event.keyCode instead
      case 40: //DOWN
        snake[0].vy = -1; // -1 instead of 1
        snake[0].vx = 0;
        break;
      case 39: //RIGHT
        snake[0].vx = 1;
        snake[0].vy = 0;
        break;
      case 38: //UP
        snake[0].vy = 1; // 1 instead of -1
        snake[0].vx = 0;
        break;
      case 37: //LEFT
        snake[0].vx = -1;
        snake[0].vy = 0;
        break;
    }
    // add preventDefault(); to disable window scrolling
    event.preventDefault();
  }
}
body {
  padding: 15px;
}
#canvas {
  border: 3px solid black;
  background-color: #FFB6C1;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Simple Snake</title>
  <script src="snake-java.js" type="text/javascript" rel="javascript"></script>
  <link href="snake-css.css" type="text/css" rel="stylesheet" />
</head>

<body>
  <canvas height="900" width="900" id="canvas"></canvas>
</body>

</html>

Upvotes: 0

Related Questions