-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathfirst-steps.html
More file actions
149 lines (123 loc) · 4.78 KB
/
first-steps.html
File metadata and controls
149 lines (123 loc) · 4.78 KB
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
146
147
148
149
<!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 · First Steps</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 = lessons><i class = "fa-solid fa-chevron-left"></i> Back</a>
<a class = right href = drawing-things>Next <i class = "fa-solid fa-chevron-right"></i></a>
<h1>First Steps</h1>
<p>
Welcome to JoBase!
In this lesson you will learn how to create your first program.
If you haven't done it already, click <a href = download>here</a> to set up JoBase on your computer.
</p>
<p>
Create a file and write the following code.
</p>
<script>
snippet([
"",
"import JoBase"
])
</script>
<p>
Add some more lines, then write the code below.
</p>
<script>
snippet([
"import JoBase",
"\n\nrun()"
])
</script>
<p>
That's it for the setup!
When you run the code above, a blank window should appear.
Let's create an image for the content of our game.
</p>
<script>
snippet([
"import JoBase",
"\n\nimage = Image(MAN)",
"\n\nrun()"
])
</script>
<p>
Now we can display the image.
The block called <mark>def loop()</mark> is where we draw things.
</p>
<script>
snippet([
"import JoBase\n\nimage = Image(MAN)",
"\n\ndef loop():\n image.draw()",
"\n\nrun()"
])
</script>
<div class = slot>
<img src = data/images/man.png>
</div>
<p>
What if we want to give the image a tint?
We can do this by changing the <mark>color</mark> attribute.
</p>
<script>
snippet([
"import JoBase\n\nimage = Image(MAN",
", color = GREEN",
")\n\ndef loop():\n image.draw()\n\nrun()"
])
</script>
<p>
Finally, let's animate our image.
Each loop we increase the angle by <mark>1°</mark>.
</p>
<script>
snippet([
"import JoBase\n\nimage = Image(MAN, color = GREEN)\n\ndef loop():",
"\n image.angle += 1",
"\n image.draw()\n\nrun()"
])
</script>
<div class = slot>
<img src = data/images/green.png>
</div>
<p>
Now we have a rotating green image!
You can learn more about the <a href = reference#Image>Image</a> class in the JoBase reference.
Of course, you will want more than images in your games.
In the next tutorial, we will see how to draw other shapes.
</p>
<a href = lessons><i class = "fa-solid fa-chevron-left"></i> Back</a>
<a class = right href = drawing-things>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>