I have a game scratchcard and using Scratchcard HTM5 Plugin.
Here is the image:
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?