js/games/nluqo.github.io/broughlike-tutorial/index.html


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>
# example program: communicating between routines using channels

def producer sink:&:sink:char -> sink:&:sink:char [
  # produce characters 1 to 5 on a channel
  local-scope
  load-inputs
  # n = 0
  n:char <- copy 0
  {
    done?:bool <- lesser-than n, 5
    break-unless done?
    # other threads might get between these prints
    $print [produce: ], n, [ 
]
    sink <- write sink, n
    n <- add n, 1
    loop
  }
  close sink
]

def consumer source:&:source:char -> source:&:source:char [
  # consume and print integers from a channel
  local-scope
  load-inputs
  {
    # read an integer from the channel
    n:char, eof?:bool, source <- read source
    break-if eof?
    # other threads might get between these prints
    $print [consume: ], n:char, [ 
]
    loop
  }
]

def main [
  local-scope
  source:&:source:char, sink:&:sink:char <- new-channel 3/capacity
  # create two background 'routines' that communicate by a channel
  routine1:num <- start-running producer, sink
  routine2:num <- start-running consumer, source
  wait-for-routine routine1
  wait-for-routine routine2
]