-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathuser-interaction.html
145 lines (120 loc) · 5.59 KB
/
user-interaction.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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE html>
<html>
<head>
<meta name = viewport content = "width=device-width,initial-scale=1">
<link rel = icon href = data/images/favicon.ico sizes = "16x16 32x32 48x48 64x64">
<script src = data/js/setup.js></script>
<script src = data/js/code.js></script>
<link rel = stylesheet href = data/css/fontawesome.css>
<link rel = stylesheet href = data/css/all.css>
<link rel = stylesheet href = data/css/main.css>
<title>JoBase · User Interaction</title>
</head>
<body>
<section class = top>
<a href = "/">JoBase</a>
<i class = "fa-solid fa-bars"></i>
<i class = "fa-solid fa-sun"></i>
<a href = lessons class = this>Lessons</a>
<a href = demos>Demos</a>
<a href = games>Games</a>
<a href = reference>Reference</a>
<a href = download>Download</a>
<a href = https://github.com/JoBase target = _blank>
<i class = "fa-brands fa-github"></i>
</a>
<a href = https://discord.gg/DzHyvZfa5q target = _blank>
<i class = "fa-brands fa-discord"></i>
</a>
</section>
<section class = main>
<a href = drawing-things><i class = "fa-solid fa-chevron-left"></i> Back</a>
<a class = right href = lessons>Next <i class = "fa-solid fa-chevron-right"></i></a>
<h1>User Interaction</h1>
<p>
In the previous lesson, we learned how to draw various things on the screen.
This lesson will introduce keyboard and mouse controls.
Let's start with our <mark>MAN</mark> image.
</p>
<script>
snippet([
"",
"import JoBase\n\nman = Image(MAN)\n\ndef loop():\n man.draw()\n\nrun()"
])
</script>
<p>
To put the image in motion, we'll increment its position on the <mark>x</mark> axis.
</p>
<script>
snippet([
"import JoBase\n\nman = Image(MAN)\n\ndef loop():",
"\n man.x += 1",
"\n man.draw()\n\nrun()"
])
</script>
<p>
You should see our image moving to the right.
How can we control this with the keyboard?
The code below uses an <mark>if</mark> condition to check if the <mark>right</mark> arrow is being pressed.
</p>
<script>
snippet([
"import JoBase\n\nman = Image(MAN)\n\ndef loop():",
"\n if key.right:",
"\n man.x += 1\n\n man.draw()\n\nrun()"
])
</script>
<p>
Let's add a new control for moving to the left.
For this, we decrement the position on the <mark>x</mark> axis.
</p>
<script>
snippet([
"import JoBase\n\nman = Image(MAN)\n\ndef loop():\n if key.right:\n man.x += 1",
"\n\n if key.left:\n man.x -= 1",
"\n\n man.draw()\n\nrun()"
])
</script>
<p>
Now our image can move left and right!
We can also add up and down controls by changing the <mark>y</mark> position.
</p>
<script>
snippet([
"import JoBase\n\nman = Image(MAN)\n\ndef loop():\n if key.right:\n man.x += 1\n\n if key.left:\n man.x -= 1",
"\n\n if key.up:\n man.y += 1\n\n if key.down:\n man.y -= 1",
"\n\n man.draw()\n\nrun()"
])
</script>
<p>
Check the <a href = reference#Key>Key</a> class for more information on keyboard controls.
Now let's change the image tint when the mouse is pressed.
</p>
<script>
snippet([
"import JoBase\n\nman = Image(MAN)\n\ndef loop():\n if key.right:\n man.x += 1\n\n if key.left:\n man.x -= 1\n\n if key.up:\n man.y += 1\n\n if key.down:\n man.y -= 1",
"\n\n if cursor.press:\n man.color = YELLOW\n\n if cursor.release:\n man.color = WHITE",
"\n\n man.draw()\n\nrun()"
])
</script>
<div class = slot>
<img src = data/images/input.png>
</div>
<p>
In the code above, we use the <a href = reference#Cursor>cursor</a> variable to access the state of the mouse.
Cursor <a href = reference#Cursor.press>press</a> and <a href = reference#Cursor.release>release</a> are activated whenever the user presses or releases a button.
</p>
<p>
User input is one of the most import functions of a game.
Try controlling the image with different keys.
</p>
<a href = drawing-things><i class = "fa-solid fa-chevron-left"></i> Back</a>
<a class = right href = lessons>Next <i class = "fa-solid fa-chevron-right"></i></a>
</section>
<footer>
<span>
© Copyright <span id = year></span> JoBase · <a href = mailto:hello@jobase.org>hello@jobase.org</a>
</span>
</footer>
</body>
</html>