-
Notifications
You must be signed in to change notification settings - Fork 0
/
opgave.html
83 lines (79 loc) · 9.3 KB
/
opgave.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
<!DOCTYPE HTML>
<html>
<head>
<title>Google Doodle Game</title>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0,width=device-width,user-scalable=0" />
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/opgave.css">
</head>
<body>
<h1>😷 The corona game, the what, the why and the how 😷</h1>
<h2>Thema: Corona meets Google doodle</h2>
<p>Howdy IMDers, de reden waarom we dit take-home examen op deze manier moeten organiseren is <strong>Corona</strong> natuurlijk.</p>
<p>Daarom gaat dit ook het thema en houvast van dit examen worden: Corona meets Google Doodle.<br>
Je zal zien door met een thema te werken heb je direct al een richting voor je game, je moet niet meer nadenken over issues zoals de kleuren enz., je gebruikt gewoon de Google kleuren. Je kan de graphics ook behoorlijk eenvoudig houden.</p>
<p>Ik weet niet dat je de afgelopen maanden de <em>stay home</em>, <em>thank you</em> en <em>stay and play</em> doodles zag op de startpagina van Google? Check enkele voorbeelden van die doodles hieronder. Daar kan je al veel inspiratie zoeken voor een interessante insteek voor je game.<br>
De hele opzet is dat jullie een Google/corona game ontwerpen en developen voor op de startpagina van Google. We gebruiken dezelfde <a href="index.html">template</a> als voor de Google doodle die jullie al ontworpen tijdens het semester.</p>
<p><strong>Voorbeelden voor inspiratie</strong>
</p>
<ul>
<li><a href="https://www.google.com/doodles/stay-home-save-lives">https://www.google.com/doodles/stay-home-save-lives</a></li>
<li><a href="https://www.google.com/doodles/thank-you-public-health-workers-and-to-researchers-in-the-scientific-community">https://www.google.com/doodles/thank-you-public-health-workers-and-to-researchers-in-the-scientific-community</a></li>
<li><a href="https://www.google.com/doodles/thank-you-doctors-nurses-and-medical-workers">https://www.google.com/doodles/thank-you-doctors-nurses-and-medical-workers</a></li>
<li><a href="https://www.google.com/doodles/thank-you-emergency-services-workers">https://www.google.com/doodles/thank-you-emergency-services-workers</a></li>
<li><a href="https://www.google.com/doodles/thank-you-custodial-and-sanitation-workers">https://www.google.com/doodles/thank-you-custodial-and-sanitation-workers</a></li>
<li><a href="https://www.google.com/doodles/thank-you-farmworkers-and-farmers">https://www.google.com/doodles/thank-you-farmworkers-and-farmers</a></li>
<li><a href="https://www.google.com/doodles/thank-you-grocery-workers">https://www.google.com/doodles/thank-you-grocery-workers</a></li>
<li><a href="https://www.google.com/doodles/thank-you-public-transportation-workers">https://www.google.com/doodles/thank-you-public-transportation-workers</a></li>
<li><a href="https://www.google.com/doodles/thank-you-packaging-shipping-and-delivery-workers">https://www.google.com/doodles/thank-you-packaging-shipping-and-delivery-workers</a></li>
<li><a href="https://www.google.com/doodles/thank-you-food-service-workers">https://www.google.com/doodles/thank-you-food-service-workers</a></li>
<li><a href="https://www.google.com/doodles/thank-you-teachers-and-childcare-workers">https://www.google.com/doodles/thank-you-teachers-and-childcare-workers</a></li>
<li><a href="https://www.google.com/doodles/stay-and-play-at-home-with-popular-past-google-doodles-coding-2017">https://www.google.com/doodles/stay-and-play-at-home-with-popular-past-google-doodles-coding-2017</a></li>
<li><a href="https://www.google.com/doodles/thank-you-coronavirus-helpers-april-25-26">https://www.google.com/doodles/thank-you-coronavirus-helpers-april-25-26</a></li>
<li><a href="https://www.google.com/doodles/stay-and-play-at-home-with-popular-past-google-doodles-rockmore-2016">https://www.google.com/doodles/stay-and-play-at-home-with-popular-past-google-doodles-rockmore-2016</a></li>
<li><a href="https://www.google.com/doodles/stay-and-play-at-home-with-popular-past-google-doodles-scoville-2016">https://www.google.com/doodles/stay-and-play-at-home-with-popular-past-google-doodles-scoville-2016</a></li>
<li><a href="https://www.google.com/doodles/stay-and-play-at-home-with-popular-past-google-doodles-loteria-2019">https://www.google.com/doodles/stay-and-play-at-home-with-popular-past-google-doodles-loteria-2019</a></li>
<li><a href="https://www.google.com/doodles/stay-and-play-at-home-with-popular-past-google-doodles-hip-hop-2017">https://www.google.com/doodles/stay-and-play-at-home-with-popular-past-google-doodles-hip-hop-2017</a></li>
<li><a href="https://www.google.com/doodles/stay-and-play-at-home-with-popular-past-google-doodles-pac-man-2010">https://www.google.com/doodles/stay-and-play-at-home-with-popular-past-google-doodles-pac-man-2010</a></li>
</ul>
<p><strong>Huisstijl Google:</strong> <a href="https://design.google/library/evolving-google-identity/">https://design.google/library/evolving-google-identity/</a> </p>
<p><strong>Formaat:</strong> breedte en hoogte van de game mag je zelf kiezen, zie wel dat het in de template past, test je afmetingen dus eerst is in de template</p>
<h2>Deliverables - Wat moet er in de game zitten?</h2>
<p>Referentie voor je eigen game is de <em>missile game</em> op canvas. Bekijk eerst de 16 stappen naar de <em>missile game</em> op canvas. Zo krijg je helicopterview op de totstandkoming van de game.<br>
Iedereen maakt uiteraard een unieke en persoonlijke game, er zijn zoveel verschillende concepten en variaties te bedenken in dit thema dat twee studenten onmogelijk hetzelfde spel gaan bouwen.
<br>
Pas dus op met games doorgeven aan elkaar, zonder dat je het weet neemt iemand iets van uw game over en dan mag jij het komen uitleggen op het strafbankje.
</p>
<ol>
<li>Verwerk ergens een horizontale of verticale looping background image in je game via css of javascript (check oefening city skyline)</li>
<li>Maak via css gebruik van een frame per frame animatie of sprite animatie(s) (check oefening twitter whale fale, oogje van de walvis of de vogeltjes)</li>
<li>Maak ergens gebruik van een css transitions bij een :hover met de muis.</li>
<li>Verwerk ergens een mask in je game.<br>
<a href="https://www.html5rocks.com/en/tutorials/masking/adobe/">https://www.html5rocks.com/en/tutorials/masking/adobe/</a><br>
<a href="https://tympanus.net/codrops/css_reference/mask-image/">https://tympanus.net/codrops/css_reference/mask-image/</a><br>
<a href="https://alligator.io/css/masking-with-mask-image/">https://alligator.io/css/masking-with-mask-image/</a> <br>
...<br>
Hello Google ;-) </li>
<li>In je game moet je ergens werken met KeyboardEvents, denk verder dan alleen maar de pijltjes toetsen → <a href="https://keycode.info/">https://keycode.info/</a></li>
<li>Bouw een score op in je game of bedenk een alternatief om het interessant te maken voor de player.</li>
<li>Werk bij voorkeur ook met levens of zorg er voor dat je niet oneindig kan blijven spelen, dwing dus een "Game over" af.</li>
<li>Zoek een mooie oplossing voor een <em>Game over</em> of hoe ziet je arena er uit na een <em>Game over</em> (check hoe ik het deed in de missile game).</li>
<li>In je game zitten collisions of botsingen. Deze in je game hebben is punten scoren mannen! 💯</li>
<li>Je game bevat een index.html (dat is eigenlijk de template pagina), een afzonderlijke stylesheet <em>game.css</em>, javascript in je HTML of in een afzonderlijke js file mag je zelf kiezen. We weten uiteraard allemaal wel wat het beste is.</li>
<li>Gebruik zoveel mogelijk comments in je css en vooral in je javascript, beschrijf in de comments wat je aan het doen bent (/* */ en // you know the drill)<br>
Vergeet de error console van je browser niet raad te plegen.
</li>
<li>Spieken. Code kopiëren. Plagiaat. <strong>O boy! </strong>Je wil het niet meemaken 😠</li>
<li>Denk aan de gehele <em>look and feel</em> van de game, Google style dus, probeer stijlbreuken te vermijden. Het belangrijkste van dit examen is wel de coding!</li>
<li>Omschrijf in een bijgevoegd document wat de game play van het spel is. Hoe je het spel moet spelen dus.</li>
<li>Als alle puntjes niet lukken dan is dat niet erg, dan heb je geen 20/20 en verlies je een aantal punten. Laat wel zien wat je in je mars hebt. The extra mile, bewandel hem.</li>
</ol>
<h2>Support of vragen</h2>
<p>Als er iets niet duidelijk is dan mail je met je vraag naar [email protected] en antwoord ik in een aankondiging op canvas zodat iedereen op de hoogte is.<br>
Deadline om up te loaden is dinsdag 2 juni om 23u59.
</p>
<p>Toi, toi, toi. Komt goed. Heel dit Take-home examen is corona-proof en zal rekening houden met de moeilijke tijd van de laatste maanden.</p>
<p class="handjes">👐💦 Ontsmet nu jullie handjes en vingers en vlieg er in!</p>
</body>
</html>