Question 304895 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Can I choose a random image from an array

Can i choose a random image from an array to display it on a button? when i click the button i want to move from the chosen image to the next one.

I want to do a puzzle game in javascript and the idea is to display the puzzle with random images, and when you click on a button the image changes to the next one, for example. The random one is "img/cableTriple4.png", but when i click i want it to be "img/cableTriple1.png", then number 2, 3, and then again 4…

const gridSize = 4;
const juegoTablero = [
    [1, 2, 2, 1],
    [1, 0, 0, 1],
    [2, 3, 4, 3],
    [1, 0, 0, 2],
];

// Imagenes que uso para los botones del grid
const imageNames = {

    // CABLES RECTOS
    0: ["img/cableRecto1.png",
        "img/cableRecto1.png"],

    // BOMBILLAS
    1: ["img/bombilla1.png",
        "img/bombilla2.png",
        "img/bombilla3.png",
        "img/bombilla4.png"],

    // CABLES DOBLES
    2: ["img/cableDoble1.png",
        "img/cableDoble2.png",
        "img/cableDoble3.png",
        "img/cableDoble4.png"],

    // CABLES TRIPLES
    3: ["img/cableTriple1.png",
        "img/cableTriple2.png",
        "img/cableTriple3.png",
        "img/cableTriple4.png"],

    // CENTRO
    4: ["img/centro1.png",
        "img/centro2.png",
        "img/centro3.png",
        "img/centro4.png"]
}
Tags:

2

Answers


  1. 0

    The array can be shuffled using a (secure) random number generator as input. The shuffle is usually implemented using Fisher-Yates, as can be seen when looking at the main answer about shuffling an array on StackOverflow. That’s what’s required if you want a well distributed result.

    It may be that a cryptographically secure number generator is required for the added confidence in the result. An example that helpfully shuffles indices instead of the elements themselves can be found here. However, beware that it relies on a single person project. There are also a few other answers that are cryptographically secure in the main answer above.

    Then you go through the shuffled array until it is exhausted then start over. If a turn is kept then you can use that as index (of the indices) modulo the size of the array, as in:

       imageRefIndex = randomImageIndices[turn % randomImageIndices.length];
   imageRef = orgImageRefArray[imageRefIndex];

    In other words, the array is shuffled once and then looped over.

    If the original order needs to be maintained it is important to first create a copy of the array before it is shuffled of course. If an array with indices is shuffled specific for this purpose then this is probably not required.

    Login or Signup to reply.
  2. 0

    The first image will be random upon page reloads while the subsequent images will follow the order defined in the imageNames array. Adjust the category index (3 in this case).

    let isFirstImageRandom = true;
let currentImageIndex = 0;

function getRandomImage() {
let randomImage;

if (isFirstImageRandom) {
  // For the first image select randomly
 randomImage = imageNames[3][Math.floor(Math.random() * imageNames[3].length)];
    isFirstImageRandom = false;
  } else {
  // After the first image follow the order
  randomImage = imageNames[3][currentImageIndex];
  currentImageIndex = (currentImageIndex + 1) % imageNames[3].length;
 }
 buttonImage.src = randomImage;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search