Loop through array every time a function is called - cycling colours in canvas 2d Javascript-CodePudding

I'm trying to cycle through items in an array every time a function is called in a parent function.

const wildColours = ["green", "blue", "orange", "red", "purple", "yellow", "white"]

function drawGame() { // this is drawing elements on the canvas every 100 milliseconds.  
   nCanvasDrawElements();
   drawWildCard();
   setTimeout(drawGame, 100);
};

function drawWildCard() {
  for (i = 0; i < wildColours.length; i  ) {
    let wildCycle = wildColours[i];    
    context.fillStyle = wildCycle;
    context.fillRect(wildCardX, wildCardY, tileSize, tileSize);
    console.log(wildCycle);
  }
};

drawGame();

It's returning all items in the array each time drawWildCard() is called in drawGame().

I'd like to continuously(cycle) through the colours in the wildColours array, each time I draw the drawWildCard() function in drawGame()

So that the WildCard cycles through the array of colours every 100 milliseconds with all the other game elements.

The project is here and I am just learning to code. If anyone can explain the answer I would really appreciate it.

CodePudding user response：

You have to keep track of the last chosen color outside of drawWildCard. In every drawGame loop, you can then change the color once.

To make sure you cycle through each color, you have to make sure you start from the first color once you reach the end of the array.

You can do so by incrementing an index every time and taking the remainder of the index divided by the total number of colors.

nextIndex = (previousIndex   1) % totalNrOfcolors;

const context = document.querySelector("canvas").getContext("2d");
const wildCardX = 0, wildCardY = 0, tileSize = 200;

let wildIndex = 0;
const wildColours = ["green", "blue", "orange", "red", "purple", "yellow", "white"]

function drawGame() { // this is drawing elements on the canvas every 100 milliseconds.  
   drawWildCard();
   setTimeout(drawGame, 100);
};

function drawWildCard() {
  const wildCycle = wildColours[wildIndex];    
  context.fillStyle = wildCycle;
  context.fillRect(wildCardX, wildCardY, tileSize, tileSize);

  wildIndex = (wildIndex   1) % wildColours.length;
  
};

drawGame();

<canvas width="200" height="200"></canvas>

CodePudding user response：

I got it to work, but I'm not exactly sure how ... what I used works ... exactly .

Some form of index remainder array method thing-a-majig

array[index   % array.length]

that I found in this solution Javascript: How to loop through every array's item every second

The working code is:

const context = document.querySelector("canvas").getContext("2d");
const wildCardX = 0, wildCardY = 0, tileSize = 200;

const wildColours = ["green", "blue", "orange", "red", "purple", "yellow", "white"]
let index = 0;

function drawGame() { // this is drawing elements on the canvas every 100 milliseconds.  
   drawWildCard();
   setTimeout(drawGame, 100);
};

function drawWildCard() {
    context.fillStyle = wildColours[index   % wildColours.length];
    context.fillRect(wildCardX, wildCardY, tileSize, tileSize);
};

drawGame();

<canvas width="200" height="200"></canvas>

Thanks user3297291 for explaining