Skip to content

Commit 9903803

Browse files
juliaogrisjuliaogris
committed
🧪 lab: Add lab 5 - games (#449)
This lab is the transition from the foundation to the abstraction course. It introduces the concept of events. We also show to program simple games as this is something students have been asking for. We've moved the unused bounce sample from the "if statement" lab. The challenges are: - 👋 Welcome - 🎪 Events - 🪙 Coin Toss - 🎨 Paint - 🎲 Guess - 🟢 On animate - 🏓 Bounce - 👾 Game Preparatory tweaks - playsite: Improve `key` event handler - editor: Revert auto-correct and auto-capitalize - make: Rework conformance target This merges the following commits: * make: Rework conformance target * Revert "frontend: Update editor textarea attributes" * playsite: Improve `key` event handler * labsite: Center single images in notes * lab: Add lab 5 - games Makefile | 7 +- frontend/lab/css/overrides.css | 1 + frontend/lab/samples/games/animate.evy | 7 + frontend/lab/samples/games/animate.htmlf | 28 ++++ frontend/lab/samples/games/animate.md | 37 +++++ frontend/lab/samples/games/bounce.evy | 10 ++ frontend/lab/samples/games/bounce.htmlf | 48 ++++++ frontend/lab/samples/games/bounce.md | 60 +++++++ frontend/lab/samples/games/coin.evy | 10 ++ frontend/lab/samples/games/coin.htmlf | 45 ++++++ frontend/lab/samples/games/coin.md | 52 ++++++ frontend/lab/samples/games/events.evy | 7 + frontend/lab/samples/games/events.htmlf | 40 +++++ frontend/lab/samples/games/events.md | 46 ++++++ frontend/lab/samples/games/game.evy | 13 ++ frontend/lab/samples/games/game.htmlf | 152 ++++++++++++++++++ frontend/lab/samples/games/game.md | 146 +++++++++++++++++ frontend/lab/samples/games/guess.evy | 13 ++ frontend/lab/samples/games/guess.htmlf | 61 +++++++ frontend/lab/samples/games/guess.md | 71 ++++++++ frontend/lab/samples/games/img/drawing.gif | Bin 0 -> 14410 bytes frontend/lab/samples/games/paint.evy | 7 + frontend/lab/samples/games/paint.htmlf | 71 ++++++++ frontend/lab/samples/games/paint.md | 76 +++++++++ frontend/lab/samples/games/welcome-games.evy | 65 ++++++++ .../lab/samples/games/welcome-games.htmlf | 12 ++ frontend/lab/samples/games/welcome-games.md | 13 ++ frontend/lab/samples/ifs/bounce-show.evy | 18 --- frontend/lab/samples/ifs/bounce-show.htmlf | 10 -- frontend/lab/samples/ifs/bounce-show.md | 12 -- frontend/lab/samples/ifs/bounce.evy | 1 - frontend/lab/samples/ifs/bounce.htmlf | 37 ----- frontend/lab/samples/ifs/bounce.md | 40 ----- frontend/lab/samples/samples.json | 25 +-- frontend/module/editor.js | 4 +- frontend/play/index.js | 2 +- 36 files changed, 1113 insertions(+), 134 deletions(-) Pull-request: #449
2 parents 1b66162 + e514e9e commit 9903803

36 files changed

+1113
-134
lines changed

‎Makefile‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -142,11 +142,10 @@ check-fmt-evy:
142142
go run . fmt --check $(EVY_FILES)
143143

144144
## Conform runs evy over an example suite with asserts.
145+
CONFORM_CMD = @printf "%s " $(notdir $f); evy run $f
146+
CONFORM_EVY_FILES = $(wildcard examples/human-eval/*.evy)
145147
conform: install
146-
for n in examples/human-eval/*.evy; do \
147-
printf "%s " "$${n##*/}"; \
148-
evy run "$$n"; \
149-
done
148+
$(foreach f,$(CONFORM_EVY_FILES),$(CONFORM_CMD)$(nl))
150149

151150
.PHONY: check-fmt-evy conform fmt-evy lint-go lint-node
152151

‎frontend/lab/css/overrides.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,7 @@ html {
111111
.notes img {
112112
width: 16rem;
113113
max-width: 80%;
114+
margin: 0 auto;
114115
}
115116

116117
/* --- Notes table ----------------------------------------------- */

‎frontend/lab/samples/games/animate.evy‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
x := 0
2+
3+
on animate
4+
x = (x + 0.2) % 100
5+
move x 50
6+
circle 10
7+
end

‎frontend/lab/samples/games/animate.htmlf‎

Lines changed: 28 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frontend/lab/samples/games/animate.md‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
# On Animate
2+
3+
The `animate` event handler is called periodically, typically about 60 times per second.
4+
5+
It lets you create animations and handle user input simultaneously.
6+
7+
## ⭐ Intro
8+
9+
**Read** the code. What might happen when it's run?
10+
11+
**Run** the code. Was it what you expected?
12+
13+
[Next]
14+
15+
## ⭐ Color and Trail
16+
17+
Note how the circle leaves a trail? Let's remove it.
18+
19+
Change the circle to your favorite color.
20+
21+
Consider updating `fill` and `stroke` color as well as `width`.
22+
23+
### [>] Hint
24+
25+
Use `clear` at the beginning of the `animate` event handler.
26+
27+
[Next]
28+
29+
## ⭐ Fading Trail
30+
31+
Try leaving a fading trail behind.
32+
33+
### [>] Hint
34+
35+
```evy
36+
clear (hsl 0 0 100 5)
37+
```

‎frontend/lab/samples/games/bounce.evy‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
x := 0
2+
inc := 0.2
3+
4+
on animate
5+
clear
6+
x = (x + inc) % 100
7+
move x 50
8+
circle 10
9+
end
10+

‎frontend/lab/samples/games/bounce.htmlf‎

Lines changed: 48 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frontend/lab/samples/games/bounce.md‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
# 🏓 Bouncy Ball Bonus
2+
3+
## ⭐ Intro
4+
5+
**Read** the code. Pretty similar to the last challenge, isn't it?
6+
7+
**Run** the code. Was it what you expected?
8+
9+
[Next]
10+
11+
## ⭐ Bounce
12+
13+
Make the ball bounce back and forth on the drawing area.
14+
15+
Remember the [Pulse Challenge](../ifs/pulse.md)?
16+
17+
The bounce motion uses a similar trick to change direction.
18+
19+
### [>] Hint
20+
21+
Inside `animate` add:
22+
23+
```evy
24+
x = x + inc
25+
if x < 10 or x > ❓
26+
inc = -❓
27+
end
28+
```
29+
30+
[Next]
31+
32+
## ⭐ Move with Keys
33+
34+
Use the `key` event handler to move the ball up and down:
35+
36+
- Move up with `⬆` or `k`
37+
- Move down with `⬇` or `j`
38+
39+
Declare a global variable `y` that's used inside `animate` to set the balls
40+
y-coordinate. Update it inside the `key` event handler.
41+
42+
### [>] Hint
43+
44+
```evy
45+
y := 50
46+
47+
on animate
48+
// ...
49+
move x ❓
50+
// ...
51+
end
52+
53+
on key k:string
54+
if k == "ArrowUp" or k == "k"
55+
y = y + 1
56+
else if ❓
57+
y = ❓
58+
end
59+
end
60+
```

‎frontend/lab/samples/games/coin.evy‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
msg := "Heads (h) or Tails (t)?"
2+
print msg
3+
4+
on key guess:string
5+
print "Your guess:" guess
6+
sleep 1
7+
print
8+
print msg
9+
end
10+

‎frontend/lab/samples/games/coin.htmlf‎

Lines changed: 45 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)