0


I feel that I almost found solution, but need some help. I have two arrays: one is snakeBody(contains divs that will be body of the snake), second array contains arrays with coordinats of first element from snakeBody(snakeBody[0]) after he start moving in such form pastCoord = [[20,0], [40, 0], [60, 0]......] (here [coordX, coordY]). Every step is 20px.

I don't know how to apply coords from pastCoord array to elements in snakeBody array.

I think about double for loop, but what to do in this loops I don't know: 

for (var i = this.snakeBody.length - 1; i >= 0; i--) {
  for (var j = gameObj.pastCoord.length - 1; j >= 0; j--) {


  };

Here all my code: 

// field object
var fieldObj = {
  field: document.getElementById( "field" ),
  w: 480,
  h: 580
},
gameObj = {
  pastCoord: [],
  getRandom: function( num ) {
    return Math.floor( Math.random() * num );
  },
  createSnakeTarget: function() {
  var snakeTarget = document.createElement( "div" );
      snakeTarget.className = "snake-target";
      snakeTarget.style.top = this.getRandom( fieldObj.h ) + "px";
      snakeTarget.style.left = this.getRandom( fieldObj.w ) + "px";

      fieldObj.field.appendChild( snakeTarget );
  },
  stopGame: function() {
    var stopMessage = document.createElement("div");
        stopMessage.className = "stop-message";
        stopMessage.style.background = "white";

        fieldObj.field.appendChild( stopMessage );
        //TODO: write message to stopGame
  }
};

gameObj.createSnakeTarget();

// snake object
snakeObj = {
  snakeBody: document.getElementsByClassName( "snake-body" ),
  p: {
    x: 0, // position x 
    y: 0  // position y
  },
  v: {
    x: 20, // velocity ( one loop move one unit of snake body)
    y: 20
  },
  keys: {
    up: null,
    l: null,
    r: null,
    down: null
  },
  update: function() {
    if ( this.keys.down ) {
       this.p.x += this.v.x;
    } else if ( this.keys.up ) {
       this.p.x -= this.v.x;
    } else if ( this.keys.r ) {
       this.p.y += this.v.y;
    }else if ( this.keys.l ) {
       this.p.y -= this.v.y;
    }

    for (var i = this.snakeBody.length - 1; i >= 0; i--) {
       this.snakeBody[0].style.top = this.p.x + "px";
       this.snakeBody[0].style.left = this.p.y + "px";
    }

     gameObj.pastCoord.push([this.p.x, this.p.y]);
     console.log( gameObj.pastCoord );
    }
  }
},

//TODO: addEventListener helper function
// after eating snakes become diger and adding to array 
//that you can see the length ag snake

//TODO: find out how to improve correctnes of collision 

// Crome works only with keydown and keyup
window.addEventListener('keydown', function() {
// before changing direction you have to put previous direction to false
  if ( event.keyCode == 38 ) {
      snakeObj.keys.up = true;
      snakeObj.keys.down = false;
  } else if ( event.keyCode == 40 ) {
      snakeObj.keys.down = true;
      snakeObj.keys.up = false;
  } else if ( event.keyCode == 39 ) {
      snakeObj.keys.r = true;
      snakeObj.keys.up = false;
      snakeObj.keys.down = false;
  } else if ( event.keyCode == 37 ) {
      snakeObj.keys.l = true;
      snakeObj.keys.r = false;
      snakeObj.keys.up = false;
      snakeObj.keys.down = false;
  }
}, false);
//TODO: add event hendler to click to some button

 window.addEventListener( "load", function gameLoop() {
   setTimeout( function() {
     snakeObj.update();
     requestAnimationFrame( gameLoop );
   }, 1000);
 });

Here is codepen (works only in CHROME) http://codepen.io/Kuzyo/pen/pamzC
Thanks for the help

4

1 回答 1

0

如果您以正确的顺序读取每个 div 的位置，则实际上不需要第二个数组。

这是一些伪代码...

refreshing the divs:

if the snake is not growing:
   for each div other than the head starting with the end of the tail:
      make the div position the position of the div in front
   move the head according the current direction direction
otherwise:
   add a new div at head end of the snake to be its new head

顺便说一句，这对于 request animationFrame 可能不会比单独使用 setTimeout 更好。

 window.addEventListener( "load", function gameLoop() {
   setTimeout( function() {
     snakeObj.update();
     requestAnimationFrame( gameLoop );
   }, 1000);
 });

您已要求及时调用函数 gameLoop 以与屏幕刷新同步，然后说在实际更改显示之前使用 setTimeout 等待而不进行任何同步。

于 2013-08-17T22:58:35.040 回答