blob: 026a6f0e84a9cd445886c2dc83212d493d6bb431 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
|
<!DOCTYPE html>
<html>
<head>
<title>Broughlike tutorial - Stage 0</title>
<meta charset="utf-8">
</head>
<body>
<div id="outer">
<h1>JavaScript Broughlike Tutorial</h1>
This is a tutorial about writing a broughlike (a small roguelike game similar to <a href="https://store.steampowered.com/app/274700/868HACK/" target="_blank">868-HACK</a> or <a href="https://itunes.apple.com/us/app/cinco-paus/id1249999336" target="_blank">Cinco Paus</a>) from scratch in JavaScript.
<br><br>
Check out the <a href="stage0.html">Introduction</a> to see why I created this and how it differs from other tutorials.
<div class="centered">
<a href="stage0.html"><img src="screens/brough-screen.png" alt="Screenshot of tutorial"></a>
</div>
<h2>Try it out</h2>
Here's the <a href="completed/stage8/index.html">completed game</a>.
<br><br>
Controls are lowercase <em>wasd</em> for move/attack and number keys for spells.
<h2>Table of Contents</h2>
<ul>
<li><a href="stage0.html">Stage 0 - Introduction</a></li>
<li><a href="stage1.html">Stage 1 - Drawing to the screen</a></li>
<li><a href="stage2.html">Stage 2 - Map generation</a></li>
<li><a href="stage3.html">Stage 3 - Monsters</a></li>
<li><a href="stage4.html">Stage 4 - Monsters Part 2</a></li>
<li><a href="stage5.html">Stage 5 - Game lifecycle</a></li>
<li><a href="stage6.html">Stage 6 - Treasure & score</a></li>
<li><a href="stage7.html">Stage 7 - Animation, screenshake, & sounds</a></li>
<li><a href="stage8.html">Stage 8 - Spells</a></li>
</ul>
<h2>What to do if you get stuck</h2>
The <a href="https://github.com/nluqo/broughlike-tutorial/tree/master/docs/completed">github project</a> contains completed versions of all stages, so you can check your results as you go along. Open the <em>index.html</em> in each completed stage in your browser to test out the behavior at that stage.
<br><br>
<strong>Getting help</strong>
<br>
If you have any questions or anything is unclear, please reach out on our <a href="https://discord.gg/YdthKAq">discord server</a>.
<br><br>
You can also email me directly if you prefer: <a href="mailto:jeremiah.reid@gmail.com">jeremiah.reid@gmail.com</a>
</div>
<script>
let content = {};
</script>
<link rel="stylesheet" href="highlight.min.css">
<link rel="stylesheet" href="style.css">
<script src="highlight.min.js"></script>
<script src="diff.js"></script>
</body>
</html>
|