Question

At the moment in my game, when it is complete a random image is passed to the “reveal-wrapper” to display at the end.

I still want to do this but instead of doing it this way I would like to add a random class each time to the “revael-wrapper” to make it “.reveal-wrapper .image1” for example. There will be 5 different images and I want it to pick one at random each time.

The code for it at the moment is as follows:

$(document).ready(function () {
    bgImageTotal = 5;
    randomNumber = Math.round(Math.random() * (bgImageTotal - 1)) + 1;
    imgPath = ('images/reward-images/' + randomNumber + '.png');
    $('.reveal-wrapper').css('background-image', ('url("' + imgPath + '")'));
});

Any ideas how I would add a random class instead?

Answer 1

You’ve already got the logic in place, you just need to add the class. Try this:

$(document).ready(function () {
    bgImageTotal = 5;
    randomNumber = Math.round(Math.random() * (bgImageTotal - 1)) + 1;
    $('.reveal-wrapper').addClass('image' + randomNumber);
});

All you then need to do is setup the classes in your CSS:

.image1 { background-image: url('images/reward-images/1.png'); }
.image2 { background-image: url('images/reward-images/2.png'); }
.image3 { background-image: url('images/reward-images/3.png'); }
.image4 { background-image: url('images/reward-images/4.png'); }
.image5 { background-image: url('images/reward-images/5.png'); }