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....
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
