Forum Discussion
Embed a Javascript Game (Javascript API)
I've got 4 Javascript Games (Pong, Breakout, Tetris, Frogger) that I'd like to embed in a Storyline project.
The only way I've been able to get this to work is to embed these games as a Web Object. I would prefer to have a button for each game and then the game launch in Storyline using the "Execute Javascript" trigger.
Here's the Javascript Game for Pong as an example (view page source to see the Javascript).
3 Replies
I don't see a link. Aside from that, web objects provide containment for complex scripts. Like many standalone JavaScript routines, you likely can integrate it directly onto a SL slide, but you will have to make customized changes to make it compatible with the SL webpage environment. That could be easy, or very hard. Perhaps you could just have it open upon trigger in an external webobject?
Here is the LINK
It doesn't look too complicated, but will need a fair bit of work. You would need to do some trial and error iterations. Consider if it will take more than it's worth. Broad strokes:
- Place a rectangle shape on your slide
- Your game start or setup trigger would do the following:
- In JS, find the rectangle, keep top two wrapper div elements and clear the remaining content
- In JS rebuild the DOM structure for the game inside the inner div you kept
- Add any necessary css styling to make the contents display properly in your div. Start with only text blocks first for simplicity
- Inject any additional css styles needed for the game into the SL page's style sheet
- Duplicate the game script into a JS function to draw everything on the canvas. Edit as needed.
- Looking at the script, you will probably need to change some pixel sizings to something more relative to keep the layout.
- You may also need to adjust the movement calculations based on current window scaling settings.
- Test, tweak, and retest
