Help creating a scratch card simulation

@Luckyde Great work!

I’m wondering if is possible to do it offline without server. alternatives?
it would be a great addition in an App ( IOS/android).

regards

Great!

i was wondering, I played around with the original file and when I use Hype Reflect, there is no problem, it just works. So apparently the server dependance is only working when you export?

This is true. This type of files that work only through the server!

How lucky I was that I met "
LuckydeLucky "

Thanks :slight_smile:

Cheers!
Well the reason why is cross-origin policy

the jquery script i use by default thinks the images are being called from another domain so it works but security blocks them locally so if you start either digging around in the original jquery or use another plugin you could probably figure out a way around it. Hype simulates a local host server on testing which is why it works :smile: but not after

1 Like

@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)