Question

我觉得我几乎找到了解决方案，但需要一些帮助。我有两个数组：一个是snakeBody（包含将成为蛇体的div），第二个数组包含来自snakeBody（snakeBody [0]）的第一个元素的协调数组，之后他开始以这样的形式移动pastCoord = [[20， 0]，[40,0]，[60,0] ......]（这里[coordX，coordY]）。每一步都是20px。

我不知道如何将来自pastCoord数组的coords应用于snakeBody数组中的元素。

我认为循环加倍，但在这个循环中该怎么做我不知道：

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


  };

这是我的所有代码：

// 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);
 });

这是codepen（仅适用于CHROME）http://codepen.io/Kuzyo/pen/pamzC
谢谢你的帮助

Answer 1

如果按正确的顺序读取每个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

顺便说一句，对于请求animationFrame，这可能不会比使用setTimeout本身更好。

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

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

JS Snake游戏使用两个阵列运行

1 个答案: