├── .gitignore ├── docs ├── README.md ├── bg.png ├── icon.png ├── colored_tilemap_packed.png └── index.html ├── bg.png ├── hero.png ├── icon.png ├── 01coin.gif ├── header.png ├── doc ├── title.png ├── tilemap-large.png ├── infinitelivesLogo.png ├── sfxr-copy-button.png └── blips.svg ├── screenshots ├── PDF.png ├── dead.png ├── game-1.png ├── game-2.png ├── iphone.gif ├── title.png ├── inventory.png ├── itch-embed.png ├── large-1-bit-tiles.png ├── large-default-tiles.png ├── roguelike-celebration-video-thumbnail.png └── PDF.svg ├── colored_tilemap_packed.png ├── slingcode-unpack ├── private-coaching.md ├── old-licenses ├── license-student-hobbyist.md ├── license-indie-professional.md └── license-common.md ├── LICENSE.txt ├── compile.js ├── Makefile ├── print.css ├── README.md ├── index.html ├── style.css ├── Documentation.md └── main.js /.gitignore: -------------------------------------------------------------------------------- 1 | .*.swp 2 | *.pdf 3 | *.zip 4 | node_modules 5 | build 6 | -------------------------------------------------------------------------------- /docs/README.md: -------------------------------------------------------------------------------- 1 | This folder has to be called docs because gh-pages. 2 | -------------------------------------------------------------------------------- /bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chr15m/roguelike-browser-boilerplate/HEAD/bg.png -------------------------------------------------------------------------------- /hero.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chr15m/roguelike-browser-boilerplate/HEAD/hero.png -------------------------------------------------------------------------------- /icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chr15m/roguelike-browser-boilerplate/HEAD/icon.png -------------------------------------------------------------------------------- /01coin.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chr15m/roguelike-browser-boilerplate/HEAD/01coin.gif -------------------------------------------------------------------------------- /header.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chr15m/roguelike-browser-boilerplate/HEAD/header.png -------------------------------------------------------------------------------- /doc/title.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chr15m/roguelike-browser-boilerplate/HEAD/doc/title.png -------------------------------------------------------------------------------- /docs/bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chr15m/roguelike-browser-boilerplate/HEAD/docs/bg.png -------------------------------------------------------------------------------- /docs/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chr15m/roguelike-browser-boilerplate/HEAD/docs/icon.png -------------------------------------------------------------------------------- /screenshots/PDF.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chr15m/roguelike-browser-boilerplate/HEAD/screenshots/PDF.png -------------------------------------------------------------------------------- /screenshots/dead.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chr15m/roguelike-browser-boilerplate/HEAD/screenshots/dead.png -------------------------------------------------------------------------------- /doc/tilemap-large.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chr15m/roguelike-browser-boilerplate/HEAD/doc/tilemap-large.png -------------------------------------------------------------------------------- /screenshots/game-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chr15m/roguelike-browser-boilerplate/HEAD/screenshots/game-1.png -------------------------------------------------------------------------------- /screenshots/game-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chr15m/roguelike-browser-boilerplate/HEAD/screenshots/game-2.png -------------------------------------------------------------------------------- /screenshots/iphone.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chr15m/roguelike-browser-boilerplate/HEAD/screenshots/iphone.gif -------------------------------------------------------------------------------- /screenshots/title.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chr15m/roguelike-browser-boilerplate/HEAD/screenshots/title.png -------------------------------------------------------------------------------- /doc/infinitelivesLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chr15m/roguelike-browser-boilerplate/HEAD/doc/infinitelivesLogo.png -------------------------------------------------------------------------------- /doc/sfxr-copy-button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chr15m/roguelike-browser-boilerplate/HEAD/doc/sfxr-copy-button.png -------------------------------------------------------------------------------- /screenshots/inventory.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chr15m/roguelike-browser-boilerplate/HEAD/screenshots/inventory.png -------------------------------------------------------------------------------- /colored_tilemap_packed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chr15m/roguelike-browser-boilerplate/HEAD/colored_tilemap_packed.png -------------------------------------------------------------------------------- /screenshots/itch-embed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chr15m/roguelike-browser-boilerplate/HEAD/screenshots/itch-embed.png -------------------------------------------------------------------------------- /docs/colored_tilemap_packed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chr15m/roguelike-browser-boilerplate/HEAD/docs/colored_tilemap_packed.png -------------------------------------------------------------------------------- /screenshots/large-1-bit-tiles.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chr15m/roguelike-browser-boilerplate/HEAD/screenshots/large-1-bit-tiles.png -------------------------------------------------------------------------------- /screenshots/large-default-tiles.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chr15m/roguelike-browser-boilerplate/HEAD/screenshots/large-default-tiles.png -------------------------------------------------------------------------------- /screenshots/roguelike-celebration-video-thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chr15m/roguelike-browser-boilerplate/HEAD/screenshots/roguelike-celebration-video-thumbnail.png -------------------------------------------------------------------------------- /slingcode-unpack: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | set -e 3 | 4 | mv ~/Downloads/roguelike-browser-boilerplate.zip . 5 | unzip -oj roguelike-browser-boilerplate.zip 6 | rm roguelike-browser-boilerplate.zip 7 | -------------------------------------------------------------------------------- /private-coaching.md: -------------------------------------------------------------------------------- 1 | #### Private Video Coaching 2 | 3 | Thanks for purchasing the PRO tier of Roguelike Browser Boilerplate! 4 | 5 | This document entitles you to 1 hour of private video coaching. 6 | 7 | Email me at [chris+rogue@mccormick.cx](mailto:chris+rogue@mccormick.cx) or find me on [the Infinite Lives Discord](https://discord.gg/XgVEJtC) to set up a time. 8 | 9 | ![](./01coin.gif) 10 | -------------------------------------------------------------------------------- /doc/blips.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /old-licenses/license-student-hobbyist.md: -------------------------------------------------------------------------------- 1 | ## Student / Hobbyist License 2 | 3 | * You may use this boilerplate as the basis of **non-commercial projects**. 4 | * You may modify this boilerplate to suit your needs. 5 | * You may not redistribute this boilerplate without reasonable modifications that make it a new work. 6 | * You do not have to give credit but it is appreciated. 7 | * If a third party wishes to use this boilerplate please ask them to purchase a copy. 8 | 9 | -------------------------------------------------------------------------------- /old-licenses/license-indie-professional.md: -------------------------------------------------------------------------------- 1 | ## Indie / Professional Tier License 2 | 3 | * **You may use this boilerplate as the basis of commercial projects**. 4 | * You may modify this boilerplate to suit your needs. 5 | * You may not redistribute this boilerplate without reasonable modifications that make it a new work. 6 | * You do not have to give credit but it is appreciated. 7 | * If a third party wishes to use this boilerplate please ask them to purchase a copy. 8 | 9 | The clauses in this license override those of the student/hobbyist license. 10 | -------------------------------------------------------------------------------- /LICENSE.txt: -------------------------------------------------------------------------------- 1 | Copyright © 2020-2023 Chris McCormick. 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 4 | 5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 6 | 7 | THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 8 | -------------------------------------------------------------------------------- /old-licenses/license-common.md: -------------------------------------------------------------------------------- 1 | # License 2 | 3 | Roguelike Browser Boilerplate is Copyright Chris McCormick 2020. 4 | 5 | > All rights reserved, including the 6 | > right to reproduce the boilerplate or 7 | > portions thereof in any form 8 | > whatsoever, except where portions or the whole 9 | > are covered by the additional permissions below. 10 | > For information, or permission requests, 11 | > write to the author at chris+rogue@mccormick.cx 12 | 13 | If you want to cite this work or give credit, please link to the Itch.io website: 14 | 15 | 16 | 17 | ## Third party properties 18 | 19 | The following third party properties are also bundled or linked with the boilerplate and are governed by their own licenses: 20 | 21 | * [ROT.js](https://ondras.github.io/rot.js/hp/) (BSD license) 22 | * [kenney.nl Micro Rogue tileset](https://kenney.nl/assets/micro-roguelike) (CC0 1.0 Universal license) 23 | * [NES.css](https://nostalgic-css.github.io/NES.css/) (MIT License) 24 | * [sfxr.me](https://sfxr.me) (Public domain) 25 | * [Pixel coin image](https://opengameart.org/content/spinning-pixel-coin-0) (CC-BY 3.0 license) 26 | 27 | -------------------------------------------------------------------------------- /compile.js: -------------------------------------------------------------------------------- 1 | const readFileSync = require('fs').readFileSync; 2 | const jsdom = require("jsdom"); 3 | const minify = require('minify'); 4 | const htmlminify = require('minify').html; 5 | const { JSDOM } = jsdom; 6 | const dom = new JSDOM(readFileSync("index.html")); 7 | const document = dom.window.document; 8 | 9 | const linkouthtmlfragment = ` 10 | Get this boilerplate
to make your own game! 11 | `; 12 | 13 | const linkoutstylefragment = ` 14 | #link-out { 15 | position: absolute; 16 | bottom: 3em; 17 | border-radius: 10px; 18 | padding: 0px; 19 | font-size: .66em; 20 | text-decoration: underline; 21 | text-align: center; 22 | } 23 | `; 24 | 25 | (async function() { 26 | const jsmin = await minify('main.js').catch(console.error); 27 | const stylemin = await minify('style.css') + linkoutstylefragment; 28 | const elementscript = document.querySelector("script#main") 29 | const elementstyle = document.querySelector("link#style"); 30 | const elementtitlescreen = document.querySelector("div#title"); 31 | elementtitlescreen.innerHTML += linkouthtmlfragment; 32 | const stylenode = document.createElement("style"); 33 | stylenode.textContent = stylemin; 34 | elementstyle.after(stylenode); 35 | elementstyle.parentNode.removeChild(elementstyle); 36 | elementscript.removeAttribute("src"); 37 | elementscript.textContent = jsmin; 38 | console.log(htmlminify(dom.serialize(), {html: { 39 | removeAttributeQuotes: false, 40 | removeOptionalTags: false 41 | }})); 42 | })(); 43 | -------------------------------------------------------------------------------- /Makefile: -------------------------------------------------------------------------------- 1 | name=roguelike-browser-boilerplate 2 | 3 | all: $(name).zip $(name)-private-coaching.pdf $(name).pdf # $(name)-license.pdf 4 | 5 | $(name).zip: index.html main.js style.css icon.png colored_tilemap_packed.png 01coin.gif bg.png LICENSE.txt 6 | mkdir -p $(name) 7 | cp $? $(name) 8 | zip -r $@ $(foreach f, $?, "$(name)/$(f)") 9 | rm -rf $(name) 10 | 11 | #$(name)-documents.zip: $(name).pdf $(name)-license-indie-professional.pdf 12 | # mkdir -p $(name)-documents 13 | # cp $? $(name)-documents 14 | # zip -r $@ $(foreach f, $?, "$(name)-documents/$(f)") 15 | # rm -rf $(name)-documents 16 | 17 | $(name)-private-coaching.pdf: private-coaching.md print.css Makefile 18 | pandoc -f markdown --highlight-style=tango --css print.css $< -o "$(@:.pdf=.html)" 19 | chromium-browser --headless --disable-gpu --run-all-compositor-stages-before-draw --print-to-pdf-no-header --print-to-pdf="$@" "$(@:.pdf=.html)" --virtual-time-budget=10000 20 | rm -f "$(@:.pdf=.html)" 21 | 22 | $(name).pdf: Documentation.md print.css Makefile 23 | pandoc -f markdown --highlight-style=tango --css print.css $< -o "$(@:.pdf=.html)" 24 | chromium-browser --headless --disable-gpu --run-all-compositor-stages-before-draw --print-to-pdf-no-header --print-to-pdf="$@" "$(@:.pdf=.html)" --virtual-time-budget=10000 25 | rm -f "$(@:.pdf=.html)" 26 | 27 | #$(name)-license-student-hobbyist.pdf: license-common.md license-student-hobbyist.md 28 | # cat $? | pandoc -f markdown -t latex --highlight-style=tango --css print.css -o $@ 29 | 30 | #$(name)-license.pdf: license-common.md license-indie-professional.md 31 | # cat $? | pandoc -f markdown -t latex --highlight-style=tango --css print.css -o $@ 32 | 33 | ### gh-pages build ### 34 | 35 | docs: docs/index.html docs/icon.png docs/colored_tilemap_packed.png docs/bg.png 36 | 37 | docs/%.png: %.png 38 | mkdir -p docs 39 | cp $< $@ 40 | 41 | docs/index.html: index.html style.css main.js compile.js 42 | mkdir -p docs 43 | node compile.js > $@ 44 | 45 | .PHONY: watch serve browserstack clean 46 | 47 | watcher: 48 | while true; do $(MAKE) -q || $(MAKE); sleep 0.5; done 49 | 50 | serve: node_modules 51 | npx live-server --no-browser --host=0.0.0.0 --port=8000 52 | 53 | watch: 54 | make -j 2 serve watcher 55 | 56 | browserstack: 57 | BrowserStackLocal --key 9pLHVRg5npQmv96R5QEx 58 | 59 | clean: 60 | rm -rf roguelike-browser-boilerplate* 61 | -------------------------------------------------------------------------------- /print.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P'); 2 | @import url('https://fonts.googleapis.com/css2?family=Cutive+Mono&display=swap'); 3 | 4 | * { 5 | box-sizing: border-box; 6 | } 7 | 8 | html { 9 | min-height: 100%; 10 | } 11 | 12 | @media print { 13 | @page { 14 | margin-top: 2cm; 15 | margin-bottom: 2cm; 16 | } 17 | } 18 | 19 | body { 20 | margin: 1.6cm 0cm; 21 | margin: 1cm; 22 | font-family: 'Cutive Mono', monospace; 23 | font-weight: bold; 24 | background-color: #232222; 25 | background-color: #fff; 26 | color: #eee; 27 | color: #666; 28 | height: 100%; 29 | line-height: 1.5em; 30 | padding: 3em; 31 | -webkit-print-color-adjust: exact; 32 | font-size: 1.25em; 33 | } 34 | 35 | code { 36 | color: #5f5; 37 | color: #3a3; 38 | background-color: #fff; 39 | } 40 | 41 | a { 42 | color: #d66; 43 | text-decoration: none; 44 | font-size: 0.9em; 45 | } 46 | 47 | img { 48 | display: block; 49 | margin: 2em auto; 50 | max-width: 100%; 51 | border-radius: 10px; 52 | } 53 | 54 | h1, h2, h3 { 55 | font-family: 'Press Start 2P', cursive; 56 | margin-top: 3em; 57 | page-break-after: avoid; 58 | color: #fff; 59 | color: #333; 60 | } 61 | 62 | h4 { 63 | font-family: 'Press Start 2P', cursive; 64 | color: #333; 65 | } 66 | 67 | h2, h3 { 68 | page-break-before: always; 69 | } 70 | 71 | h3 { 72 | font-size: 16px; 73 | } 74 | 75 | p, h1, h2, h3, li { 76 | orphans: 5; 77 | widows: 5; 78 | page-break-after: avoid; 79 | } 80 | 81 | blockquote { 82 | max-width: 100%; 83 | padding-right: 1em; 84 | page-break-inside: avoid; 85 | border-radius: 10px; 86 | background-color: #333232; 87 | padding: 1em 2em; 88 | background-color: #e2e0e0; 89 | color: #333; 90 | margin-left: 0px; 91 | width: 100%; 92 | } 93 | 94 | tr, img { 95 | page-break-inside: avoid; 96 | } 97 | 98 | li { 99 | /*margin-top: 1em;*/ 100 | } 101 | 102 | div.sourceCode::before { 103 | content: url(doc/blips.svg); 104 | display: block; 105 | margin-bottom: 1em; 106 | margin-top: 0.5em; 107 | margin-left: 0.5em; 108 | } 109 | 110 | div.sourceCode { 111 | background-color: #f8f8f8; 112 | border: 2px solid #aeaeae; 113 | border-radius: 10px; 114 | margin: 2em 0px; 115 | page-break-inside: avoid; 116 | overflow-x: hidden; 117 | } 118 | 119 | div.sourceCode code { 120 | background-color: #f8f8f8; 121 | } 122 | 123 | div.sourceCode td.sourceCode { 124 | width: 100%; 125 | } 126 | 127 | div.sourceCode td.lineNumbers pre { 128 | } 129 | 130 | div.sourceCode td { 131 | line-height: 1.25em; 132 | } 133 | 134 | /*.numberLines pre { 135 | border: 0px; 136 | margin: 0px; 137 | padding: 0px; 138 | margin-right: -2em; 139 | } 140 | 141 | .numberLines pre::before*/ 142 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![Rogulike Browser Boilerplate header](header.png) 2 | 3 | # Hello! 4 | 5 | Roguelike Browser Boilerplate helps you get your web based roguelike up and running fast. 6 | 7 | The boilerplate takes care of the boring stuff so you can focus on the fun part: making the game. 8 | It includes **level generation, rooms, scenery, item boxes, inventory, an example monster implementation, splash screen, start screen, credits screen, instructions screen, settings screen, menus, pixel styled UI, win/lose condition screens, sound effects, juicy CSS game animations**. It works on **mobile and desktop** with a custom touch-screen interface. 9 | 10 | Roguelike Browser Boilerplate is fully open source and **MIT licensed**. 11 | 12 | Yes, that means **you can use it for commercial projects**, no problem. 13 | 14 | # [Play the demo game](https://chr15m.github.io/roguelike-browser-boilerplate/) 15 | 16 | # Documentation 17 | 18 | Check out the [documentation](./Documentation.md) for detailed instructions on **getting started** and how to customise the boilerplate. 19 | 20 | # Video tutorials 21 | 22 | You can check out this [YouTube playlist of tutorial screencasts explaining how to use the boilerplate](https://www.youtube.com/playlist?list=PL5dyN9XHelZOl2yTZQu9IA4SQFcA3giac) to make your own Roguelike game in a step-by-step way. Here's a list of the episodes included: 23 | 24 | ### Episodes 25 | 26 | - [Introduction](https://www.youtube.com/watch?v=28dvHfd4fIU&list=PL5dyN9XHelZOl2yTZQu9IA4SQFcA3giac&index=2&t=0s) 27 | - [A first look at the default game](https://www.youtube.com/watch?v=d1zhoXwOdtQ&list=PL5dyN9XHelZOl2yTZQu9IA4SQFcA3giac&index=3&t=0s) 28 | - [Customising the title and user interface](https://www.youtube.com/watch?v=U4rfM3ksF9c&list=PL5dyN9XHelZOl2yTZQu9IA4SQFcA3giac&index=4&t=0s) 29 | - [Customising the graphics and tileset](https://www.youtube.com/watch?v=kto78PSTMkw&list=PL5dyN9XHelZOl2yTZQu9IA4SQFcA3giac&index=5&t=0s) 30 | - [Adding 8-bit sound effects](https://www.youtube.com/watch?v=JYr7LkKlzK0&list=PL5dyN9XHelZOl2yTZQu9IA4SQFcA3giac&index=5) 31 | - [Making your own maps](https://www.youtube.com/watch?v=m62UM2SRHUA&list=PL5dyN9XHelZOl2yTZQu9IA4SQFcA3giac&index=6) 32 | 33 | # How to support RBB 34 | 35 | Buy the [itch.io zip file package of the boilerplate](https://chr15m.itch.io/roguelike-browser-boilerplate): 36 | 37 | [![Roguelike Browser Boilerplate itch page](./screenshots/itch-embed.png)](https://chr15m.itch.io/roguelike-browser-boilerplate) 38 | 39 | The [itch.io package](https://chr15m.itch.io/roguelike-browser-boilerplatae) also comes with a nice 47 page PDF guide: 40 | 41 | [](https://chr15m.itch.io/roguelike-browser-boilerplate) 42 | 43 | ## Contributing 44 | 45 | If you improve RBB and you want to contribute your fix or feature just open a PR. 46 | I'll merge clean, modular PRs that fix one thing per commit in a way that is easy to read and test. 47 | Thanks! 48 | 49 | # Games made with RBB 50 | 51 | [Asterogue, a sci fi roguelike](https://asterogue.space) set in the interior caverns of an asteroid. 52 | 53 | [](https://chr15m.itch.io/asterogue) 54 | 55 | [Smallest Quest](https://thepunkcollective.itch.io/smallest-quest) is a simple kid-friendly hand drawn roguelike. 56 | 57 | [](https://thepunkcollective.itch.io/smallest-quest) 58 | 59 | To get your game listed here just send me a PR. 60 | 61 | # Roguelike Celebration talk 62 | 63 | [Building Juicy Minimal Roguelikes in the Browser](https://www.youtube.com/watch?v=dJbUmDsyJRw). 64 | 65 | [![Roguelike Celebration Video thumbnail](./screenshots/roguelike-celebration-video-thumbnail.png)](https://www.youtube.com/watch?v=dJbUmDsyJRw) 66 | 67 | # Credits 68 | 69 | The following third party properties are used in the boilerplate: 70 | 71 | * [ROT.js](https://ondras.github.io/rot.js/hp/) (BSD license) 72 | * [kenney.nl Micro Rogue tileset](https://kenney.nl/assets/micro-roguelike) (CC0 1.0 Universal license) 73 | * [NES.css](https://nostalgic-css.github.io/NES.css/) (MIT License) 74 | * [sfxr.me](https://sfxr.me) (Public domain) 75 | * [Pixel coin image](https://opengameart.org/content/spinning-pixel-coin-0) (CC-BY 3.0 license) 76 | 77 | # Thanks! 78 | 79 | Thanks for checking out RBB. I hope you find it useful. 80 | 81 | Sign up to my newsletter at to find out when I make new stuff. 82 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Roguelike Browser Boilerplate 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 |
21 | 22 |

Roguelike
Browser
Boilerplate

23 |
24 |
25 | 26 | 27 |
28 |
29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | Roguelike 37 | 38 | 39 | 40 | 41 | Roguelike 42 | 43 | 44 | 45 |
46 |
47 | 73 |
74 | 75 |
76 | 77 | 78 | 85 | 86 | 87 | 114 | 115 | 116 | 124 | 125 | 126 | 135 | 136 | 137 | 147 | 148 | 149 |
150 |
151 |
152 |
153 |
154 |
155 |

Example inventory

156 |
    157 | X 158 |
    159 | i 160 |
    161 |
    162 |
    <
    163 |
    <
    164 |
    >
    165 |
    >
    166 |
    .
    167 |
    168 |
    169 | 170 | 171 | 172 | 173 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P'); 2 | 3 | /* if you have a longer title 4 | * make the font size smaller */ 5 | .game-title-text { 6 | font-size: 64px; 7 | } 8 | 9 | * { 10 | box-sizing: border-box; 11 | touch-action: manipulation; 12 | user-select: none; 13 | -webkit-user-select: none; 14 | -webkit-touch-callout: none; 15 | } 16 | 17 | html { 18 | height: 100%; 19 | overflow: hidden; 20 | } 21 | 22 | body { 23 | font-family: 'Press Start 2P', cursive; 24 | width: 100%; 25 | height: 100%; 26 | margin: 0px auto; 27 | font-size: 1.5em; 28 | background-color: #222323; 29 | color: #eee; 30 | } 31 | 32 | @media (max-width: 700px), (max-height: 820px) { 33 | body { 34 | font-size: 0.75em; 35 | } 36 | } 37 | 38 | canvas { 39 | image-rendering: optimizeSpeed; 40 | image-rendering: crisp-edges; 41 | image-rendering: -moz-crisp-edges; 42 | image-rendering: -o-crisp-edges; 43 | image-rendering: -webkit-optimize-contrast; 44 | -ms-interpolation-mode: nearest-neighbor; 45 | image-rendering: pixelated; 46 | } 47 | 48 | a { 49 | color: #e77; 50 | } 51 | 52 | a:hover { 53 | color: #faa; 54 | text-decoration: none; 55 | } 56 | 57 | /*** NES.css overrides ***/ 58 | 59 | .nes-container.is-rounded.is-dark { 60 | border-image-slice: 9 9 9 9 fill; 61 | border-image-source: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAphgAAKYYBIuzfjAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABgSURBVEiJY2AYBQQAIzGK/v///x+rZkZGgvqZSHURqYDmFrDgkkAOFikpZYJqcAXX0A8iFG8REyy4wLNndxGGIgXX0A+iUQsIApxlCTEpClfKQQbDOIiQwcgurkcBQQAARlMedugABy8AAAAASUVORK5CYII='); 62 | background-color: transparent; 63 | border-image-repeat: stretch; 64 | } 65 | 66 | .nes-container.is-fake-rounded.is-dark::after { 67 | background: none; 68 | } 69 | 70 | /*** screens ***/ 71 | 72 | .screen { 73 | height: 100%; 74 | width: 100%; 75 | display: none; 76 | flex-direction: column; 77 | position: absolute; 78 | justify-content: center; 79 | align-items: center; 80 | } 81 | 82 | .modal { 83 | position: absolute; 84 | top: 0px; 85 | left: 0px; 86 | bottom: 0px; 87 | right: 0px; 88 | width: 100%; 89 | height: 100%; 90 | background-color: #222323; 91 | } 92 | 93 | #title { 94 | background-image: url(bg.png); 95 | background-size: cover; 96 | animation: 20s para infinite ease; 97 | } 98 | 99 | @keyframes para { 100 | 0% { 101 | background-position: 0px 0%; 102 | } 103 | 50% { 104 | background-position: 0px 80px; 105 | } 106 | 100% { 107 | background-position: 0px 0px; 108 | } 109 | } 110 | 111 | #plate { 112 | display: flex; 113 | animation: 2s plate-fade; 114 | opacity: 0; 115 | } 116 | 117 | #plate > div { 118 | display: flex; 119 | justify-content: center; 120 | align-items: center; 121 | text-align: left; 122 | padding: 40px; 123 | border-radius: 5px; 124 | } 125 | 126 | @keyframes plate-fade { 127 | 0% { 128 | opacity: 0; 129 | } 130 | 25% { 131 | opacity: 0; 132 | } 133 | 50% { 134 | opacity: 1; 135 | } 136 | 75% { 137 | opacity: 1; 138 | } 139 | 100% { 140 | opacity: 0; 141 | } 142 | } 143 | 144 | #plate > div > * + * { 145 | margin-left: 32px; 146 | margin-right: 0px; 147 | } 148 | 149 | @media (max-width: 700px), (max-height: 820px) { 150 | #plate > div { 151 | flex-direction: column; 152 | text-align: center; 153 | } 154 | 155 | #plate > div > * + * { 156 | margin-left: 0px; 157 | margin-right: 0px; 158 | margin-top: 16px; 159 | } 160 | } 161 | 162 | #game-title { 163 | margin-bottom: 0px; 164 | width: 900px; 165 | max-width: 98%; 166 | } 167 | 168 | @media (min-width: 700px) and (max-height: 820px) { 169 | #game-title { 170 | width: 900px; 171 | max-width: 98%; 172 | max-height: 35vh; 173 | } 174 | } 175 | 176 | @media (max-height: 600px) { 177 | #game-title { 178 | width: 500px; 179 | } 180 | } 181 | 182 | .game-title-animation { 183 | animation: 2s zoomInDown; 184 | } 185 | 186 | /* https://github.com/animate-css/animate.css/blob/master/animate.css */ 187 | @keyframes zoomInDown { 188 | 0% { 189 | opacity: 0; 190 | transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); 191 | animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 192 | } 193 | 194 | 60% { 195 | opacity: 1; 196 | transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); 197 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); 198 | } 199 | } 200 | 201 | #options { 202 | text-align: center; 203 | justify-content: center; 204 | max-width: 90%; 205 | } 206 | 207 | #logo { 208 | width: 100px; 209 | } 210 | 211 | #menu { 212 | width: 400px; 213 | max-width: 100%; 214 | margin-bottom: 64px; 215 | padding: 32px; 216 | } 217 | 218 | #menu label { 219 | margin-left: -1em; 220 | padding-top: 0.5em; 221 | padding-bottom: 0.5em; 222 | } 223 | 224 | .modal > * { 225 | max-width: 90%; 226 | width: 400px; 227 | margin: 50px; 228 | text-align: center; 229 | } 230 | 231 | @media (max-width: 700px), (max-height: 820px) { 232 | .modal > * { 233 | margin: 10px; 234 | } 235 | } 236 | 237 | #instructions div > p { 238 | text-align: left; 239 | } 240 | 241 | #settings div > p { 242 | text-align: left; 243 | } 244 | 245 | /* credits page interface */ 246 | 247 | #credits ul { 248 | list-style: "> "; 249 | padding-left: 2em; 250 | text-align: left; 251 | } 252 | 253 | #credits ul li { 254 | margin: 0.5em 0px; 255 | } 256 | 257 | .sprite { 258 | display: block; 259 | width: 8px; 260 | height: 8px; 261 | image-rendering: optimizeSpeed; 262 | image-rendering: crisp-edges; 263 | image-rendering: -moz-crisp-edges; 264 | image-rendering: -o-crisp-edges; 265 | image-rendering: -webkit-optimize-contrast; 266 | -ms-interpolation-mode: nearest-neighbor; 267 | image-rendering: pixelated; 268 | transform: scale(8); 269 | background-image: url("colored_tilemap_packed.png"); 270 | margin: 80px auto; 271 | } 272 | 273 | .free { 274 | position: absolute; 275 | transform: none; 276 | } 277 | 278 | .amulet { 279 | background-position: -0px -64px; 280 | } 281 | 282 | .tomb { 283 | background-position: -72px -56px; 284 | } 285 | 286 | .ghost { 287 | background-position: -72px -8px; 288 | margin: 0px; 289 | } 290 | 291 | .empty { 292 | background-position: -8px -48px; 293 | } 294 | 295 | .float-up { 296 | animation: float-up 2s linear forwards; 297 | } 298 | 299 | @keyframes float-up { 300 | from { 301 | transform: scale(1) translate(0px, 0px); 302 | opacity: 1; 303 | } 304 | to { 305 | transform: scale(3) translate(0px, -20px); 306 | opacity: 0; 307 | } 308 | } 309 | 310 | .grow-fade { 311 | animation: grow-fade 2s linear; 312 | } 313 | 314 | @keyframes grow-fade { 315 | from { 316 | transform: translate(0px, 0px) scale(8); 317 | opacity: 0.5; 318 | } 319 | to { 320 | transform: translate(0px, 0px) scale(16); 321 | opacity: 0; 322 | } 323 | } 324 | 325 | #play { 326 | width: 400px; 327 | max-width: 90%; 328 | } 329 | 330 | #win { 331 | background: url(01coin.gif); 332 | background-size: 20%; 333 | } 334 | 335 | /*** HUD ***/ 336 | 337 | #hud { 338 | position: absolute; 339 | bottom: 0px; 340 | width: 600px; 341 | max-width: 100%; 342 | display: flex; 343 | justify-content: space-evenly; 344 | padding: 24px; 345 | } 346 | 347 | #message { 348 | position: absolute; 349 | top: 24px; 350 | flex-direction: column; 351 | } 352 | 353 | #message .hit { 354 | color: #C01256; 355 | } 356 | 357 | #message .miss { 358 | color: #FFB570; 359 | } 360 | 361 | #inventory { 362 | position: absolute; 363 | bottom: 0px; 364 | left: 0px; 365 | } 366 | 367 | #inventory .sprite { 368 | transform: scale(3); 369 | display: inline-block; 370 | margin: 1em 2em 1em 1em; 371 | vertical-align: middle; 372 | } 373 | 374 | #inventory li { 375 | margin: 1em 0px; 376 | } 377 | 378 | #inventory ul { 379 | list-style-type: none; 380 | margin: 0px; 381 | padding: 0px; 382 | } 383 | 384 | #inventory > div { 385 | display: none; 386 | } 387 | 388 | @media (max-width: 750px) { 389 | #inventory { 390 | bottom: 72px; 391 | } 392 | 393 | #hud { 394 | width: 100%; 395 | } 396 | } 397 | 398 | #arrows { 399 | display: none; 400 | position: absolute; 401 | right: 0px; 402 | bottom: 0px; 403 | } 404 | 405 | #arrows > * { 406 | float: left; 407 | font-size: 16px; 408 | bottom: 0px; 409 | width: 60px; 410 | height: 60px; 411 | display: flex; 412 | align-items: center; 413 | justify-content: center; 414 | } 415 | 416 | #arrows > * > span { 417 | pointer-events: none; 418 | } 419 | 420 | #btn-left { 421 | position: absolute; 422 | right: 7em; 423 | } 424 | 425 | #btn-right { 426 | position: absolute; 427 | right: 0em; 428 | } 429 | 430 | #btn-up { 431 | transform: rotate(90deg); 432 | position: absolute; 433 | right: 3.5em; 434 | margin-bottom: 3.75em; 435 | } 436 | 437 | #btn-down { 438 | transform: rotate(90deg); 439 | position: absolute; 440 | right: 3.5em; 441 | } 442 | 443 | #btn-skip { 444 | position: absolute; 445 | right: 0em; 446 | margin-bottom: 3.75em; 447 | padding: 0px; 448 | } 449 | 450 | @media (max-width: 1024px) { 451 | #arrows > * { 452 | bottom: 72px; 453 | } 454 | } 455 | 456 | /*** CSS animations ***/ 457 | 458 | .fade-in { 459 | animation: fade-in 0.8s; 460 | display: flex; 461 | } 462 | 463 | @keyframes fade-in { 464 | from{opacity:0} to{opacity:1} 465 | } 466 | 467 | .hide { 468 | display: none; 469 | } 470 | 471 | .show { 472 | display: flex; 473 | } 474 | 475 | .fade-out { 476 | display: flex; 477 | opacity: 1; 478 | animation: fade-out 3s forwards; 479 | } 480 | 481 | @keyframes fade-out { 482 | from{opacity:1; display: flex;} 50%{opacity:1; display: flex;} to{opacity:0; display: none;} 483 | } 484 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | Roguelike Browser Boilerplate

    Roguelike
    Browser
    Boilerplate

    RoguelikeRoguelike
    Get this boilerplate
    to make your own game!

    Example inventory

      X
      i
      <
      <
      >
      >
      .
      2 | -------------------------------------------------------------------------------- /Documentation.md: -------------------------------------------------------------------------------- 1 | ![Rogulike Browser Boilerplate header](header.png) 2 | 3 | # Hello! 4 | 5 | Hello and thanks for purchasing the Roguelike Browser Boilerplate. Are you ready to make your roguelike? Let's get started! 6 | 7 | [chr15m.itch.io/roguelike-browser-boilerplate](https://chr15m.itch.io/roguelike-browser-boilerplate) 8 | 9 | > © 2020-2023 Chris McCormick 10 | > 11 | > Licensed under the terms of the MIT License. 12 | > See the file "LICENSE.txt" for details. 13 | 14 | ![RBB Screenshot](screenshots/game-2.png) 15 | 16 | ## Contents 17 | 18 | * [Setup](#setup) 19 | * [The Boilerplate](#the-boilerplate) 20 | * [Changing the title and icon](#changing-the-title-and-icon) 21 | * [Changing the look of the UI](#changing-the-look-of-the-ui) 22 | * [Changing the tileset graphics](#changing-the-tileset-graphics) 23 | * [Changing the sound effects](#changing-the-sound-effects) 24 | * [Changing the level generator](#changing-the-level-generator) 25 | * [Changing the player code](#changing-the-player-code) 26 | * [Changing the monster code](#changing-the-monster-code) 27 | * [Changing the items code](#changing-the-items-code) 28 | * [Using the inventory](#using-the-inventory) 29 | * [Changing the combat system](#changing-the-combat-system) 30 | * [Changing or adding new screens](#changing-or-adding-new-screens) 31 | * [Exercises](#exercises) 32 | * [Bonus: make an app](#bonus-make-an-app) 33 | * [Publish your game](#publish-your-game) 34 | * [More documentation](#more-documentation) 35 | * [Resources](#resources) 36 | * [Credits](#credits) 37 | * [Thanks](#thanks) 38 | 39 | ## Setup 40 | 41 | If you're reading this you have already figured out how to unpack the zip file. Congratulations, achievement unlocked! 42 | 43 | The next step is to open `index.html` in your browser. You can do that however you like but the easiest thing is probably just to double-click it. 44 | 45 | Once you've done that you're going to want to open `index.html`, `main.js`, and `style.css` in your text editor so you can change the code. 46 | 47 | If you don't have a text editor you can use the one at [slingcode.net](https://slingcode.net/), just upload `roguelike-browser-boilerplate.zip` in the app there and you can start editing. 48 | 49 | If you need some help, head on over to the [Roguelike Browser Boilerplate community](https://chr15m.itch.io/roguelike-browser-boilerplate/community) and ask. 50 | 51 | ## The boilerplate 52 | 53 | Let's take a look at the files in the boilerplate. 54 | 55 | * `index.html` is the standard web app front page. When you load this in your browser you will see the game start up. There are sections in this HTML file for each of the major screens the user sees: splash screen, title screen and menu, settings screen, credits screen, instructions screen, win and lose screens, and of course the in-game screen with hud, inventory, messages, and play area. You can modify this file to change the different screens. 56 | * `main.js` is where the actual Javascript game code goes. This is what drives the map generation, player and monster behaviour, and item pickups etc. You can modify this file to change the behaviour of the game itself. 57 | * `style.css` is a stylesheet specifying how things should be laid out on each screen, colors, fonts, and animations. You can modify this to change the appearance of menus and user interface elements. 58 | * `colored_tilemap_packed.png` is the tilemap containing both sprites and background tiles used in the boilerplate game. You can modify or replace this to use your own game tiles. 59 | * `icon.png`, `bg.png`, and `01coin.gif` are graphical assets used for the browser icon of the game, the background image on the first menu, and a rotating coin animation for the win screen. 60 | 61 | Take a look around at each of these files to familiarize yourself. 62 | Throughout the code in `main.js` you'll see references to [ROT.js](https://ondras.github.io/rot.js/hp/), the "ROguelike Toolkit in JavaScript". 63 | The boilerplate relies on this library heavily for rendering and to implement a bunch of typical roguelike functionality. 64 | 65 | Next up we'll look at changing stuff in these files to make the game look and work the way you want it to. 66 | 67 | One final thing to note when editing the boilerplate is that browsers sometimes cache files aggressively. If it seems like changes to your files are not "taking" then try using the key sequence `Ctrl-Shift-Refresh` (or `Cmd-Shift-Refresh` if you're on a Mac) which will ask the browser to ignore the cache. 68 | 69 | ### Changing the title and icon 70 | 71 | The first thing you can do is change the game title. There are two places to change the title. 72 | 73 | First there is the title tag at the top of the `index.html` file. This is the standard page title attribute from HTML. 74 | 75 | ``` {.html .numberLines startFrom="4"} 76 | Roguelike Browser Boilerplate 77 | ``` 78 | 79 | Next there is the title that appears at the start of the game: 80 | 81 | ![](./doc/title.png) 82 | 83 | You can change the text of this title right at the top of the `main.js`: 84 | 85 | ``` {.javascript .numberLines startFrom="3"} 86 | // Update this string to set the game title 87 | const gametitle = "My Rogue"; 88 | ``` 89 | 90 | If your game has a longer title you might find that some letters disappear off the screen. 91 | You can accommodate a longer title by changing the font size of the title at the top of `style.css`: 92 | 93 | ``` {.css .numberLines startFrom="5"} 94 | .game-title-text { 95 | font-size: 64px; 96 | } 97 | ``` 98 | 99 | The title is created with an inline SVG which you can change any way you like, or even replace it with an image. You can find the start of the SVG on line `30` of the `index.html` file: 100 | 101 | ``` {.xml .numberLines startFrom="30"} 102 | 103 | 104 | ``` 105 | 106 | After modifying the code, refresh the game page in your browser to see the changes. 107 | 108 | The icon for your game is defined at the top of `index.html`: 109 | 110 | ``` {.html .numberLines startFrom="9"} 111 |