title: Snake game algorithm that doesn't use a grid and the segments can move slower than their dimensions
body: <p>I'm trying to do exactly what <a href="https://stackoverflow.com/questions/4357440/snake-game-following-segments-non-grid-based">this guy is doing</a> but I <em>think</em> he may have less requirements than me because the answers in that post don't seem like they'd work for my game.  Let me inline his algorithm so my question is easier to understand:</p>
  <blockquote>
  <p>The easiest solution is to loop from tail to head and set the position of the current to the next segment's position, ie: <code>segment[i].position = segment[i - 1].position</code></p>
  </blockquote>
  <p>I think the <strong>key difference</strong> between our requirements is I want to move each piece less than its own width/height on every tick.  For example:</p>
  <p><img src="https://i.stack.imgur.com/Y3LGC.png" alt="enter image description here" /></p>
  <p>Pretend these squares are aligned horizontally (I drew it unaligned because I think it makes it easier to see what's going on).  The red <code>H</code> is where the head currently is.  The red <code>T</code> is where the tail currently is.  The black <code>H'</code> is where the head should be next tick.  So the snake is moving right to left.  If I use the algorithm described above, won't the segments overlap or start driving apart?  Let me play it out step by step:</p>
  <ol>
  <li>Create H'.position</li>
  <li>T.position = H.position</li>
  <li>H.position = H'.position</li>
  </ol>
  <p>The result of this would become:</p>
  <p><img src="https://i.stack.imgur.com/PMGGI.png" alt="enter image description here" /></p>
  <p>What algorithm can I use to make sure that all the pieces move at the same speed and stay the same distance apart from each other?</p>
  <hr />
  <p>I'll give my idea, but I'm skeptical of it because my research doesn't show anyone else using this:</p>
  <p>Each segment will store it's coordinates and its direction.  EG: <code>[[50, 50, LEFT], [100, 50, LEFT]]</code>.  The head is index 0, the tail is index 1.  <strong>The speed at which the snake moves is 10, even though the segments are 50x50</strong>.</p>
  <p>Each tick I'll do this:</p>
  <ol>
  <li>If the mouse was pressed, overwrite the <code>nextDirection</code> variable with the direction that was pressed.  Otherwise, <code>nextDirection</code> is whatever it was last tick.  In this example, lets assume someone pressed <code>UP</code>.</li>
  <li>Iterate the array and apply the direction to each tick.  EG: <code>[[40, 50, LEFT], [90, 50, LEFT]]</code></li>
  <li>Shift the directions from head to tail and set the head's new direction to <code>nextDireciton</code>.  EG: <code>[[40, 50, UP], [90, 50, LEFT]]</code></li>
  <li>Repeat every tick.</li>
  </ol>
  <p>Does this algorithm seem like it would work?  Part of the reason I'm asking is because it's more complicated than the other guy's algorithm so I feel like I'm doing something wrong.  And also, the more I think about his algorithm, the less it seems like it can work.</p>
  <hr />
  <h1>Rewording My Problem</h1>
  <p>Pretend each segment of the snake is a 20x20 pixel rectangle.  Each <em>tick</em>, I want the head to move 5 pixels in some direction.  <strong>How do I make sure all the segments stay touching each other?</strong></p>
  <p>@Rafe's description below in a comment is:</p>
  <blockquote>
  <p>Consider the ordered set of locations occupied by the snake at step <code>t</code>, with the leftmost being the tail and the rightmost being the head: <code>{A, B, C, D, E}</code>. At step <code>t+1</code>, the ordered set of locations occupied by the snake is <code>{B, C, D, E, F}</code> where the tail has moved from <code>A</code> to <code>B</code> and the head has moved from <code>E</code> to <code>F</code>.</p>
  </blockquote>
  <p>And I don't think this algorithm works because:</p>
  <blockquote>
  <blockquote>
  <p>Yes but if the width of <code>A = B = C = D = E = F = 20px</code>.  Shifting <code>{A, B, C, D, E}</code> so that it becomes <code>{B, C, D, E, F}</code> just added 20px to the right side and removed 20px from the left side.  Doesn't this mean he moved 20px, not 5px?  <strong>I want to move 5px, not 20px</strong>  If you're saying that's accomplished with your suggestion, please explain how.  I don't see it.</p>
  </blockquote>
  </blockquote>