title: Not working condition for killing snake plus not working property of an object
body: <p>I am making snake game through javascript and I have come to 2 problems.</p>
  
  <p>First problem: I set condition for "killing" snake when his X and Y hits the border of canvas and I can not get why it is not working.</p>
  
  <p>Second problem: My method "draw" of "snake" is working fine how it is written but if I put instead of "var i = snake.dlzka"  "var i = snake.snake_body.length" it types an error: Cannot read property 'x' of undefined.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var canvas = document.getElementById("canvas");
  canvas.width = 800;
  canvas.height = 650;
  var ctx = canvas.getContext("2d");
  
  var dotW = 10;
  var dotH = 10;
  var direction = "right";  //smer pohybu hadika
  
  var snake = {
      dlzka: 5,
      snake_body: [],
      
      arraySpawn: function(){
          for(var i = snake.dlzka; i &gt;= 0; i--){
              this.snake_body.push({
                  x: i*dotW,
                  y: 0
              });
          }
      },
      
      
      draw: function(){
          ctx.clearRect(0,0, canvas.width, canvas.height);
          for(var i = snake.dlzka; i&gt;0; i--){
              //alert(snake.snake_body.length);
              ctx.fillStyle = "blue";
              ctx.fillRect(snake.snake_body[i].x, snake.snake_body[i].y, dotW, dotH);
          }
          snake.move();
      },
      
      
      move: function(){
          var first = snake.snake_body[0];
          var first_x = first.x;
          var first_y = first.y;
          
          
          
          switch(direction){
              case "right":
                  first_x += 10;
                  break;
                  
              case "left":
                  first_x -= 10;
                  break;
                  
              case "up":
                  first_y -= 10;
                  break;
                  
              case "down":
                  first_y += 10;
                  break;
          }
          
          this.snake_body.pop();
          this.snake_body.unshift({
              x: first_x,
              y: first_y
          });
          
          if((first_x == canvas.width || 0) || (first_y == canvas.height || 0)){
              var restart = confirm("Do you want to play again?");
              if(restart){
                  clearInterval(intervalID);
                  snake.snake_body = [];
                  snake.arraySpawn();
                  intervalID = setInterval(function(){snake.draw()}, 33);
              }
          }
      },
      
      
      update_direction: function(e){
          var key = e.keyCode;
          
          if(key == 37 &amp;&amp; direction !== "right"){
              direction = "left";
          }else if(key == 38 &amp;&amp; direction !== "down"){
              direction = "up";
          }else if(key == 39 &amp;&amp; direction !== "left"){
              direction = "right";
          }else if(key == 40 &amp;&amp; direction !== "up"){
              direction = "down";
          }
      }
  };
  
  
  snake.arraySpawn();
  var intervalID = setInterval(function(){snake.draw()}, 33);
  window.onkeydown = snake.update_direction;</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>canvas{
      border: 1px solid black;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;canvas id="canvas"&gt;&lt;/canvas&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>fiddle: <a href="http://jsfiddle.net/scarface/pdz4k8dj/20/" rel="nofollow">http://jsfiddle.net/scarface/pdz4k8dj/20/</a></p>