How can I create a scratchcard with real numbers and track if some specific numbers are scratched or visible?

280 Views Asked by At

I have a game scratchcard and using Scratchcard HTM5 Plugin.

Here is the image:

scratch intro

The scratched area is the gold part and under it there are points numbers.

Here is the image for that:

With the plugin am adding the following code:

var theFiles = ["1.jpg", "2.jpg", "3.jpg", "4.jpg","5.jpg","6.jpg","7.jpg","8.jpg"];
// 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);
var alo = randomFn;
function myFunction() {
    window.open('http://xxxxxxx/', '_blank');
}
function callback(d) { 
    if(alo ==="1.jpg" || alo ==="2.jpg" || alo ==="3.jpg" || alo ==="4.jpg" || alo ==="5.jpg"){
        d.container.style.backgroundImage = 'url(assets/images/project-A-win-screen.jpg)';
        d.container.style.cursor = "pointer";
        d.container.onclick = myFunction;
    }else{
        d.container.style.backgroundImage = 'url(assets/images/project-A-lose-screen.jpg)';
    } 
}
//function percent(p) { document.getElementById("counter").innerHTML = p; }
window.onload = function() {
    createScratchCard({
        "container":document.getElementById("scratchcard"),
        'background':'assets/images/'+randomFn,
        'foreground':'assets/images/project-A-intro-screen.jpg',
        "percent":35,
        "coin":"assets/images/coin2.png",
        "thickness":18,
        "counter":"percent",
        "callback":"callback"
    });
};

My aim is to track when for example 3 hundreds are scratched or visible so I can do some action. I tried with the percentage but it is not right with the logic. How can I track the numbers?

0

There are 0 best solutions below