How To Add Level Select To Your Puzzlescript Game

658 views

Skip to first unread message

Jack Kutilek

unread,

Mar 29, 2019, 6:32:04 PM3/29/19

to PuzzleScript

How To Add Level Select To Your Puzzlescript Game

An easy, step-by-step guide to using Draknek's level select code in your Puzzlescript games.

1. Find Draknek's Level Select code here: http://www.draknek.org/games/puzzlescript/js/level-select.js

2. EXPORT your Puzzlescript project to a .html file

3. Open the exported .html file in a text editor

4. Before the first <script> tag add this line:

This adds jquery to your webpage, which Draknek's code needs to work properly.

5. Right after that, paste Draknek's code between a new script tag

...paste Draknek's code here...

</script>

This adds the code, thanks Draknek!

6. Inside the <body> tag, insert this text so it looks like:

where:

_gameid is the name of your game in single quotes, for example 'Simple Block Pushing Game'

levels is the number of levels in your game or an array of level names to show in the level select

prevnext is true or false depending on if you want previous and next buttons to show up

This will initialize the level selecter when the page loads.

_gameid is used as a key in the browser's local storage to save whether you have completed a level or not (when you have the level select shows a checkmark next to the level name).

If you set levels to a number N, the code will initialize N level entries in the level select dropdown. If you pass an array instead, the dropdown will contain each level name in the array.

Setting prevnext to true will show '<< Prev' and 'Next >>' links on either side of the level select, so you can click through levels more easily.

7. Before the footer div <div class="footer"> add this text:

This is a placeholder for the level select dropdown, which gets added when the page loads (as specified above)

8. Before .gameContainer add this bit of text:

.levelselect{ background-color:none;text-align:center;float:center;color:white;position:absolute;margin-top:10px;left:10%;right:10%;top:91%;bottom:10%;}

This will style and position the level select dropdown to be under the game window.

9. Change the .footer text from

.footer{ background-color:none;text-align:center;float:center;color:white;position:absolute;margin-top:10px;left:10%;right:10%;top:90%;bottom:10%;}

.footer{ background-color:none;text-align:center;float:center;color:white;position:absolute;margin-top:10px;left:10%;right:10%;top:94%;bottom:10%;}

The only change is changing top to 94%. This will adjust the footer (which contains the website address you specified in your Puzzlescript project) so it doesn't overlap with the level select dropdown we added.

10. Delete these lines from Draknek's code that you pasted in:

$('html, body').animate({

scrollTop: $("#game").offset().top

}, 150);

These lines of code must do something on Draknek's website, but it is of no use to us and failing to remove it will cause the level selector to not work!

11. That's it! You should have a working level selector after that. I have attached a completed, working example for reference: 'Simple Block Pushing Game.html'

Note about message levels:

Message levels count as levels in Puzzlescript, so if you want to add a level select that skips over messages, you will have to edit the code to translate between indices into Puzzlescript's levels and indices into your level select's level list. There are a few places this is necessary, but I won't call them out here so as to keep this guide simple.