Question

I’m currently making a game in JS, and I faced a problem.

I got an 2D array that stores an image, now I want some random pic to be changed every 1 second, everything is working but, I don’t know how I can change the picture.

Do I have to print all the other images if I want to change the random cell in the array?

I’m almost sure that there’s another way to change it without doing it.

I’ll be glad for help, if anyone needs other explanation I’ll be glad to.

Answer 1

You can try using something like this in your header. It should call changePic() every second, incrementing through your picture array, and setting the new picture on an image element.

//know your array sizes
var max_x = picArr.length;
var max_y = picArr[0].length;
var current_x = 0;
var current_y = 0;

function changePic()
{
  if(current_y == max_y-1)
  {
    if(current_x == max_x-1)
    {
      current_x = 0;
      current_y = 0;
    }
    else
    {
      current_x++;
      current_y = 0;
    }
  }
  else
    current_y++;

  var pic = picArr[current_x][current_y];
  getElementById('randomImage').setAttribute('src', pic);

  window.setTimeout(changePic, 1000);
}

setTimeout(changePic, 1000);

https://developer.mozilla.org/en/DOM/window.setTimeout