Digital Workshop

Hi,

I am still having some difficulty figuring out how to use an external JS file. I viewed Mack's YouTube and think that I am calling the external files correctly:



However, still not getting a basic example to run. Must be doing something else wrong.

The original source is a bejeweled game which has a downloadable for the complete package: http://www.emanueleferonato.com/wp-cont ... rotate.zip

A walk-through of the source code is at: http://www.emanueleferonato.com/2016/11 ... bejeweled/

This zip package contains the 2 JS files (phaser.js and game.js--see code above), a few image assets (which I tried adding to the Opus HTML5 pub, and modified the game.js paths to these images to match the Opus export's path/location).

When I publish and run, no joy.

I have attached the IMP below.

Would appreciate any help getting this sample bejeweled game to run in Opus HTML5.

Much thanks.

Kind Regards,

The code is fine. That's just not a basic example. In fact, it rather advanced. It's trying to modify the DOM when the script loads and this conflicts with what Opus is attempting to do.

You can delay the scripts slightly, by using the defer option in the Script Tag, but this doesn't go anyway near far enough to get that canvas game onto an Opus page.

Personally, you probably want to find out how the scripts are automatically building the game and switch to a manual method than can be triggered once the Opus code is fully up and running and work from there.

BTW, your publication is set to SCORM publish. Is there a reason for that?

</mack>

Hi Mack,

Apologies, thought this was a "cut and paste" for the JS. Can see why it loads very slowly: the phaser.js has an enormous number of lines of code.

Need a simple match 3 game visual memory exercise (like Bejeweled) for an eLearning lesson (thus the SCORM publishing). Maybe one based on a much smaller JS library or engine.

I found a more basic version of a match 3 game here: http://www.emanueleferonato.com/2014/05 ... -controls/

source code and assets: http://www.emanueleferonato.com/wp-cont ... eweled.zip .

Loads easier, but so far not sure how to get it to center on the page and still working OK? The css in bejeweled.js is placing it at the upper left side.

So, need to change the code to center it plus keep it working OK (still able to select and move the correct objects to play game). So far, no success moving it and keeping it working OK. Maybe putting it into a container, then centering the container, even being able to rotate the container after each attempt to solve? Not sure how to do this in JQuery, so a challenge.

Attached the IMP below.

Best Wishes,

Not sure it's simpler but Opus' is happier.

Changed code to load game into an Opus DOM element rather than body. Add calculations to work out offset of publication (not page) and Frame used to hold the game. Switch game load to manual.

Seems fine

Can be downloaded from our site: http://www.live.interaktiv.co.uk/?section=files

using code: bejewelled@digitalgrapevine.info

Can also be played online: http://sandbox.interaktiv.co.uk/bejewelled/


</mack>

Thanks, Mack.

Found a glitch. Sometimes, unpredictably, when quickly mousing over the tiles after game starts, after a few matches, searching for a new match-3, a tile will unexpectedly fly up and out of the frame and "disappear" and the board stops working.

It seems to be this line of code:


When I change this to:


works OK.

Best Wishes,

Hi Mack,

Update: tested by uploading and using an Android tablet to view: unfortunately, won't pick or select gems. Tried with "Wants Touch Input" with no success. Tried with mobile FF, then mobile Chrome, no success. Also tested using Android tablet using your Interaktiv sandbox version: again no success, won't pick or select gems. I suspect jquery.touchSwipe plug-in may not play well with mobile browsers.