https://github.com/chr15m/roguelike-celebration-2021
Talk: Building Juicy Minimal Roguelikes in the Browser
https://github.com/chr15m/roguelike-celebration-2021
game-development roguelike web-development webapp
Last synced: about 1 month ago
JSON representation
Talk: Building Juicy Minimal Roguelikes in the Browser
- Host: GitHub
- URL: https://github.com/chr15m/roguelike-celebration-2021
- Owner: chr15m
- Created: 2021-10-16T12:55:15.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2021-10-29T01:52:47.000Z (over 3 years ago)
- Last Synced: 2025-02-12T14:14:15.541Z (3 months ago)
- Topics: game-development, roguelike, web-development, webapp
- Language: HTML
- Homepage:
- Size: 12.2 MB
- Stars: 14
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Building Juicy Minimal Roguelikes in the Browser
A talk by [Chris McCormick](https://mccormick.cx) ([@mccrmx](https://twitter.com/mccrmx)) for Roguelike Celebration 2021.
[Get the slides](./building-juicy-minimal-roguelikes-in-the-browser.odp).
[Watch the talk on YouTube](https://www.youtube.com/watch?v=dJbUmDsyJRw).
## Resources
* [Slingcode.net online web app editor](https://slingcode.net)
### ROT.js
* [ROT.js Roguelike Toolkit in JavaScript](http://ondras.github.io/rot.js/hp/)
Use it in your HTML like this:
```html
```
* [ROT.js tutorial on RogueBasin](http://roguebasin.com/?title=Rot.js_tutorial)
* [ROT.js tutorial result](https://jsfiddle.net/rotjs/qRnFY/)
* [ROT.js tilemap example](http://jsfiddle.net/vqy1Lgnx/1/)
### The working demo code from my presentation
* [index.html](./index.html) (Micro-rogue tilemap.png is by [Kenney.nl](https://kenney.nl/)).
### Further documentation
* [ROT.js page on RogueBasin](http://roguebasin.com/?title=Rot.js)
* [ROT.js interactive manual](https://ondras.github.io/rot.js/manual/)
### My games etc.
* [Asterogue](https://asterogue.space) (Android and Windows)
* [Smallest Quest](https://thepunkcollective.itch.io/smallest-quest) (Windows, Mac, Linux)
* [Roguelike Browser Boilerplate](https://chr15m.itch.io/roguelike-browser-boilerplate)
* [The Punk Collective](https://thepunkcollective.com/)
## Code modifications
Here are the changes I made during the talk to turn Ondřej's jsfiddle demos into a standalone web app in [index.html](./index.html).
Adding the script tag:
```html
```
Added a border to the canvas:
```css
canvas { border: 1px solid silver; }
```
Implementing a tile set:
```javascript
var tileSet = document.createElement("img");
tileSet.src = "tilemap.png";
var options = {
layout: "tile",
bg: "transparent",
tileWidth: 40,
tileHeight: 40,
tileSet: tileSet,
tileMap: {
"@": [4, 0],
".": [4, 4],
"P": [11, 0],
"*": [9, 3],
},
width: 18,
height: 20,
}
Object.keys(options.tileMap).forEach(function(k) {
options.tileMap[k][0] *= options.tileWidth;
options.tileMap[k][1] *= options.tileHeight;
})
this.display = new ROT.Display(options);
var digger = new ROT.Map.Digger(options.width, options.height);
tileSet.onload = function() {
Game.init();
}
```
Adding an overlayed text with a font from Google Web Fonts:
```html
Hit points: 5
```
The CSS to get the fonts working:
```css
body { font-family: 'Press Start 2P', cursive; text-align: center; }
p { position: absolute; top: 36px; margin: auto; text-align: center; width: 100%; display: block; }
```
Adding an overlaid box:
```html
```
```css
div {
position: absolute; top: 100px; left: 100px; border: 1px solid red;
}
```
Inside the Player's draw method to make the box follow the player:
```javascript
s = box.style;
s.width = options.tileWidth + "px";
s.height = options.tileHeight + "px";
c = document.querySelector("canvas");
cleft = (c.offsetLeft - c.scrollLeft + c.clientLeft);
ctop = (c.offsetTop - c.scrollTop + c.clientTop);
s.left = (this._x * options.tileWidth + cleft) + "px";
s.top = (this._y * options.tileHeight + ctop) + "px";
```
Adding a basic onclick handler to the box:
```javascript
box.onclick = function(ev) {
alert(ev.clientX + ", " + ev.clientY);
}
```