Embedding PuzzleScript games into Webpages PuzzleScript games are great because they can be played by blind people, by kids, and make for great easter eggs or 404 pages. To embed them into a webpage, we need to do the following: import the puzzlescript package import the source code for a game (a text file) attach the game to a <table> element so that it renders Listed below is the accessible version of the game PUSH. In it, the goal is to
Get to the chalice by only pushing one thing To play: click on the game to focus on it use the arrow keys to move around (or W A S D) press space or X to perform an action press Z or U to Undo press R to restart the level
table = html`<table><tr><td>.</td></tr><tr><td>.</td></tr><tr><td>.</td></tr><tr><td>.</td></tr><tr><td>.</td></tr><tr><td>.</td></tr><tr><td>.</td></tr><tr><td>.</td></tr><tr><td>.</td></tr><tr><td>.</td></tr><tr><td>.</td></tr><tr><td>.</td></tr><tr><td>.</td></tr><tr><td>.</td></tr><tr><td>.</td></tr><tr><td>.</td></tr><tr><td>.</td></tr></html>`
cssStyle = html`<style> /* * ========================================== * Puzzlescript HTML Table styling * ========================================== */ kbd { font: 11px "SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace; display: inline-block; padding: 3px 5px; font-size: 11px; line-height: 10px; color: #444d56; vertical-align: middle; background-color: #fafbfc; border: solid 1px #c6cbd1; border-bottom-color: rgb(198, 203, 209); border-bottom-color: #959da5; border-radius: 3px; box-shadow: inset 0 -1px 0 #959da5; } table.ps-table { width: 400px; margin-left: auto; margin-right: auto; border-spacing: 10px; border-collapse: collapse; } table tr td.ps-cell { position: relative; padding: 0; } td.ps-cell::after { content: ''; display: block; margin-top: 100%; } .ps-cell-label { /* Move it off-screen so screenreaders read it but users do not see it */ position: absolute; left:-9999px; } .ps-sprite-whole { /* to make it square (depends on styling for "ps-cell") */ position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: flex; flex-direction: column; flex-wrap: nowrap; width: 100%; height: 100%; } .ps-sprite-row { display: flex; flex-direction: row; flex-grow: 1; flex-wrap: nowrap } .ps-sprite-pixel { flex-grow: 1 } </style> `
PuzzleScript = require('puzzlescript@3.0/lib/webpack-output')
Now that we have the PuzzleScript package, we need to initialize the engine and attach it to the table.
engine = { // resize the table entry every time the level changes const eventHandler = { onLevelComplete: () => table.dispatchEvent(new CustomEvent("level-change")) } const engine = new PuzzleScript.TableEngine(table, eventHandler) engine.setGame(gameSource, 0) engine.start() eventHandler.onLevelComplete() // resize the table cell yield engine }
Here is the source file to the game that is being played. Feel free to edit it or you can play a different game by pasting another one in to the gameSource variable below. Some to choose from can be found here
gameSource = `title PUSH author lonebot - demake by rmmh homepage http://lonebot.net/games/push/ youtube UXlXgFDgXow again_interval 0.1 noaction ======== OBJECTS ======== Background . #756C5E Wall # #635854 StrongPlayer P #E8D2AC #67453D Black #282D3C Red 11111 02020 40004 43334 33.33 WeakPlayer #E8D2AC #67453D Black #282D3C 11111 02020 .000. .333. 33.33 GibbedPlayer Red ...0. .0... 0..0. ..... ..0.0 Rock * #202020 #706249 #A6957B .000. 02220 02210 01110 .000. RockDust (destroyed by a projectile) #A6957B ...0. .0... 0..0. ..... ..0.0 Idol G #945527 #C97536 #F4EF0B .000. 01210 .222. .010. 01210 Pit _ Black #5A5349 .1.1. 1000. .000. .0001 ..11. PitFilled Black #5A5349 #706249 .1.1. 1222. .222. .2221 ..11. PitPlayer Black #5A5349 #E8D2AC #282D3C .1.1. 1020. .222. .3331 ..11. WeakGround x #5A5349 .0..0 00..0 ..00. 00..0 0.0.. GunUSingle U Black Grey Yellow ..0.. 12021 11011 11111 .111. GunDSingle D Black Grey Yellow .111. 11111 11011 12021 ..0.. GunRSingle R Black Grey Yellow .111. 1112. 11000 1112. .111. GunLSingle L Black Grey Yellow .111. .2111 00011 .2111 .111. GunUMulti M Black Grey Red ..0.. .202. 12021 12221 .111. GunLMulti N Black Grey Red ..11. .2221 00021 .2221 ..11. GunRMulti O Black Grey Red .11.. 1222. 12000 1222. .11.. Button T #969283 #4A4A4A .000. 01110 01010 01110 .000. ButtonPressed #969283 #3A3A3A .000. 01110 01110 01110 .000. ArrowU Brown ..0.. .000. ..0.. ..... ..... ArrowR Brown ..... ...0. ..000 ...0. ..... ArrowL Brown ..... .0... 000.. .0... ..... ArrowD Brown DarkBrown ..... ..... ..0.. .000. ..0.. Firing Black Fired Brown (used for linking buttons to guns, and for generic flags) LinkA Red LinkB Green LinkC Blue LinkD White LinkE Black ======= LEGEND ======= Player = StrongPlayer or WeakPlayer or GibbedPlayer DeadPlayer = GibbedPlayer or PitPlayer GunU = GunUSingle or GunUMulti GunD = GunDSingle GunL = GunLSingle or GunLMulti GunR = GunRSingle or GunRMulti MultiGun = GunUMulti or GunLMulti or GunRMulti Gun = GunU or GunR or GunD or GunL Movable = Rock or Gun Q = StrongPlayer and WeakGround Heavy = Movable or Player Arrow = ArrowU or ArrowR or ArrowD or ArrowL Link = LinkA or LinkB or LinkC or LinkD or LinkE Blockers = Player or Wall or Idol or Movable 1 = Wall and LinkA 2 = Wall and LinkB 3 = Wall and LinkC 4 = Wall and LinkD 5 = Wall and LinkE 7 = GunRSingle and LinkE 8 = Button and LinkE ======= SOUNDS ======= Idol destroy 47224903 Pit create 4141702 PitPlayer create 19700104 PitFilled create 87604304 ButtonPressed create 25424301 (using sfxN here to deal with bug where 'again' triggers sounds twice) sfx0 36787702 (rock destroyed by arrow) sfx1 59184504 (player explodes) Arrow create 98842708 (arrow shot) ================ COLLISIONLAYERS ================ Link (move layer to top for debugging linkages) Firing, Fired Background Pit, PitFilled, WeakGround, Button, ButtonPressed, PitPlayer, RockDust Blockers Arrow ====== RULES ====== (player can move an object only once) [ > StrongPlayer | Movable | no Blockers ] -> [ > WeakPlayer | > Movable | ] [ > Movable Link ] -> [ > Movable > Link ] [ DeadPlayer ] -> cancel (pit behaviors) late [ Player Pit ] -> [ PitPlayer ] (falling into a pit kills you) late [ Pit Rock ] -> [ PitFilled ] (they can be filled) [ Player WeakGround ] -> [ Player WeakGround LinkA ] (mark WeakGround as visited) late [ WeakGround LinkA no Player ] -> [ Pit ] (pits appear when you move off weakground) (initialize gun linkages -- try linking on a line first) [Wall Link] [Button no Link | ... | Gun no Link] -> [Wall] [Button Link | ... | Gun Link] [Wall Link] [Button no Link] [Gun no Link] -> [Wall] [Button Link] [Gun Link] (buttons cause linked gun to fire) late [ Button Heavy LinkA ] [ Gun LinkA ] -> [ ButtonPressed Heavy ] [ Gun Firing ] again late [ Button Heavy LinkB ] [ Gun LinkB ] -> [ ButtonPressed Heavy ] [ Gun Firing ] again late [ Button Heavy LinkC ] [ Gun LinkC ] -> [ ButtonPressed Heavy ] [ Gun Firing ] again late [ Button Heavy LinkD ] [ Gun LinkD ] -> [ ButtonPressed Heavy ] [ Gun Firing ] again late [ Button Heavy LinkE ] [ Gun LinkE ] -> [ ButtonPressed Heavy ] [ Gun Firing ] again ( MultiGuns fire 3 shots. do this by cycling LinkB->LinkA->None ) [ MultiGun Firing no Link ] -> [ MultiGun Firing LinkB ] [ MultiGun Fired LinkB ] -> [ MultiGun Firing LinkA ] [ MultiGun Fired LinkA ] -> [ MultiGun Firing ] ( create arrows ) [ GunU Firing ] -> [ GunU ArrowU Fired ] [ GunR Firing ] -> [ GunR ArrowR Fired ] [ GunL Firing ] -> [ GunL ArrowL Fired ] [ GunD Firing ] -> [ GunD ArrowD Fired ] ( move ) [ ArrowL ] -> [ left ArrowL ] again [ ArrowU ] -> [ up ArrowU ] again [ ArrowR ] -> [ right ArrowR ] again [ ArrowD ] -> [ down ArrowD ] again late [ Arrow Rock ] -> [ RockDust ] sfx0 late [ Arrow Player ] -> [ GibbedPlayer ] sfx1 late [ Arrow Blockers ] -> [ Blockers ] sfx0 (grabbing an idol) [ DeadPlayer ] -> cancel [ > Player | Idol ] -> [ Player | Pit ] ============== WINCONDITIONS ============== no Idol ======= LEVELS ======= (message 1/20: You only get one push!) ########### #.........# #......*..# #.*.....*.# #...***...# #..**g*...# #..*.*....# #.........# #...p...*.# #.........# ########### message 2/20: Mind the gap ########### #**.......# #*....*.*.# #.........# #...***...# #...*g*...# #...*_*...# #*........# #..*.p..*.# #.........# ########### message 3/20: Shaky footing ########### #****g****# #.*_..****# #x********# #.********# #.x.xx...*# #*******x*# #......x.*# #.********# #p*.......# ########### message 4/20: Firepower 1########## #*...g...*# #........*# #*********# #**.....*.# #**.......# #**_.p....# #*t*...**.# #**_...**.# #**..u...*# ########### message 5/20: Artillery 1########## #**.....*.# #*......**# #...*g*...# #.*.......# #.........# #*********# #..*.**...# #*......t.# #..*.u...p# ########### message 6/20: Traps 1########## #t**.****.# #.*...**g*# #.x.....**# #.**.*....# #..*.*....# #.**......# #**.......# #**p..*...# #**..**.u*# ########### message 7/20: Sequencing 12######### #*********# #*t****_..# #*x*.d**..# #.....**..# #.....*...# #t..._*...# #r...**.g.# #...***...# #p..****..# ########### message 8/20: Hamiltonian Cycle (8/20 - 3 guns, order irrelevant) 123######## #*....**.*# #..***l**.# #g****l***# #*****l***# #tx**xxxxx# #xxxqxxx*t# #xx*_**x_x# #*x_xxxxx*# #*xtx*x**_# ########### message 9/20: Barrage (9/20 -- 4 guns, all inline with triggers) 1234####### #****x***_# #***.tt.**# #xg_.dd.**# #*__......# #_*__**.lt# #_*..*..lt# #.........# #*p.......# #**...*..*# ########### message 10/20: Rotary (10/20 -- 4 guns, mostly inline with triggers) 1234####### #**_*...t.# #*......d.# #r......**# #*.****..*# #t.*.g**.*# #..******x# #....**_xt# #.....p***# #_.u*t._.l# ########### message 11/20: Shooting Gallery (11/20) 1234####### #t..*..*_l# #_.****.__# #r.*x**.t*# #******.**# #**xtr_.*g# #__.__..**# #_......**# #....p.u.*# #**....t..# ########### message 12/20: Co-op (12/20: 2 players!) 1########## #*t.._____# #...._*g__# #.r.._.*..# #...._*.**# #**_._.*.*# #****_....# #*..*_..**# #*.**_..**# #*p**_..p*# ########### message 13/20: Rescue 12######### #**...._.g# #*.t..._*.# #*...d._.*# #*p..__*_*# #*...__.u*# #.*..._.t*# #*...**_**# #*..***.**# #*.**....p# ########### message 14/20: Friendly Fire (14/20 -- corridor toggle triggers left-wall gun ) 12######### #*********# #*********# #g*8...pl*# #*********# #7********# #...***...# #......p.t# #....*.*..# #.ut......# ########### message 15/20: Interference 123######## #**..*..**# #*.......*# #....p...*# #t......**# #r.**..**g# #...*...**# #..uup..**# #*.......*# #**tt...**# ########### message 16/20: Machine guns 1########## #*********# #p..*g****# #....*****# #..*******# #..**.*.**# #***......# #***.p....# #....t.m..# #_........# ########### message 17/20: Trapped (17/20 -- top toggle triggers magma) 123######## #p**...n*g# #*****..*_# #******.**# #***..t*.*# #*7_*.....# #8.x*....l# #...xp...x# #...u*.._t# #*..t*...x# ########### message 18/20: Crossfire (18/20 -- modified to be more difficult) 12345###### #_g.*_****# #____**...# #.....*...# #rx.***.x.# #t..*.*...# #.px..*.pl# #o.**.*x.*# #t...*.x.t# #.xtm*mtx.# ########### message 19/20: Stylite (19/20) 1########## #*********# #..*t***x*# #p...*****# #.r..*g***# #.*_____*_# #**_...___# #*__p..___# #*x_...__*# #_*_______# ########### message 20/20: Spinal Cannon (20/20 -- inverted so I don't have to make an upwards magma gun) 1########## #p.**g*_.p# #....**x..# #_*.._..**# #.*..*...*# #..*.x....# #_x__*.._.# #*.x_*x.._# #*x..***..# #*_.tm.*..# ########### (finale -- pushes gold into pit, gold gets smashed, eyes bug out) ########### #*.......*# #....p....# #._....._.# #_...*..._# #_..._..._# #__._g_.__# #_________# #_________# #*_______*# ########### message Congratulations! (Credits Code: Yotam Frid Art: Mati & Itamar Ernst Music: Jason Lord www.lonebot.net Ludam Dare 28) (blank level template() ########### #.........# #.........# #.........# #.........# #.........# #.........# #.........# #.........# #.........# ########### ) `
And That's it! You have successfully embedded an accessible PuzzleScript videogame into a website