-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
469 lines (378 loc) · 23.4 KB
/
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
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
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="CoderDojo Tramore, [email protected]">
<title>CoderDojo Tramore - Python -
Home
</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" type="text/css" href="/static/bootstrap/css/bootstrap.min.css" >
<!-- custom template -->
<link rel="stylesheet" type="text/css" href="/static/css/full-width-pics.css" >
<!-- highlight extra -->
<link rel="stylesheet" href="/static/highlight/styles/default.css" >
<script src="/static/highlight/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-165447204-1"></script>
<!-- highlight site specific stuff -->
<script src="/static/css/extra.js"></script>
</head>
<body>
<div class="container">
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark" role="navigation">
<span>
<a class="navbar-brand" href="/"><img src="/static/css/img/coderdojo_logo.png" width="30" height="30" alt=""></a>
<a class="navbar-brand" href="/">Python</a>
</span>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav m-auto">
<li class="nav-item active "><a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a></li>
<!-- games -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Games</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="/games"> - Games - </a>
<a class="dropdown-item" href="/fruit_ninja_games">Fruit Ninja Games</a>
<a class="dropdown-item" href="/collector_games">Collector Games</a>
<a class="dropdown-item" href="/network_games">Network Games</a>
<a class="dropdown-item" href="/quiz_games">Quiz Games</a>
<a class="dropdown-item" href="/space_invaders_games">Space Invaders Games</a>
<a class="dropdown-item" href="/gardening_games">Gardening Games</a>
<a class="dropdown-item" href="/test_tube_sort_games">Test Tube Sort Games</a>
<a class="dropdown-item" href="/shut_the_box_game">Shut The Box Game</a>
</div>
</li>
<!-- deep dives -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Deep dives</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="/deep_dives"> - Deep Dives - </a>
<a class="dropdown-item" href="/working_with_files_and_directories">Working with Files and Directories</a>
<a class="dropdown-item" href="/todo">Animating Actors</a>
</div>
</li>
<!-- puzzles -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Puzzles</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="/puzzles"> - Puzzles - </a>
<a class="dropdown-item" href="/puzzles/how_many_nines">How many nines?</a>
<a class="dropdown-item" href="/puzzles/multiples_of_3_and_5">Multiples of 3 and 5</a>
<a class="dropdown-item" href="/puzzles/ten_divisors">Ten divisors</a>
</div>
</li>
<!-- qt -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
GUI Programming using Qt</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="/qt"> - GUI Programming using Qt - </a>
<a class="dropdown-item" href="qt_setup">Qt Setup</a>
<a class="dropdown-item" href="/qt_calculator">Calculator App</a>
<a class="dropdown-item" href="/qt_shut_the_box">Shut The Box</a>
</div>
</li>
</ul>
</div>
</nav>
</div>
<div class="body-content">
<!-- Header - set the background image for the header in the line below -->
<header class="py-5 bg-image-full" style="background-image: url( /static/css/img/top.jpg );">
<img class="img-fluid d-block mx-auto" src="/static/css/img/coderdojo_logo.png" alt="">
</header>
<!-- Content section -->
<section class="py-5">
<div class="container">
<div class="alert alert-primary" role="alert">
<h2>Spring 2021</h2>
<div class="accordion" id="calendar">
<div class="card">
<div class="card-header" id="heading0">
<h2 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapse0" aria-expanded="false" aria-controls="collapse0">
Week ? (Saturday 8 May)
</button>
</h2>
</div>
<div id="collapse0" class="collapse show " aria-labelledby="heading0" data-parent="#calendar">
<div class="card-body">
<p>New game today. This is a classic game of chance. </p>
<p>Go to <a href="shut_the_box_game">Shut The Box</a> for game assets and details.
</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="heading1">
<h2 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapse1" aria-expanded="false" aria-controls="collapse1">
Week 1 (Saturday 6 February)
</button>
</h2>
</div>
<div id="collapse1" class="collapse " aria-labelledby="heading1" data-parent="#calendar">
<div class="card-body">
<p>After a longer than usual Christmas break, we are finally back!
And based on current numbers bigger than ever!
It looks like we will have two python sessions — one for those
new to python and one for existing python ninjas.
</p>
<p>
<strong>For ninjas new to python:</strong>
<ul>
<li>Please install the python editor
<a href="https://codewith.mu/en/">Mu (codewith.mu/en)</a> before class. We will be using this editor to write games and geneal python programming.
</li>
</li>
After installing you should see Mu in your Windows Start menu. Click on this to start.
When you run Mu for the first time it will ask you to select mode —
click on <strong>PyGame Zero</strong>.</li>
<li>If you can, print out a copy of the worksheet for our first game
<a href="fruit_ninja_games">Fruit Ninja Games</a>.
</li>
<li>
After running the Mu editor, it should have created a folder called <code>mu_code</code> in your home folder.
We will use this folder for all of our python programming.
</li>
<li>
Download a small <a href="/static/resources/game_assets.zip">ZIP archive of game assets.</a>
Copy contents of this archive into your <code>mu_code</code> folder to end up with folders like the following
</br /><img src="/static/img/folders_start.png" alt=""/>
</li>
</li>
</ul>
</p>
<p>
<strong>For ninjas continuing with python:</strong>
<ul>
<li>
To start, we have some QT interfaces to finish bulding and we have more HackerRank problems to solve.
But we also will take a few minutes out, to talk about our plans (and your preferences) for this semester.
Hope to see you all.
</li>
</ul>
</div>
</div>
</div>
</div> <!-- accordion -->
</div>
</div>
</section>
<section class="py-5">
<div class="container">
<h1>Python Tools</h1>
<p class="lead">Mu editor + PyGameZero</p>
<p>In January 2020 we switched from the <a href="https://thonny.org/">Thony</a> python editor to <a href="https://codewith.mu/en/">Mu</a>. Thony is a nice editor but Mu has some features like <strong>Code Check</strong> and <strong>Code Tidy</strong> that should help us develop a good coding style.</p>
<p>We will use the python modules:
<ul>
<li>Python game (graphic+sound) module, <a href="https://pygame-zero.readthedocs.io/en/stable/">PyGameZero</a></li>
<li>Random number generation, <a href="https://www.bitdegree.org/learn/python-random">random</a></li>
<li>Turtle graphics, <a href="https://opentechschool.github.io/python-beginners/en/simple_drawing.html#"> turtle</a></li>
</ul>
and websites for resources (also known as game assets):</br></br>
<ul>
<li><a href="https://www.gameartguppy.com/">Game Art Guppy</a>,
Game art resources for indie game developers,
<a href="https://www.gameartguppy.com/"><img src="/static/img/gameartguppy.png" height="30px"> </a></li>
<li><a href="https://www.zapsplat.com">ZapSplat</a>,
a searchable collection of game sound effects,
<a href="https://www.zapsplat.com"><img src="/static/img/zap-splat-logo.png" height="30px"> </a></li>
<li><a href="https://www.melodyloops.com/music">Melody Loops</a>,
a collection of tune for background music,
<a href="https://www.melodyloops.com/music"><img src="/static/img/melodyloops.png" height="30px"> </a></li>
</ul>
and editing software:</br></br>
<ul>
<li><a href="https://www.audacityteam.org">Audacity</a>,
for editing and converting audio files,
<a href="https://www.audacityteam.org"><img src="/static/img/audacity.png" height="30px"> </a></li>
<li><a href="https://krita.org/en">Krita</a>,
for editing and generating art,
<a href="https://krita.org/en"><img src="/static/img/krita-logo.png" height="30px"> </a></li>
</ul>
Finally, the set of games build here are heavily based on the excellent book
<a href="https://www.dk.com/uk/book/9780241317792-computer-coding-python-games-for-kids">Coding Games with Python</a> by Carol Vorderman. This book is available from DK and is well worth getting a copy.
</p>
</div>
</section>
<!-- Image Section - set the background image for the header in the line below -->
<section style="background-image: url('https://codewith.mu/img/en//mu.gif'); background-repeat: no-repeat, no-repeat; background-position: center top; height: 200px; ">
<!-- Put anything you want here! There is just a spacer below for demo purposes! -->
<div style="height: 400px;"></div>
</section>
<section class="py-5">
<div class="container">
<h1>Worksheets</h1>
The following worksheets either build complete (but small) games or deep dives into programming concepts or game features such as maze building, animation of character and so on.
</div>
</section>
<section class="py-5">
<div class="container">
<h3>Games</h3>
<p class="lead">Each of the following worksheets start with a game idea and then builds a sequence of games by adding extra features. You don't have to implement all of the features - so pick your own level of difficulty, and move to new worksheet whenever you are ready.</p>
</div>
<div class="container">
<!-- /.row -->
<div class="row">
<!-- /.col-lg-3 -->
<div class="col-lg-12">
<!-- /.row -->
<div class="row">
<div class="col-lg-4 col-md-6 mb-4">
<div class="card h-100">
<iframe class="card-img-top" src="https://www.youtube.com/embed/C8khxcDfm2c" frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
<div class="card-body">
<h4 class="card-title"><a href="fruit_ninja_games">Fruit Ninja</a></h4>
<p class="card-text">
Our starting version of the game consists of an apple that appears at random positions on the screen and the computer prints out ”Good shot!” and draws a new apple when you click on the apple, otherwise prints ”You missed!” and ends the game.
</p>
<p class="card-text">
From this we add sound effects and background music, scoring and lives, moving targets, varying targets, and non-fruit vs fruit targets.
</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mb-4">
<div class="card h-100">
<iframe class="card-img-top" src="https://www.youtube.com/embed/83HCoVR-UQk" frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
<div class="card-body">
<h4 class="card-title"><a href="collector_games">Collector</a></h4>
<p class="card-text">
Our starting version of this game consists of coins appearing randomly on the screen and the player has to move the character to collect the coins before the limited time runs out.
</p>
<p class="card-text">
From this we add sound effects and background music, scoring, multiple targets, vanishing targets and bonas prizes.
</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mb-4">
<div class="card h-100">
<iframe class="card-img-top" src="https://www.youtube.com/embed/8HVsP3yGlcI" frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
<div class="card-body">
<h4 class="card-title"><a href="network_games">Network</a></h4>
<p class="card-text">
Our starting point for network is to click on the nodes in the network in correct order as quick as possible.
</p>
<p class="card-text">
There are lots of variations we can do to this game, but we will start with some bugs fixing and improving the random layout of the node in the network.
</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mb-4">
<div class="card h-100">
<iframe class="card-img-top" src="https://www.youtube.com/embed/aDUsizIZDCI" frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
<div class="card-body">
<h4 class="card-title"><a href="space_invaders_games">Space Invaders</a></h4>
<p class="card-text">
It is a close of the classic arcade game.
</p>
<p class="card-text">
Once we have got the basic clone working we will see about adding our twists to it.
</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mb-4">
<div class="card h-100">
<img class="card-img-top" src="/static/gardening_games/screenshot.png" >
<div class="card-body">
<h4 class="card-title"><a href="gardening_games">Gardening Games</a></h4>
<p class="card-text">
This is verion of those never-ending gradening games.
</p>
<p class="card-text">
The original version of the game gets too difficult too quickly (for me) so we might come back and revist this at a later session.
</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mb-4">
<div class="card h-100">
<iframe class="card-img-top" src="https://www.youtube.com/embed/lsm0pSiAs2c" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<div class="card-body">
<h4 class="card-title"><a href="test_tube_sort_games">Test Tube Sort Games</a></h4>
<p class="card-text">
This is a logic game where you need to unscramble coloured drops in test tubes.
</p>
<p class="card-text">
The game itself is relatively easy but there are some interesting programming challenges - for example, how do we ensure that the starting position is solvable?
</p>
</div>
</div>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.col-lg-9 -->
</div>
<!-- /.row -->
</div>
</section>
<section class="py-5">
<div class="container">
<h3>Deep Dives</h3>
<p class="lead">In each of the deep dives we will focus on a particular aspect of a game or some concept in programming in general.</p>
</div>
<div class="container">
<!-- /.row -->
<div class="row">
<!-- /.col-lg-3 -->
<div class="col-lg-12">
<div class="row">
<div class="col-lg-4 col-md-6 mb-4">
<div class="card h-100">
<img class="card-img-top" src="http://placehold.it/600x400" alt="">
<div class="card-body">
<h4 class="card-title"><a href="fruit_ninja.html">Animating Characters</a></h4>
<p class="card-text">
</p>
<p class="card-text">
Rather than our character always looking the same, we want it to have some personality and respond to events, such as facing the direction it is moving in, or changing colour when it gets angry/sick, or just blinking when it is waiting for us to move it around the screen. In this worksheet we will cover how these effects can be implemented.
</p>
</div>
</div>
</div>
</div>
</div>
<!-- /.col-lg-9 -->
</div>
<!-- /.row -->
</div>
</section>
<hr/>
</div>
<!-- Footer -->
<footer class="py-5 bg-dark">
<div class="container">
<p class="m-0 text-white" style="font-size: 10px;">
<a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/88x31.png" /></br></a>This work is licensed under a<a rel="license" href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>.
</p>
</div>
<!-- /.container -->
</footer>
<!-- Bootstrap core JavaScript -->
<script src="/static/jquery/jquery.min.js" ></script>
<script src="/static/bootstrap/js/bootstrap.bundle.min.js" ></script>
</body>
</html>