How to render random backgrounds with HTML5 Scratch Card

Question

I am using HTML5 Scratch Card plugin and dont know how I can render random backgrounds with javascript.Here is the code

window.onload = function() {
            createScratchCard({
                'container':document.getElementById('circle'),
                'background':'assets/images/demo2-circle-background.png',
                'foreground':'assets/images/demo2-circle-foreground.png',
                'percent':100,
                'coin':'assets/images/coin2.png',
                'thickness':18,
            });
        }

So with this default structure how I can render random 2, 3 images and show one every time, show randomly>

Well it depends on how you named your files. e.g if you name it `1.png`, `2.png`, `3.png`, then you just have to change the background line to `'background':'assets/images/'+Math.ceil(Math.random()*3)+'.png',` — Kaiido, Sep 10 '15 at 07:47
it didnt work 'background':'assets/images/'+Math.floor(Math.random()*yourArray.length),, the first one work perfectly — Ana DEV, Sep 10 '15 at 08:07
Oups my bad it should have been `'background':'assets/images/'+ yourArray[Math.floor(Math.random()*yourArray.length)],` — Kaiido, Sep 10 '15 at 08:08

Kaiido · Accepted Answer · 2015-09-10T09:21:54.840

1

You could set all your file's names into an array and pick one randomly each time.

To make sure your user won't get the same value every time they come to your page, the only solution is to save it somewhere on their side. For this you could use cookies, or as chosen in the above example localStorage :

window.onload = function() {
  // declare your file names
  var theFiles = ["foo.png", "bar.png", "baz.png"];
  // get the saved number we got
  var previous = localStorage.getItem('rolledDices');
  if(previous){
     // parse them and remove them from our array
     var p = previous.split(' ');
     if(p.length-1<theFiles.length){
       p.forEach(function(i){if(i!=='')theFiles.splice(theFiles.indexOf(i),1)})
       }
     // clear the storage if we got all of them
     else{
        previous='';
        }
     }
  // get a new random value from our array
  var randomFn = theFiles[Math.floor(Math.random()*theFiles.length)];
  // add it to the list of saved ones
  localStorage.setItem('rolledDices', (previous||'')+' '+randomFn);

  createScratchCard({
    'container':document.getElementById('circle'),
    'background':'assets/images/'+randomFn,
    'foreground':'assets/images/demo2-circle-foreground.png',
    'percent':100,
    'coin':'assets/images/coin2.png',
    'thickness':18,
    });
  }

edited Sep 10 '15 at 09:21

answered Sep 10 '15 at 08:17

Kaiido

123,334
13
219
285

now it renders first two, havent rendered the third one – Ana DEV Sep 10 '15 at 08:20
how many tries? you're just picking a random number through 3 variables, you may fall a lot of times on the two sames – Kaiido Sep 10 '15 at 08:21
Running `var theFiles = ["foo.png", "bar.png", "baz.png"]; theFiles[Math.floor(Math.random()*theFiles.length)]` in my console 10 times I got every of the three possibilities – Kaiido Sep 10 '15 at 08:22
yes I see but I need to exclue the times that they are getting 1.jpg again 1jpg for example – Ana DEV Sep 10 '15 at 08:26
If this code is ran at page load only, then your only solution is to save somewhere ( localStorage or cookie) on user's device what number they got and pop it out of the array before. If this is not at the page load, then simply call `theFiles.pop(Math.floor(Math.random()*theFiles.length))` which will remove the called index of the array (so at third time it will be empty : to counter taht, you can create a copy of this array by slicing it before poping anything and if the array is empty then refill it with the saved one) – Kaiido Sep 10 '15 at 08:31
it should be changed on page load page refreshing – Ana DEV Sep 10 '15 at 08:35
Ok I'll add something in the answer then – Kaiido Sep 10 '15 at 08:37

How to render random backgrounds with HTML5 Scratch Card

1 Answers1