title: JavaScript Game - Logicmistake
body: <p>I am writing a little computer game using JavaScript canvas. (for me its a quite big project)</p>
  
  <p><a href="https://i.stack.imgur.com/Ljjpz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ljjpz.png" alt="Screenshot"></a></p>
  
  <p>as you can see, I am making a game, where a stickman (in the moment just a green box) is able to move through a scene. (and there is an hp and mp bar too)</p>
  
  <p>this grass is generated using a SINUS-FUNKTION. This is the Code for the grass:</p>
  
  <pre><code>// this function is called every frame.
  function drawGrass() {
      ctx.fillStyle = "#000";
      var countDetailGrass = 0;
  
      ctx.moveTo(0+player.x+WIDTH/2, HEIGHT-200);
      ctx.beginPath();
  
      for(var i=0; i&lt;WIDTH+options.grassResolution; i+=options.grassResolution) {
          ctx.lineTo(i-player.x+WIDTH/2, HEIGHT-200+Math.floor(Math.sin(i/12)*3));
          countDetailGrass++;
          drawDetailGrass(i-player.x+WIDTH/2, Math.floor(Math.sin(i/12)*3), countDetailGrass);
      }
  
      //for(var i=0+player.x; i&lt;WIDTH+options.grassResolution; i+=options.grassResolution) { ctx.lineTo(i-player.x, HEIGHT-200+Math.floor(Math.sin(i/12)*3)); }
      //for(var i=0; i&lt;WIDTH+options.grassSteps; i+=options.grassSteps) { countDetailGrass++; drawDetailGrass(i-player.x, Math.floor(Math.sin(i/12)*3), countDetailGrass); }
      //for(var i=0-player.x+WIDTH; i&lt;2*WIDTH+options.grassResolution-player.x; i+=options.grassResolution) { ctx.lineTo(i+player.x-WIDTH, HEIGHT-200+Math.floor(Math.sin(i/12)*3)); }
      //for(var i=0-player.x+WIDTH; i&lt;2*WIDTH+options.grassSteps-player.x; i+=options.grassSteps) { countDetailGrass++; drawDetailGrass(i+player.x-WIDTH, Math.floor(Math.sin(i/12)*3), countDetailGrass); }
      ctx.moveTo(WIDTH, HEIGHT); ctx.moveTo(0, HEIGHT); ctx.moveTo(0, HEIGHT-200);
      ctx.closePath();
      ctx.stroke();
  }
  
  function drawDetailGrass(pos1, pos2, count) {
      count += Math.floor(Math.sin(count/100)*20);
      while(count &gt; 4) { count -=4; }
      while(count &lt; -4) { count +=4; }
  
      switch(count) {
          case 1 || -1:
              ctx.fillRect(pos1, HEIGHT-200+pos2-5, 1, 5);
              ctx.fillRect(pos1+1, HEIGHT-200+pos2-10, 1, 10);
              ctx.fillRect(pos1+2, HEIGHT-200+pos2-7, 1, 7);
              break;
          case 2 || -2:
              ctx.fillRect(pos1-4, HEIGHT-200+pos2-3, 1, 3);
              ctx.fillRect(pos1-2, HEIGHT-200+pos2-4, 1, 4); 
  
              ctx.fillRect(pos1, HEIGHT-200+pos2-9, 1, 9);
              ctx.fillRect(pos1+1, HEIGHT-200+pos2-7, 1, 7);
              break;
          case 3 || -3:
              ctx.fillRect(pos1, HEIGHT-200+pos2-3, 1, 3);
              ctx.fillRect(pos1+1, HEIGHT-200+pos2-2, 1, 2);
              ctx.fillRect(pos1+3, HEIGHT-200+pos2-4, 1, 4);
              break;
      }
  }
  </code></pre>
  
  <p>my question / problem is: how can I make this grass infinite? so, that I can "walk" (changing player.x) infinite to the left and right?</p>
  
  <p>I already tried that a few times (the comments) but failed.</p>
  
  <p>Can somebody help me?</p>
  
  <p>Some additional info:</p>
  
  <ul>
  <li><strong>WIDTH</strong> and <strong>HEIGHT</strong> are the <em>width</em> and <em>height</em> of the canvas</li>
  <li><strong>player.x</strong> has as standard <em>WIDTH/2</em></li>
  <li><strong>options.grassResolution</strong> is variable, which exists of performance reasons. It saves an integer, it has the standard <em>15</em>. That means that just every 15 pixel the sinus funktion is displayed.</li>
  </ul>