i am attempting to make snake in java script using p5.js and have the snake as an array where the head is the first index and the tail every spot after. i am trying to loop through the array backwards for moving the boxes so they don't all end up on one square but the rest of the code stopped working when i tried this. the head is supposed to go down and this works when i loop through normally with the head at the other end, but need to go backwards so i can add more into the array. here is my code:

function setup() {
  createCanvas(400, 400);
}

class SnakeBlock{
  constructor(x, y, isHead){
    this.x = x;
    this.y = y;
    this.isHead = isHead;
  }
  
  draw(){
    fill("green");
    noStroke();
    rect(this.x * 40, this.y * 40, 40, 40)
  }
  
  move(snake, x){
    if(this.isHead == true){
      this.y += 1;
    }
    else{
      this.y = snake[x - 1].y;
      this.x = snake[x - 1].x;
    }
  }
}

var length = 4;

var moveCounter = 20;

var snake = [new SnakeBlock(0, 0, true),new SnakeBlock(1, 0, false),new SnakeBlock(2, 0, false), new SnakeBlock(3, 0, false)];

function draw() {
  background(0);
  for(let x = length - 1; x > 0; x--){
      snake[x].draw();
  }
  if(moveCounter == 0){
    for(let x = length - 1; x > 0; x--){
      snake[x].move(snake, x);
      snake[x].draw();
    }
    moveCounter = 20;
  }
  else{
    moveCounter -= 1;
  }
  
  
}

back when i had it looping the other way the snake head would move down as seen in the move() function in the snake class, but when i loop backwards it doesn't move down at all and just stays in place. yes i did reverse the array when looping the other way.

i am attempting to make snake in java script using p5.js and have the snake as an array where the head is the first index and the tail every spot after. i am trying to loop through the array backwards for moving the boxes so they don't all end up on one square but the rest of the code stopped working when i tried this. the head is supposed to go down and this works when i loop through normally with the head at the other end, but need to go backwards so i can add more into the array. here is my code:

function setup() {
  createCanvas(400, 400);
}

class SnakeBlock{
  constructor(x, y, isHead){
    this.x = x;
    this.y = y;
    this.isHead = isHead;
  }
  
  draw(){
    fill("green");
    noStroke();
    rect(this.x * 40, this.y * 40, 40, 40)
  }
  
  move(snake, x){
    if(this.isHead == true){
      this.y += 1;
    }
    else{
      this.y = snake[x - 1].y;
      this.x = snake[x - 1].x;
    }
  }
}

var length = 4;

var moveCounter = 20;

var snake = [new SnakeBlock(0, 0, true),new SnakeBlock(1, 0, false),new SnakeBlock(2, 0, false), new SnakeBlock(3, 0, false)];

function draw() {
  background(0);
  for(let x = length - 1; x > 0; x--){
      snake[x].draw();
  }
  if(moveCounter == 0){
    for(let x = length - 1; x > 0; x--){
      snake[x].move(snake, x);
      snake[x].draw();
    }
    moveCounter = 20;
  }
  else{
    moveCounter -= 1;
  }
  
  
}

back when i had it looping the other way the snake head would move down as seen in the move() function in the snake class, but when i loop backwards it doesn't move down at all and just stays in place. yes i did reverse the array when looping the other way.

• javascript
• arrays

• Please explain what "the rest of the code stopped working" means. – Scott Hunter Commented Nov 4, 2021 at 12:11
• You might want to check out unshift – Martijn Commented Nov 4, 2021 at 12:13
• What was the code that "had it looping the other way"? – Scott Hunter Commented Nov 4, 2021 at 12:16
• 1 You are looping while x > 0, but must be x >= 0. Array indexes start at zero. – José Carlos PHP Commented Nov 4, 2021 at 12:34

3 Answers 3

Simple, loop the other way. Instead of i++ use i--:

for(i = 0; i < array.length; i++){
    // do something with array[i]
}

// you go backwards:
for(i = array.length - 1; i >= 0; i--){
    // do something with array[i]
}

Option 1

var arr = [1, 2, 3, 4, 5];
 
for (var i = arr.length - 1; i >= 0; i--) {
    console.log(arr[i]);
}

Option 2

var arr = [1, 2, 3, 4, 5];
 
arr.slice().reverse().forEach((item) => {
    console.log(item);
});

You can achieve this using the Array.prototype.reduceRight() method

const arr = [1,2,3,4,5];
arr.reduceRight((_, el) => {
 console.log(el);
 // do stuff
 return el;
}, null)

More about reduceRight - https://developer.mozilla/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduceRight