logic spacing problem

[L2L2L]

Anyone care to help me with this logic problem? The box will over laps sometimes going left, and going right it'll totally cover the box before it or after it... Not very sure how to fix this. Anyone that can help have my thanks.

 

here a link to my code:

 

http://codepen.io/L2L2L/pen/mJaMyM

[onefrankguy]

I rewrote your Box.toRight and Box.toLeft functions. Comments are in the code for an explanation of what it's doing.

// Boxes start out against the left edge of the canvas, with 25 pixels between each box.// This means some boxes may start off the right edge of the canvas.// The total length of the list of boxes is (number of boxes * (width of box + padding)).Box.toRight = function (canvas, box) {  if (box.x < canvas.x + canvas.width) {    // Box is on the canvas. Move it right.    box.x += 5;  } else {    // Box is off the canvas. Move it to the left end of the list of boxes.    box.x -= boxs.length * (box.width + 25);  }};Box.toLeft = function (canvas, box) {  if (box.x + box.width > canvas.x) {    // Box is on the canvas. Move it left.    box.x -= 5;  } else {    // Box is off the canvas. Move it to the right end of the list of boxes.    box.x += boxs.length * (box.width + 25);  }};