Help creating a scratch card simulation

@Luckyde

thanks for the help.

I’ve tested a project with the game inside an iFrame ( html widget) and it works offline.
you can connect the final goal ( percentage value) with Hype event with a further instruction javascript ( an internal URL)

Could you post your working file on this? Would be greatly appreciated.

Thanks!

@Luckyde

I would use this library on ipad and android devices offline only.
I must check the behavior on a real app in android. After a quick test on IOS devices it seems to work but I need more tests.

I had problems only in Chrome offline.

DEMO ONLINE

I used Hype only as a HTML widget. the code of the “game” is stored in the scratch.html only.
I made all codes in CSS/JS manually :slight_smile:

It is a simple game inside a widget, however, from this widget you can go to any schene of the hype project.
I used a ( not perfect) javascript and I hope someone can help me to improve the code, please!!

index.html?scene=SceneName?

Download Project + scratch resources

3 Likes

Superrr! Or “finger” may be at the edges of transparent?

not sure to understand :slight_smile:
in the screenshot above the masked area is totally random.
you can scratch the full area.

Check out this post (http://forums.tumult.com/t/about-jquery-eraser-js/3400/6) as a way to achieve the scratch-off effect natively in Hype (i.e. without jQuery or external libraries).

Hello,

I followed this, but my project works only on safari. There was no warning from the browser compatibility summary.
http://www.imagipeg.com/carte2015/carte2015.html

Do you have an idea of possible solution?

:frowning: HI, We have already discussed, in my tests it does not work using Chrome only.
This template was an experiment. made by lucky.
I developer an extended version but not for the web, for my next App only. Sorry.

good suggestioni!

Thank you for your reply

Hello everyone,

Does anyone have any idea why it’s not working on a Chrome browser.?

http://ioimedia.com//test/index.html

It works for me Apple’s browser (Safari)

But in windos (IE) + Google (Chrome) it does not work! Simple gray screen appears.

What is strange software (hype) does not show a problem or an error while exporting the file.

I’d love to the aid of experts.

Thank you.

If you look at the console, you’ll find there is an error in Chrome:

under.jpg%22:1 GET http://ioimedia.com//test/index.hyperesources/under.jpg%22 404 (Not Found)

The %22 is the culprit; it thinks there should be a quote after under.jpg -> under.jpg" (which is not the valid URL). This causes your javascript to stop working.

The root of the problem comes from the line containing:

piece1.style.backgroundImage

On Safari the URL is not quoted, on Chrome it is. You’ll need to revise your parsing to handle this.

1 Like

Hi,

Thank you for your comment…

The question is how do I deal with this …?

I will be happy if you can send me an example.

Thank you

Properly parsing backgroundImage CSS isn’t trivial but there are some solutions online (I can’t really recommend them because I haven’t used them nor are familiar enough with the spec). In your case it might be easy enough just to look at the last character and strip off a quote if it is found. Or you could use a different technique for looking up image names to supply them to your card function.

Hey, unfortunately I could not find a solution. ):index.hype.zip (374.4 KB)

The problem is in the two lines:

var piece1lastPart = piece1lastPart.substring(0,piece1lastPart.length - 1);

var piece2lastPart = piece2lastPart.substring(0,piece2lastPart.length - 1);

Chrome wants -2 Safari wants -1.

The simplest thing to do is just get rid of the extra quote if it exists by adding these two lines

piece1lastPart = piece1lastPart.replace('"','');
piece2lastPart = piece2lastPart.replace('"','');

After this line TheContainer.style.height=piece1.style.height;

Hi Thank you for the comment ...

It is indeed a problem there but this change you recommend does not work!

You know another way to make them both work simultaneously ..?

index-2.hype.zip (375.6 KB)

Cannot look at it at the mo. But it worked on my tests. !

Thank you

In the example of your last post you have not changed anything???

code should be :

//MOVE ALONG//
var piece1 = hypeDocument.getElementById('over'); 
var piece1lastPart = piece1.style.backgroundImage.split("/").pop();
var piece1lastPart = piece1lastPart.substring(0,piece1lastPart.length - 1);
var piece2 = hypeDocument.getElementById('under');
var piece2lastPart = piece2.style.backgroundImage.split("/").pop();
var piece2lastPart = piece2lastPart.substring(0,piece2lastPart.length - 1);
var TheContainer= hypeDocument.getElementById("Container");
TheContainer.style.width=piece1.style.width;
TheContainer.style.height=piece1.style.height;

piece1lastPart = piece1lastPart.replace('"',''); //--NEW CODE REMOVE QUOTES
piece2lastPart = piece2lastPart.replace('"','');//--NEW CODE REMOVE QUOTES
//MOVE ALONG//
			createScratchCard({
  'container':hypeDocument.getElementById("Container"), 
  'background':"${resourcesFolderName}/"+ piece2lastPart,
  'foreground':"${resourcesFolderName}/"+piece1lastPart, 
   //STOP// 
  //amount to be rubbed out before it gets fully revealed
  'percent':90, 
  //finger thickness
  'thickness':86,
	"counter":"percent",
	"callback":"callback"
  
});
piece1.style.display = "none";
piece2.style.display = "none";

That’s exactly what I did and it did not work!