javascript - Snake body segments not appending to snake correctly -

i'm trying port working java snake game javascript people can play on website.

demo game here... press arrow keys , try run on sprites.

for snake, wanted hang of cameras... implemented camera follows snake (snake in middle). when camera reaches edge of "world", snake allowed keep going until reaches world edge.

normally, append new segment end of snake getting last element's x,yin array, set new segment once last segment has moved. move segments tail, store pre-moved segment x,y, set segments 1 before it.

something like:

function getprevcoords()  { (i = 1; < players.length; i++) {     prevx[i] = players[i-1].x;     prevy[i] = players[i-1].y; }    }  function movetail() { //just need move head, , set rest of player containers last position of head.. (j = 1; j < players.length; j++) {     players[j].x = prevx[j];     players[j].y = prevy[j]; } } 

my question: camera , putting objects in relation camera coordinates versus world coordinates throwing me off.

to make camera move edge of world, , player continue moving, use following logic:

    if (direction == "right") {         if (camx < (world.w - camw) && (players[0].x == camw/2)) {             camx+=velocity;         }         else {             if (players[0].x < (camw-15)) {                 players[0].x += velocity;                    movetail();             }             else {                 console.log("hit right wall. game over.");                 reset();             }         }        } 

the problem is, when add new segment, set x,y segment before after they've moved. can see above, when move camera, want cam coordinates move , player's x,y set camera middle. change player's x,y when camera reaches edge of world , player needs keep moving. so, you'll notice body segments fall staggered when player x,y updated... when cam moving, player's x,y doesn't change body segments' x,y equal each other.

any ideas on how solve that?

---

updated code:

i've updated include centerviewto... can see picture, places in top left.

function createplayers() {     playerbmp = new createjs.bitmap("images/cat_sit.png");           playercontainer = new createjs.container();       playercontainer.addchild(playerbmp);     centerviewto(stage.canvas, stage, playercontainer, {x:0, y:0, width:bg.image.width, height:bg.image.height});      stage.addchild(playercontainer);     }  function createnpcs() {     npcbmp = new createjs.bitmap("images/mybmp.png");     npcbmp2 = new createjs.bitmap("images/mybmp.png");      npccontainer = new createjs.container();     npccontainer2 = new createjs.container();         npccontainer.addchild(npcbmp);     npccontainer2.addchild(npcbmp2);      centerviewto(stage.canvas, stage, npccontainer, {x:0, y:0, width:bg.image.width, height:bg.image.height});     centerviewto(stage.canvas, stage, npccontainer2, {x:0, y:0, width:bg.image.width, height:bg.image.height});      stage.addchild(npccontainer);     stage.addchild(npccontainer2); } 

i feel little sorry you, have invested effort in trying make "camera" (but on positive side sure learned lot guess)

so, basically: don't need of cam-variables (camx, camy, ect...)

here small method, i'm allways using center objects in stage: (explanation how works can found below)

function centerviewto(viewport,container,object,bounds) {     var containerposition = object.localtolocal(0,0,container),         pw = viewport.width || 0,         ph = viewport.height || 0;      if ( bounds ) {         var minx = bounds.x + pw / 2,             maxx = bounds.x + bounds.width - pw / 2,             miny = bounds.y + ph / 2,             maxy = bounds.y + bounds.height - ph / 2;         containerposition.x = math.max(minx, math.min(containerposition.x, maxx));         containerposition.y = math.max(miny, math.min(containerposition.y, maxy));     }      container.regx = containerposition.x;     container.regy = containerposition.y;     container.x = pw / 2;     container.y = ph / 2; } 

what method does, puts position container(which most stage) position of object in relation view-port(which most canvas) - viewport canvas , container stage - very rarely i've had other cases.

in case use follows: centerviewto(stage.canvas,stage,playerbmp,{x:0,y:0,width:bg.image.width,height:bg.image.height});

but have make changes code: containers , object's positions should 0-based, example bg should @ (0|0), playercontainer should positioned @ (0|0).

another positive aspect of method is, can @ time rotate stage, , automatically rotate around current centered object, same scaling.

i hope more might confuse ;)

*edit: added graphic helps visualize method does. method not alter positions or position objects you, exept position of container (in simplest case stage) holds object.