diff --git a/Projects/payment-form/README.md b/Projects/payment-form/README.md
new file mode 100644
index 000000000..954377f60
--- /dev/null
+++ b/Projects/payment-form/README.md
@@ -0,0 +1,34 @@
+## Payment Form
+
+This payment form shows you the basics of form processing and DOM manipulation. It includes code to react to user input (key events), and change DOM elements based on the input (in this case, we check if the form elements are valid or not).
+
+
+
+[Live Demo](https://rawgit.com/HackYourFutureBelgium/JavaScript2/master/Projects/payment-form/index.html)
+
+### Email Format
+
+Validation of email addresses is [notouriously hard](https://hackernoon.com/the-100-correct-way-to-validate-email-addresses-7c4818f24643). Here we just check whether the email address contains a "@" sign.
+
+### Credit Card Format
+
+The formats for credit cards is simplified. We only accept VISA cards, which start with the number 4 and contain 4 blocks of 4 numbers. Users don't need to input spaces, we do that for them.
+
+We use [regular expressions](https://en.wikipedia.org/wiki/Regular_expression) to filter and remove text. Regular expressions are not the scope of these lessons, but you can find more information in the context of JavaScript here: [Regular Expressions · MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions).
+
+On **input** (so whenever the user presses a character) we immediately filter what the user typed. We remove everything that is not a digit. Then we replace every four characters with those four characters and a space.
+
+On **change** (whenever the user is done with the input field) we check the input. We first strip out all the spaces internally, then we test it with the Visa regular expression.
+
+### Valid / Invalid
+
+If the input of a field is not valid we set a class `invalid` on the field's parent (the `form-field` div). To get the parent element, we get the element that triggered the event (`e.target`), then ask for its [`parentElement`](https://developer.mozilla.org/en-US/docs/Web/API/Node/parentElement).
+
+This allows us to change two things in one go:
+
+- The `border-color` and text `color` of the field itself.
+- The visibility (`opacity`) of the `error` span.
+
+We do this by having selectors like `.form-field.invalid input` and `.form-field.invalid .error`.
+
+We use [`innerHTML`](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML) to set the HTML text for the error span.
diff --git a/Projects/payment-form/css/main.css b/Projects/payment-form/css/main.css
new file mode 100644
index 000000000..42b714840
--- /dev/null
+++ b/Projects/payment-form/css/main.css
@@ -0,0 +1,140 @@
+* {
+ box-sizing: border-box;
+}
+
+html {
+ height: 100%;
+}
+
+body {
+ height: 100%;
+ line-height: 1.43;
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+ font-size: 16px;
+ font-variant: normal;
+ -webkit-font-smoothing: antialiased;
+ color: #6b7c93;
+ background-color: #f7f8f9;
+ overflow: hidden;
+ background-color: #f7f8f9;
+}
+
+.wrapper {
+ height: 100%;
+ width: 500px;
+ margin: auto;
+}
+
+h2 {
+ font-size: 24pt;
+ font-weight: normal;
+}
+
+.form-row {
+ width: 100%;
+ margin-top: 20px;
+}
+
+.form-row:first-child {
+ margin-top: 0;
+}
+
+.form-row.inline {
+ display: flex;
+}
+
+.form-row.inline .form-field:not(:last-child) {
+ margin-right: 20px;
+}
+
+
+.form-field {
+ width: 100%;
+}
+
+label {
+ display: block;
+ margin-bottom: 8px;
+ font-size: 14px;
+ font-weight: 500;
+}
+
+button, input, select, textarea {
+ font-family: inherit;
+ font-size: inherit;
+ line-height: inherit;
+}
+
+input {
+ width: 100%;
+ outline: none;
+ height: 40px;
+ padding: 10px 12px;
+ color: #32325d;
+ background-color: white;
+ border: 1px solid transparent;
+ border-radius: 4px;
+ box-shadow: 0 1px 3px 0 #e6ebf1;
+ -webkit-transition: box-shadow 150ms ease;
+ transition: box-shadow 150ms ease;
+}
+
+input.invalid {
+ border-color: #fa755a;
+}
+
+input:focus {
+ box-shadow: 0 1px 3px 0 #cfd7df;
+}
+
+.error {
+ display: block;
+ margin-top: 12px;
+ margin-left: 5px;
+ color: #fa755a;
+ min-height: 20px;
+ font-size: 14px;
+ opacity: 0;
+ transform: translateY(4px);
+ transition: all 400ms cubic-bezier(0.075, 0.82, 0.165, 1);
+}
+
+.form-field.invalid .error {
+ opacity: 1;
+ transform: translateY(0);
+}
+
+.form-field.invalid input {
+ color: #fa755a;
+ border-color: #fa755a;
+}
+
+
+button {
+ border: none;
+ border-radius: 4px;
+ outline: none;
+ text-decoration: none;
+ color: #fff;
+ background: #32325d;
+ white-space: nowrap;
+ display: inline-block;
+ height: 40px;
+ line-height: 40px;
+ padding: 0 14px;
+ box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08);
+ border-radius: 4px;
+ font-size: 15px;
+ font-weight: 600;
+ letter-spacing: 0.025em;
+ text-decoration: none;
+ -webkit-transition: all 150ms ease;
+ transition: all 150ms ease;
+ margin-top: 28px;
+}
+
+button:hover {
+ transform: translateY(-1px);
+ box-shadow: 0 7px 14px rgba(50, 50, 93, .10), 0 3px 6px rgba(0, 0, 0, .08);
+ background-color: #43458b;
+}
diff --git a/Projects/payment-form/index.html b/Projects/payment-form/index.html
new file mode 100644
index 000000000..5b048f6ae
--- /dev/null
+++ b/Projects/payment-form/index.html
@@ -0,0 +1,38 @@
+
+
+
+
+
+ Form Validation in JavaScript
+
+
+
+
+
+
Confirm Purchase
+
+
+
+
+
diff --git a/Projects/payment-form/js/validate.js b/Projects/payment-form/js/validate.js
new file mode 100644
index 000000000..1354f435e
--- /dev/null
+++ b/Projects/payment-form/js/validate.js
@@ -0,0 +1,45 @@
+const VISA_REG_EX = /^(4[0-9]{15})$/;
+
+function onChangeEmailField(e) {
+ const field = e.target;
+ const parent = field.parentElement;
+ const errorSpan = field.parentElement.querySelector('.error');
+ const value = field.value;
+ const isValid = value.includes('@');
+ if (isValid) {
+ parent.classList.remove('invalid');
+ errorSpan.innerHTML = '';
+ } else {
+ parent.classList.add('invalid');
+ errorSpan.innerHTML = 'Email address is not valid.';
+ }
+}
+
+function onChangeCardField(e) {
+ const field = e.target;
+ const parent = field.parentElement;
+ const errorSpan = field.parentElement.querySelector('.error');
+ let value = field.value;
+ value = value.replace(/\s/g, '');
+ const isValid = VISA_REG_EX.test(value);
+ if (isValid) {
+ parent.classList.remove('invalid');
+ errorSpan.innerHTML = '';
+ } else {
+ parent.classList.add('invalid');
+ errorSpan.innerHTML = 'Your card number is invalid.';
+ }
+}
+
+function onInputCardField(e) {
+ const field = e.target;
+ let value = field.value;
+ value = value.replace(/[^0-9]+/g, '');
+ value = value.replace(/(.{4})/g, '$1 ');
+ value = value.trim();
+ e.target.value = value;
+}
+
+document.querySelector('#email-field').addEventListener('change', onChangeEmailField);
+document.querySelector('#card-field').addEventListener('change', onChangeCardField);
+document.querySelector('#card-field').addEventListener('input', onInputCardField);
diff --git a/Projects/payment-form/screenshot.png b/Projects/payment-form/screenshot.png
new file mode 100644
index 000000000..1c8a16b5a
Binary files /dev/null and b/Projects/payment-form/screenshot.png differ
diff --git a/Projects/space-game/README.md b/Projects/space-game/README.md
new file mode 100644
index 000000000..e075f7b63
--- /dev/null
+++ b/Projects/space-game/README.md
@@ -0,0 +1,27 @@
+# Space Invaders
+
+
+
+A clone of [Space Invaders](https://en.wikipedia.org/wiki/Space_Invaders), specially built for teaching purposes!
+
+[Play the game here!](https://www.enigmeta.com/spacegame/final/)
+
+## Step By Step
+
+The project is divided into multiple steps. The `final` folder shows the full game.
+
+* [**Step 1**](./step01): Creating and moving the player
+* [**Step 2**](./step02): Correct key input
+* [**Step 3**](./step03): Correct timing
+* [**Step 4**](./step04): Firing lasers
+* [**Step 5**](./step05): Removing lasers
+* [**Step 6**](./step06): Creating the enemies
+* [**Step 7**](./step07): Hit detection
+* [**Step 8**](./step08): Enemy lasers
+* [**Step 9**](./step09): Random cooldown
+* [**Step 10**](./step10): Losing the game
+* [**Step 11**](./step11): Winning the game
+
+## Credits
+
+* Game assets by [Kenney](http://kenney.nl/assets/space-shooter-redux)
diff --git a/Projects/space-game/final/css/main.css b/Projects/space-game/final/css/main.css
new file mode 100644
index 000000000..112ed105b
--- /dev/null
+++ b/Projects/space-game/final/css/main.css
@@ -0,0 +1,135 @@
+html,
+body {
+ height: 100%;
+ overflow: hidden;
+}
+
+body {
+ margin: 0;
+ font: 16px sans-serif;
+}
+
+.wrap {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+}
+
+header {
+ text-align: center;
+ background: black;
+ color: #fff;
+ padding: 10px;
+}
+
+footer {
+ padding: 10px;
+ text-align: center;
+ font-size: 11px;
+ background: black;
+ color: white;
+}
+
+.game-wrapper {
+ flex: 1;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background: #222;
+}
+.game {
+ width: 800px;
+ height: 600px;
+ background: url(../img/background-blue.png);
+ animation: scroll-background 5s linear infinite;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+ position: relative;
+}
+
+@keyframes scroll-background {
+ from {
+ background-position-y: 0px;
+ }
+ to {
+ background-position-y: 256px;
+ }
+}
+
+.game .enemy {
+ position: absolute;
+ margin-left: -20px;
+ margin-top: -18px;
+ width: 40px;
+}
+
+.game .player {
+ position: absolute;
+ margin-left: -20px;
+ width: 40px;
+}
+
+.game .laser {
+ position: absolute;
+ margin-left: -2.5px;
+ height: 30px;
+}
+
+.game .enemy-laser {
+ position: absolute;
+ margin-left: -2.5px;
+ height: 30px;
+}
+
+.congratulations {
+ display: none;
+ position: absolute;
+ background: #c7a526;
+ color: white;
+ padding: 20px 50px;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+ border-radius: 10px;
+ text-align: center;
+ animation: pop-in 1s;
+}
+
+.game-over {
+ display: none;
+ position: absolute;
+ background: #6b1818;
+ color: white;
+ padding: 20px 50px;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+ border-radius: 10px;
+ text-align: center;
+ animation: pop-in 1s;
+}
+
+.btn {
+ border: 2px solid #36bbf5;
+ border-radius: 3px;
+ box-shadow: 0 2px rgba(0, 0, 0, 0.15);
+ background: linear-gradient(
+ to bottom,
+ #fff 0%,
+ #fff 49%,
+ #f5f5f5 50%,
+ #eee 100%
+ );
+ padding: 10px 40px;
+ font: 14px sans-serif;
+}
+@keyframes pop-in {
+ 0% {
+ opacity: 0;
+ transform: translate(0, -100px);
+ }
+ 10% {
+ opacity: 1;
+ }
+ 50% {
+ transform: translate(0, 30px);
+ }
+ 100% {
+ transform: translate(0, 0);
+ }
+}
diff --git a/Projects/space-game/final/img/background-black.png b/Projects/space-game/final/img/background-black.png
new file mode 100644
index 000000000..82ddab992
Binary files /dev/null and b/Projects/space-game/final/img/background-black.png differ
diff --git a/Projects/space-game/final/img/background-blue.png b/Projects/space-game/final/img/background-blue.png
new file mode 100644
index 000000000..47642cd5d
Binary files /dev/null and b/Projects/space-game/final/img/background-blue.png differ
diff --git a/Projects/space-game/final/img/background-dark-purple.png b/Projects/space-game/final/img/background-dark-purple.png
new file mode 100644
index 000000000..d9c3fd42d
Binary files /dev/null and b/Projects/space-game/final/img/background-dark-purple.png differ
diff --git a/Projects/space-game/final/img/background-purple.png b/Projects/space-game/final/img/background-purple.png
new file mode 100644
index 000000000..5e8617769
Binary files /dev/null and b/Projects/space-game/final/img/background-purple.png differ
diff --git a/Projects/space-game/final/img/enemy-black-1.png b/Projects/space-game/final/img/enemy-black-1.png
new file mode 100644
index 000000000..bc2fa4c1c
Binary files /dev/null and b/Projects/space-game/final/img/enemy-black-1.png differ
diff --git a/Projects/space-game/final/img/enemy-black-2.png b/Projects/space-game/final/img/enemy-black-2.png
new file mode 100644
index 000000000..0e6b91c56
Binary files /dev/null and b/Projects/space-game/final/img/enemy-black-2.png differ
diff --git a/Projects/space-game/final/img/enemy-black-3.png b/Projects/space-game/final/img/enemy-black-3.png
new file mode 100644
index 000000000..dafec1b16
Binary files /dev/null and b/Projects/space-game/final/img/enemy-black-3.png differ
diff --git a/Projects/space-game/final/img/enemy-black-4.png b/Projects/space-game/final/img/enemy-black-4.png
new file mode 100644
index 000000000..a575c9d49
Binary files /dev/null and b/Projects/space-game/final/img/enemy-black-4.png differ
diff --git a/Projects/space-game/final/img/enemy-black-5.png b/Projects/space-game/final/img/enemy-black-5.png
new file mode 100644
index 000000000..739dcf0fe
Binary files /dev/null and b/Projects/space-game/final/img/enemy-black-5.png differ
diff --git a/Projects/space-game/final/img/enemy-blue-1.png b/Projects/space-game/final/img/enemy-blue-1.png
new file mode 100644
index 000000000..cedc0730d
Binary files /dev/null and b/Projects/space-game/final/img/enemy-blue-1.png differ
diff --git a/Projects/space-game/final/img/enemy-blue-2.png b/Projects/space-game/final/img/enemy-blue-2.png
new file mode 100644
index 000000000..bf3bd0c9f
Binary files /dev/null and b/Projects/space-game/final/img/enemy-blue-2.png differ
diff --git a/Projects/space-game/final/img/enemy-blue-3.png b/Projects/space-game/final/img/enemy-blue-3.png
new file mode 100644
index 000000000..9a63d03b0
Binary files /dev/null and b/Projects/space-game/final/img/enemy-blue-3.png differ
diff --git a/Projects/space-game/final/img/enemy-blue-4.png b/Projects/space-game/final/img/enemy-blue-4.png
new file mode 100644
index 000000000..d5670a3a5
Binary files /dev/null and b/Projects/space-game/final/img/enemy-blue-4.png differ
diff --git a/Projects/space-game/final/img/enemy-blue-5.png b/Projects/space-game/final/img/enemy-blue-5.png
new file mode 100644
index 000000000..e740509f7
Binary files /dev/null and b/Projects/space-game/final/img/enemy-blue-5.png differ
diff --git a/Projects/space-game/final/img/enemy-green-1.png b/Projects/space-game/final/img/enemy-green-1.png
new file mode 100644
index 000000000..064e29037
Binary files /dev/null and b/Projects/space-game/final/img/enemy-green-1.png differ
diff --git a/Projects/space-game/final/img/enemy-green-2.png b/Projects/space-game/final/img/enemy-green-2.png
new file mode 100644
index 000000000..5189d2459
Binary files /dev/null and b/Projects/space-game/final/img/enemy-green-2.png differ
diff --git a/Projects/space-game/final/img/enemy-green-3.png b/Projects/space-game/final/img/enemy-green-3.png
new file mode 100644
index 000000000..74e2bca68
Binary files /dev/null and b/Projects/space-game/final/img/enemy-green-3.png differ
diff --git a/Projects/space-game/final/img/enemy-green-4.png b/Projects/space-game/final/img/enemy-green-4.png
new file mode 100644
index 000000000..112e299f8
Binary files /dev/null and b/Projects/space-game/final/img/enemy-green-4.png differ
diff --git a/Projects/space-game/final/img/enemy-green-5.png b/Projects/space-game/final/img/enemy-green-5.png
new file mode 100644
index 000000000..59382705b
Binary files /dev/null and b/Projects/space-game/final/img/enemy-green-5.png differ
diff --git a/Projects/space-game/final/img/enemy-red-1.png b/Projects/space-game/final/img/enemy-red-1.png
new file mode 100644
index 000000000..fb0c0a2ca
Binary files /dev/null and b/Projects/space-game/final/img/enemy-red-1.png differ
diff --git a/Projects/space-game/final/img/enemy-red-2.png b/Projects/space-game/final/img/enemy-red-2.png
new file mode 100644
index 000000000..3ee96c571
Binary files /dev/null and b/Projects/space-game/final/img/enemy-red-2.png differ
diff --git a/Projects/space-game/final/img/enemy-red-3.png b/Projects/space-game/final/img/enemy-red-3.png
new file mode 100644
index 000000000..bc8eacd99
Binary files /dev/null and b/Projects/space-game/final/img/enemy-red-3.png differ
diff --git a/Projects/space-game/final/img/enemy-red-4.png b/Projects/space-game/final/img/enemy-red-4.png
new file mode 100644
index 000000000..a3216d4bf
Binary files /dev/null and b/Projects/space-game/final/img/enemy-red-4.png differ
diff --git a/Projects/space-game/final/img/enemy-red-5.png b/Projects/space-game/final/img/enemy-red-5.png
new file mode 100644
index 000000000..645cdf3c8
Binary files /dev/null and b/Projects/space-game/final/img/enemy-red-5.png differ
diff --git a/Projects/space-game/final/img/laser-blue-1.png b/Projects/space-game/final/img/laser-blue-1.png
new file mode 100644
index 000000000..b76aaf7a0
Binary files /dev/null and b/Projects/space-game/final/img/laser-blue-1.png differ
diff --git a/Projects/space-game/final/img/laser-blue-10.png b/Projects/space-game/final/img/laser-blue-10.png
new file mode 100644
index 000000000..dd6b766a4
Binary files /dev/null and b/Projects/space-game/final/img/laser-blue-10.png differ
diff --git a/Projects/space-game/final/img/laser-blue-11.png b/Projects/space-game/final/img/laser-blue-11.png
new file mode 100644
index 000000000..c06234958
Binary files /dev/null and b/Projects/space-game/final/img/laser-blue-11.png differ
diff --git a/Projects/space-game/final/img/laser-blue-12.png b/Projects/space-game/final/img/laser-blue-12.png
new file mode 100644
index 000000000..48b6103e1
Binary files /dev/null and b/Projects/space-game/final/img/laser-blue-12.png differ
diff --git a/Projects/space-game/final/img/laser-blue-13.png b/Projects/space-game/final/img/laser-blue-13.png
new file mode 100644
index 000000000..c5ec6a329
Binary files /dev/null and b/Projects/space-game/final/img/laser-blue-13.png differ
diff --git a/Projects/space-game/final/img/laser-blue-14.png b/Projects/space-game/final/img/laser-blue-14.png
new file mode 100644
index 000000000..254601e5f
Binary files /dev/null and b/Projects/space-game/final/img/laser-blue-14.png differ
diff --git a/Projects/space-game/final/img/laser-blue-15.png b/Projects/space-game/final/img/laser-blue-15.png
new file mode 100644
index 000000000..1ea1966d5
Binary files /dev/null and b/Projects/space-game/final/img/laser-blue-15.png differ
diff --git a/Projects/space-game/final/img/laser-blue-16.png b/Projects/space-game/final/img/laser-blue-16.png
new file mode 100644
index 000000000..1def98fb6
Binary files /dev/null and b/Projects/space-game/final/img/laser-blue-16.png differ
diff --git a/Projects/space-game/final/img/laser-blue-2.png b/Projects/space-game/final/img/laser-blue-2.png
new file mode 100644
index 000000000..3f923a394
Binary files /dev/null and b/Projects/space-game/final/img/laser-blue-2.png differ
diff --git a/Projects/space-game/final/img/laser-blue-3.png b/Projects/space-game/final/img/laser-blue-3.png
new file mode 100644
index 000000000..a16e9a82e
Binary files /dev/null and b/Projects/space-game/final/img/laser-blue-3.png differ
diff --git a/Projects/space-game/final/img/laser-blue-4.png b/Projects/space-game/final/img/laser-blue-4.png
new file mode 100644
index 000000000..6f3b9103a
Binary files /dev/null and b/Projects/space-game/final/img/laser-blue-4.png differ
diff --git a/Projects/space-game/final/img/laser-blue-5.png b/Projects/space-game/final/img/laser-blue-5.png
new file mode 100644
index 000000000..85cff7d5d
Binary files /dev/null and b/Projects/space-game/final/img/laser-blue-5.png differ
diff --git a/Projects/space-game/final/img/laser-blue-6.png b/Projects/space-game/final/img/laser-blue-6.png
new file mode 100644
index 000000000..a621875c5
Binary files /dev/null and b/Projects/space-game/final/img/laser-blue-6.png differ
diff --git a/Projects/space-game/final/img/laser-blue-7.png b/Projects/space-game/final/img/laser-blue-7.png
new file mode 100644
index 000000000..e1848bfc3
Binary files /dev/null and b/Projects/space-game/final/img/laser-blue-7.png differ
diff --git a/Projects/space-game/final/img/laser-blue-8.png b/Projects/space-game/final/img/laser-blue-8.png
new file mode 100644
index 000000000..7a463965c
Binary files /dev/null and b/Projects/space-game/final/img/laser-blue-8.png differ
diff --git a/Projects/space-game/final/img/laser-blue-9.png b/Projects/space-game/final/img/laser-blue-9.png
new file mode 100644
index 000000000..35624e649
Binary files /dev/null and b/Projects/space-game/final/img/laser-blue-9.png differ
diff --git a/Projects/space-game/final/img/laser-green-1.png b/Projects/space-game/final/img/laser-green-1.png
new file mode 100644
index 000000000..c9982b1ed
Binary files /dev/null and b/Projects/space-game/final/img/laser-green-1.png differ
diff --git a/Projects/space-game/final/img/laser-green-10.png b/Projects/space-game/final/img/laser-green-10.png
new file mode 100644
index 000000000..9c7974c69
Binary files /dev/null and b/Projects/space-game/final/img/laser-green-10.png differ
diff --git a/Projects/space-game/final/img/laser-green-11.png b/Projects/space-game/final/img/laser-green-11.png
new file mode 100644
index 000000000..100cddbd4
Binary files /dev/null and b/Projects/space-game/final/img/laser-green-11.png differ
diff --git a/Projects/space-game/final/img/laser-green-12.png b/Projects/space-game/final/img/laser-green-12.png
new file mode 100644
index 000000000..b05a72fa6
Binary files /dev/null and b/Projects/space-game/final/img/laser-green-12.png differ
diff --git a/Projects/space-game/final/img/laser-green-13.png b/Projects/space-game/final/img/laser-green-13.png
new file mode 100644
index 000000000..92cc35334
Binary files /dev/null and b/Projects/space-game/final/img/laser-green-13.png differ
diff --git a/Projects/space-game/final/img/laser-green-14.png b/Projects/space-game/final/img/laser-green-14.png
new file mode 100644
index 000000000..7abd3b29b
Binary files /dev/null and b/Projects/space-game/final/img/laser-green-14.png differ
diff --git a/Projects/space-game/final/img/laser-green-15.png b/Projects/space-game/final/img/laser-green-15.png
new file mode 100644
index 000000000..97a44051d
Binary files /dev/null and b/Projects/space-game/final/img/laser-green-15.png differ
diff --git a/Projects/space-game/final/img/laser-green-16.png b/Projects/space-game/final/img/laser-green-16.png
new file mode 100644
index 000000000..b73c12fb9
Binary files /dev/null and b/Projects/space-game/final/img/laser-green-16.png differ
diff --git a/Projects/space-game/final/img/laser-green-2.png b/Projects/space-game/final/img/laser-green-2.png
new file mode 100644
index 000000000..5cd78303e
Binary files /dev/null and b/Projects/space-game/final/img/laser-green-2.png differ
diff --git a/Projects/space-game/final/img/laser-green-3.png b/Projects/space-game/final/img/laser-green-3.png
new file mode 100644
index 000000000..d658547bc
Binary files /dev/null and b/Projects/space-game/final/img/laser-green-3.png differ
diff --git a/Projects/space-game/final/img/laser-green-4.png b/Projects/space-game/final/img/laser-green-4.png
new file mode 100644
index 000000000..61b04fb71
Binary files /dev/null and b/Projects/space-game/final/img/laser-green-4.png differ
diff --git a/Projects/space-game/final/img/laser-green-5.png b/Projects/space-game/final/img/laser-green-5.png
new file mode 100644
index 000000000..98ae6bee2
Binary files /dev/null and b/Projects/space-game/final/img/laser-green-5.png differ
diff --git a/Projects/space-game/final/img/laser-green-6.png b/Projects/space-game/final/img/laser-green-6.png
new file mode 100644
index 000000000..36dd94d46
Binary files /dev/null and b/Projects/space-game/final/img/laser-green-6.png differ
diff --git a/Projects/space-game/final/img/laser-green-7.png b/Projects/space-game/final/img/laser-green-7.png
new file mode 100644
index 000000000..0ae7c2d0c
Binary files /dev/null and b/Projects/space-game/final/img/laser-green-7.png differ
diff --git a/Projects/space-game/final/img/laser-green-8.png b/Projects/space-game/final/img/laser-green-8.png
new file mode 100644
index 000000000..0ff1d80f9
Binary files /dev/null and b/Projects/space-game/final/img/laser-green-8.png differ
diff --git a/Projects/space-game/final/img/laser-green-9.png b/Projects/space-game/final/img/laser-green-9.png
new file mode 100644
index 000000000..932056b9f
Binary files /dev/null and b/Projects/space-game/final/img/laser-green-9.png differ
diff --git a/Projects/space-game/final/img/laser-red-1.png b/Projects/space-game/final/img/laser-red-1.png
new file mode 100644
index 000000000..5e467b65b
Binary files /dev/null and b/Projects/space-game/final/img/laser-red-1.png differ
diff --git a/Projects/space-game/final/img/laser-red-10.png b/Projects/space-game/final/img/laser-red-10.png
new file mode 100644
index 000000000..0f85ba1b0
Binary files /dev/null and b/Projects/space-game/final/img/laser-red-10.png differ
diff --git a/Projects/space-game/final/img/laser-red-11.png b/Projects/space-game/final/img/laser-red-11.png
new file mode 100644
index 000000000..95e9c0a14
Binary files /dev/null and b/Projects/space-game/final/img/laser-red-11.png differ
diff --git a/Projects/space-game/final/img/laser-red-12.png b/Projects/space-game/final/img/laser-red-12.png
new file mode 100644
index 000000000..9f56da0ce
Binary files /dev/null and b/Projects/space-game/final/img/laser-red-12.png differ
diff --git a/Projects/space-game/final/img/laser-red-13.png b/Projects/space-game/final/img/laser-red-13.png
new file mode 100644
index 000000000..292bcc5d5
Binary files /dev/null and b/Projects/space-game/final/img/laser-red-13.png differ
diff --git a/Projects/space-game/final/img/laser-red-14.png b/Projects/space-game/final/img/laser-red-14.png
new file mode 100644
index 000000000..eaf8346de
Binary files /dev/null and b/Projects/space-game/final/img/laser-red-14.png differ
diff --git a/Projects/space-game/final/img/laser-red-15.png b/Projects/space-game/final/img/laser-red-15.png
new file mode 100644
index 000000000..7d27c2a94
Binary files /dev/null and b/Projects/space-game/final/img/laser-red-15.png differ
diff --git a/Projects/space-game/final/img/laser-red-16.png b/Projects/space-game/final/img/laser-red-16.png
new file mode 100644
index 000000000..b12fcd5d4
Binary files /dev/null and b/Projects/space-game/final/img/laser-red-16.png differ
diff --git a/Projects/space-game/final/img/laser-red-2.png b/Projects/space-game/final/img/laser-red-2.png
new file mode 100644
index 000000000..1127fffb6
Binary files /dev/null and b/Projects/space-game/final/img/laser-red-2.png differ
diff --git a/Projects/space-game/final/img/laser-red-3.png b/Projects/space-game/final/img/laser-red-3.png
new file mode 100644
index 000000000..bc1bb8730
Binary files /dev/null and b/Projects/space-game/final/img/laser-red-3.png differ
diff --git a/Projects/space-game/final/img/laser-red-4.png b/Projects/space-game/final/img/laser-red-4.png
new file mode 100644
index 000000000..fc3655b0f
Binary files /dev/null and b/Projects/space-game/final/img/laser-red-4.png differ
diff --git a/Projects/space-game/final/img/laser-red-5.png b/Projects/space-game/final/img/laser-red-5.png
new file mode 100644
index 000000000..46db2d77f
Binary files /dev/null and b/Projects/space-game/final/img/laser-red-5.png differ
diff --git a/Projects/space-game/final/img/laser-red-6.png b/Projects/space-game/final/img/laser-red-6.png
new file mode 100644
index 000000000..33614ae1a
Binary files /dev/null and b/Projects/space-game/final/img/laser-red-6.png differ
diff --git a/Projects/space-game/final/img/laser-red-7.png b/Projects/space-game/final/img/laser-red-7.png
new file mode 100644
index 000000000..23bab346f
Binary files /dev/null and b/Projects/space-game/final/img/laser-red-7.png differ
diff --git a/Projects/space-game/final/img/laser-red-8.png b/Projects/space-game/final/img/laser-red-8.png
new file mode 100644
index 000000000..5a2cce30e
Binary files /dev/null and b/Projects/space-game/final/img/laser-red-8.png differ
diff --git a/Projects/space-game/final/img/laser-red-9.png b/Projects/space-game/final/img/laser-red-9.png
new file mode 100644
index 000000000..7dc31dcc2
Binary files /dev/null and b/Projects/space-game/final/img/laser-red-9.png differ
diff --git a/Projects/space-game/final/img/player-blue-1.png b/Projects/space-game/final/img/player-blue-1.png
new file mode 100644
index 000000000..cecbbed97
Binary files /dev/null and b/Projects/space-game/final/img/player-blue-1.png differ
diff --git a/Projects/space-game/final/img/player-blue-2.png b/Projects/space-game/final/img/player-blue-2.png
new file mode 100644
index 000000000..e277114fd
Binary files /dev/null and b/Projects/space-game/final/img/player-blue-2.png differ
diff --git a/Projects/space-game/final/img/player-blue-3.png b/Projects/space-game/final/img/player-blue-3.png
new file mode 100644
index 000000000..f34faf066
Binary files /dev/null and b/Projects/space-game/final/img/player-blue-3.png differ
diff --git a/Projects/space-game/final/img/player-green-1.png b/Projects/space-game/final/img/player-green-1.png
new file mode 100644
index 000000000..2eb6f9c06
Binary files /dev/null and b/Projects/space-game/final/img/player-green-1.png differ
diff --git a/Projects/space-game/final/img/player-green-2.png b/Projects/space-game/final/img/player-green-2.png
new file mode 100644
index 000000000..72e18c7ff
Binary files /dev/null and b/Projects/space-game/final/img/player-green-2.png differ
diff --git a/Projects/space-game/final/img/player-green-3.png b/Projects/space-game/final/img/player-green-3.png
new file mode 100644
index 000000000..b853be42a
Binary files /dev/null and b/Projects/space-game/final/img/player-green-3.png differ
diff --git a/Projects/space-game/final/img/player-orange-1.png b/Projects/space-game/final/img/player-orange-1.png
new file mode 100644
index 000000000..3902283d4
Binary files /dev/null and b/Projects/space-game/final/img/player-orange-1.png differ
diff --git a/Projects/space-game/final/img/player-orange-2.png b/Projects/space-game/final/img/player-orange-2.png
new file mode 100644
index 000000000..82ddc8068
Binary files /dev/null and b/Projects/space-game/final/img/player-orange-2.png differ
diff --git a/Projects/space-game/final/img/player-orange-3.png b/Projects/space-game/final/img/player-orange-3.png
new file mode 100644
index 000000000..0b6b7ec68
Binary files /dev/null and b/Projects/space-game/final/img/player-orange-3.png differ
diff --git a/Projects/space-game/final/img/player-red-1.png b/Projects/space-game/final/img/player-red-1.png
new file mode 100644
index 000000000..3695e09e2
Binary files /dev/null and b/Projects/space-game/final/img/player-red-1.png differ
diff --git a/Projects/space-game/final/img/player-red-2.png b/Projects/space-game/final/img/player-red-2.png
new file mode 100644
index 000000000..8213e978d
Binary files /dev/null and b/Projects/space-game/final/img/player-red-2.png differ
diff --git a/Projects/space-game/final/img/player-red-3.png b/Projects/space-game/final/img/player-red-3.png
new file mode 100644
index 000000000..796e81d71
Binary files /dev/null and b/Projects/space-game/final/img/player-red-3.png differ
diff --git a/Projects/space-game/final/index.html b/Projects/space-game/final/index.html
new file mode 100644
index 000000000..1ebb1e695
--- /dev/null
+++ b/Projects/space-game/final/index.html
@@ -0,0 +1,32 @@
+
+
+
+
+
+
+ Space Game
+
+
+
+
+
+ Space Game
+
+
+
+
Congratulations!
+
You won the game
+
+
+
+
GAME OVER
+
You lost the game
+
+
+
+
+
+
+
+
+
diff --git a/Projects/space-game/final/js/game.js b/Projects/space-game/final/js/game.js
new file mode 100644
index 000000000..c9f2678ea
--- /dev/null
+++ b/Projects/space-game/final/js/game.js
@@ -0,0 +1,284 @@
+const KEY_CODE_LEFT = 37;
+const KEY_CODE_RIGHT = 39;
+const KEY_CODE_SPACE = 32;
+
+const GAME_WIDTH = 800;
+const GAME_HEIGHT = 600;
+
+const PLAYER_WIDTH = 20;
+const PLAYER_MAX_SPEED = 600.0;
+const LASER_MAX_SPEED = 300.0;
+const LASER_COOLDOWN = 0.5;
+
+const ENEMIES_PER_ROW = 10;
+const ENEMY_HORIZONTAL_PADDING = 80;
+const ENEMY_VERTICAL_PADDING = 70;
+const ENEMY_VERTICAL_SPACING = 80;
+const ENEMY_COOLDOWN = 5.0;
+
+const GAME_STATE = {
+ lastTime: Date.now(),
+ leftPressed: false,
+ rightPressed: false,
+ spacePressed: false,
+ playerX: 0,
+ playerY: 0,
+ playerCooldown: 0,
+ lasers: [],
+ enemies: [],
+ enemyLasers: [],
+ gameOver: false
+};
+
+function rectsIntersect(r1, r2) {
+ return !(
+ r2.left > r1.right ||
+ r2.right < r1.left ||
+ r2.top > r1.bottom ||
+ r2.bottom < r1.top
+ );
+}
+
+function clamp(v, min, max) {
+ if (v < min) {
+ return min;
+ } else if (v > max) {
+ return max;
+ } else {
+ return v;
+ }
+}
+
+function rand(min, max) {
+ if (min === undefined) min = 0;
+ if (max === undefined) max = 1;
+ return min + Math.random() * (max - min);
+}
+
+function setPosition(el, x, y) {
+ el.style.transform = `translate(${x}px, ${y}px)`;
+}
+
+function createPlayer(container) {
+ GAME_STATE.playerX = GAME_WIDTH / 2;
+ GAME_STATE.playerY = GAME_HEIGHT - 50;
+ const player = document.createElement("img");
+ player.src = "img/player-blue-1.png";
+ player.className = "player";
+ container.appendChild(player);
+ setPosition(player, GAME_STATE.playerX, GAME_STATE.playerY);
+}
+
+function updatePlayer(dt, container) {
+ if (GAME_STATE.leftPressed) {
+ GAME_STATE.playerX -= dt * PLAYER_MAX_SPEED;
+ }
+ if (GAME_STATE.rightPressed) {
+ GAME_STATE.playerX += dt * PLAYER_MAX_SPEED;
+ }
+
+ GAME_STATE.playerX = clamp(
+ GAME_STATE.playerX,
+ PLAYER_WIDTH,
+ GAME_WIDTH - PLAYER_WIDTH
+ );
+
+ if (GAME_STATE.spacePressed && GAME_STATE.playerCooldown <= 0) {
+ createLaser(container, GAME_STATE.playerX, GAME_STATE.playerY);
+ GAME_STATE.playerCooldown = LASER_COOLDOWN;
+ }
+ if (GAME_STATE.playerCooldown > 0) {
+ GAME_STATE.playerCooldown -= dt;
+ }
+
+ const player = document.querySelector(".player");
+ setPosition(player, GAME_STATE.playerX, GAME_STATE.playerY);
+}
+
+function destroyPlayer(container, player) {
+ container.removeChild(player);
+ GAME_STATE.gameOver = true;
+ const audio = new Audio("sound/sfx-lose.ogg");
+ audio.play();
+}
+
+function createLaser(container, x, y) {
+ const element = document.createElement("img");
+ element.src = "img/laser-blue-1.png";
+ element.className = "laser";
+ container.appendChild(element);
+ const laser = { x, y, element };
+ GAME_STATE.lasers.push(laser);
+ const audio = new Audio("sound/sfx-laser1.ogg");
+ audio.play();
+ setPosition(element, x, y);
+}
+
+function updateLasers(dt, container) {
+ const lasers = GAME_STATE.lasers;
+ for (let i = 0; i < lasers.length; i++) {
+ const laser = lasers[i];
+ laser.y -= dt * LASER_MAX_SPEED;
+ if (laser.y < 0) {
+ destroyLaser(container, laser);
+ }
+ setPosition(laser.element, laser.x, laser.y);
+ const r1 = laser.element.getBoundingClientRect();
+ const enemies = GAME_STATE.enemies;
+ for (let j = 0; j < enemies.length; j++) {
+ const enemy = enemies[j];
+ if (enemy.isDead) continue;
+ const r2 = enemy.element.getBoundingClientRect();
+ if (rectsIntersect(r1, r2)) {
+ // Enemy was hit
+ destroyEnemy(container, enemy);
+ destroyLaser(container, laser);
+ break;
+ }
+ }
+ }
+ GAME_STATE.lasers = GAME_STATE.lasers.filter(e => !e.isDead);
+}
+
+function destroyLaser(container, laser) {
+ container.removeChild(laser.element);
+ laser.isDead = true;
+}
+
+function createEnemy(container, x, y) {
+ const element = document.createElement("img");
+ element.src = "img/enemy-blue-1.png";
+ element.className = "enemy";
+ container.appendChild(element);
+ const enemy = {
+ x,
+ y,
+ element,
+ cooldown: rand(0.5, ENEMY_COOLDOWN)
+ };
+ GAME_STATE.enemies.push(enemy);
+ setPosition(element, x, y);
+}
+
+function updateEnemies(dt, container) {
+ const dx = Math.sin(GAME_STATE.lastTime / 1000.0) * 50;
+ const dy = Math.cos(GAME_STATE.lastTime / 1000.0) * 10;
+
+ const enemies = GAME_STATE.enemies;
+ for (let i = 0; i < enemies.length; i++) {
+ const enemy = enemies[i];
+ const x = enemy.x + dx;
+ const y = enemy.y + dy;
+ setPosition(enemy.element, x, y);
+ enemy.cooldown -= dt;
+ if (enemy.cooldown <= 0) {
+ createEnemyLaser(container, x, y);
+ enemy.cooldown = ENEMY_COOLDOWN;
+ }
+ }
+ GAME_STATE.enemies = GAME_STATE.enemies.filter(e => !e.isDead);
+}
+
+function destroyEnemy(container, enemy) {
+ container.removeChild(enemy.element);
+ enemy.isDead = true;
+}
+
+function createEnemyLaser(container, x, y) {
+ const element = document.createElement("img");
+ element.src = "img/laser-red-5.png";
+ element.className = "enemy-laser";
+ container.appendChild(element);
+ const laser = { x, y, element };
+ GAME_STATE.enemyLasers.push(laser);
+ setPosition(element, x, y);
+}
+
+function updateEnemyLasers(dt, container) {
+ const lasers = GAME_STATE.enemyLasers;
+ for (let i = 0; i < lasers.length; i++) {
+ const laser = lasers[i];
+ laser.y += dt * LASER_MAX_SPEED;
+ if (laser.y > GAME_HEIGHT) {
+ destroyLaser(container, laser);
+ }
+ setPosition(laser.element, laser.x, laser.y);
+ const r1 = laser.element.getBoundingClientRect();
+ const player = document.querySelector(".player");
+ const r2 = player.getBoundingClientRect();
+ if (rectsIntersect(r1, r2)) {
+ // Player was hit
+ destroyPlayer(container, player);
+ break;
+ }
+ }
+ GAME_STATE.enemyLasers = GAME_STATE.enemyLasers.filter(e => !e.isDead);
+}
+
+function init() {
+ const container = document.querySelector(".game");
+ createPlayer(container);
+
+ const enemySpacing = (GAME_WIDTH - ENEMY_HORIZONTAL_PADDING * 2) / (ENEMIES_PER_ROW - 1);
+ for (let j = 0; j < 3; j++) {
+ const y = ENEMY_VERTICAL_PADDING + j * ENEMY_VERTICAL_SPACING;
+ for (let i = 0; i < ENEMIES_PER_ROW; i++) {
+ const x = i * enemySpacing + ENEMY_HORIZONTAL_PADDING;
+ createEnemy(container, x, y);
+ }
+ }
+}
+
+function playerHasWon() {
+ return GAME_STATE.enemies.length === 0;
+}
+
+function update() {
+ const currentTime = Date.now();
+ const dt = (currentTime - GAME_STATE.lastTime) / 1000.0;
+
+ if (GAME_STATE.gameOver) {
+ document.querySelector(".game-over").style.display = "block";
+ return;
+ }
+
+ if (playerHasWon()) {
+ document.querySelector(".congratulations").style.display = "block";
+ return;
+ }
+
+ const container = document.querySelector(".game");
+ updatePlayer(dt, container);
+ updateLasers(dt, container);
+ updateEnemies(dt, container);
+ updateEnemyLasers(dt, container);
+
+ GAME_STATE.lastTime = currentTime;
+ window.requestAnimationFrame(update);
+}
+
+function onKeyDown(e) {
+ if (e.keyCode === KEY_CODE_LEFT) {
+ GAME_STATE.leftPressed = true;
+ } else if (e.keyCode === KEY_CODE_RIGHT) {
+ GAME_STATE.rightPressed = true;
+ } else if (e.keyCode === KEY_CODE_SPACE) {
+ GAME_STATE.spacePressed = true;
+ }
+}
+
+function onKeyUp(e) {
+ if (e.keyCode === KEY_CODE_LEFT) {
+ GAME_STATE.leftPressed = false;
+ } else if (e.keyCode === KEY_CODE_RIGHT) {
+ GAME_STATE.rightPressed = false;
+ } else if (e.keyCode === KEY_CODE_SPACE) {
+ GAME_STATE.spacePressed = false;
+ }
+}
+
+init();
+window.addEventListener("keydown", onKeyDown);
+window.addEventListener("keyup", onKeyUp);
+
+window.requestAnimationFrame(update);
diff --git a/Projects/space-game/final/sound/sfx-laser1.ogg b/Projects/space-game/final/sound/sfx-laser1.ogg
new file mode 100644
index 000000000..7a9a4d2f2
Binary files /dev/null and b/Projects/space-game/final/sound/sfx-laser1.ogg differ
diff --git a/Projects/space-game/final/sound/sfx-lose.ogg b/Projects/space-game/final/sound/sfx-lose.ogg
new file mode 100644
index 000000000..496968f8d
Binary files /dev/null and b/Projects/space-game/final/sound/sfx-lose.ogg differ
diff --git a/Projects/space-game/screenshot.png b/Projects/space-game/screenshot.png
new file mode 100644
index 000000000..e10f8edd9
Binary files /dev/null and b/Projects/space-game/screenshot.png differ
diff --git a/Projects/space-game/step01/README.md b/Projects/space-game/step01/README.md
new file mode 100644
index 000000000..a344bf4ab
--- /dev/null
+++ b/Projects/space-game/step01/README.md
@@ -0,0 +1,5 @@
+# Step 1 - Creating and moving the player
+
+[Play this version](https://rawgit.com/HackYourFutureBelgium/JavaScript2/master/Projects/space-game/step01/index.html)
+
+We create a player object using [`document.createElement`](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement). We listen to the window's `keypress` event to move the player. This results in choppy (but working!) movement, that we will fix in the next step.
diff --git a/Projects/space-game/step01/css/main.css b/Projects/space-game/step01/css/main.css
new file mode 100644
index 000000000..112ed105b
--- /dev/null
+++ b/Projects/space-game/step01/css/main.css
@@ -0,0 +1,135 @@
+html,
+body {
+ height: 100%;
+ overflow: hidden;
+}
+
+body {
+ margin: 0;
+ font: 16px sans-serif;
+}
+
+.wrap {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+}
+
+header {
+ text-align: center;
+ background: black;
+ color: #fff;
+ padding: 10px;
+}
+
+footer {
+ padding: 10px;
+ text-align: center;
+ font-size: 11px;
+ background: black;
+ color: white;
+}
+
+.game-wrapper {
+ flex: 1;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background: #222;
+}
+.game {
+ width: 800px;
+ height: 600px;
+ background: url(../img/background-blue.png);
+ animation: scroll-background 5s linear infinite;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+ position: relative;
+}
+
+@keyframes scroll-background {
+ from {
+ background-position-y: 0px;
+ }
+ to {
+ background-position-y: 256px;
+ }
+}
+
+.game .enemy {
+ position: absolute;
+ margin-left: -20px;
+ margin-top: -18px;
+ width: 40px;
+}
+
+.game .player {
+ position: absolute;
+ margin-left: -20px;
+ width: 40px;
+}
+
+.game .laser {
+ position: absolute;
+ margin-left: -2.5px;
+ height: 30px;
+}
+
+.game .enemy-laser {
+ position: absolute;
+ margin-left: -2.5px;
+ height: 30px;
+}
+
+.congratulations {
+ display: none;
+ position: absolute;
+ background: #c7a526;
+ color: white;
+ padding: 20px 50px;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+ border-radius: 10px;
+ text-align: center;
+ animation: pop-in 1s;
+}
+
+.game-over {
+ display: none;
+ position: absolute;
+ background: #6b1818;
+ color: white;
+ padding: 20px 50px;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+ border-radius: 10px;
+ text-align: center;
+ animation: pop-in 1s;
+}
+
+.btn {
+ border: 2px solid #36bbf5;
+ border-radius: 3px;
+ box-shadow: 0 2px rgba(0, 0, 0, 0.15);
+ background: linear-gradient(
+ to bottom,
+ #fff 0%,
+ #fff 49%,
+ #f5f5f5 50%,
+ #eee 100%
+ );
+ padding: 10px 40px;
+ font: 14px sans-serif;
+}
+@keyframes pop-in {
+ 0% {
+ opacity: 0;
+ transform: translate(0, -100px);
+ }
+ 10% {
+ opacity: 1;
+ }
+ 50% {
+ transform: translate(0, 30px);
+ }
+ 100% {
+ transform: translate(0, 0);
+ }
+}
diff --git a/Projects/space-game/step01/img/background-black.png b/Projects/space-game/step01/img/background-black.png
new file mode 100644
index 000000000..82ddab992
Binary files /dev/null and b/Projects/space-game/step01/img/background-black.png differ
diff --git a/Projects/space-game/step01/img/background-blue.png b/Projects/space-game/step01/img/background-blue.png
new file mode 100644
index 000000000..47642cd5d
Binary files /dev/null and b/Projects/space-game/step01/img/background-blue.png differ
diff --git a/Projects/space-game/step01/img/background-dark-purple.png b/Projects/space-game/step01/img/background-dark-purple.png
new file mode 100644
index 000000000..d9c3fd42d
Binary files /dev/null and b/Projects/space-game/step01/img/background-dark-purple.png differ
diff --git a/Projects/space-game/step01/img/background-purple.png b/Projects/space-game/step01/img/background-purple.png
new file mode 100644
index 000000000..5e8617769
Binary files /dev/null and b/Projects/space-game/step01/img/background-purple.png differ
diff --git a/Projects/space-game/step01/img/enemy-black-1.png b/Projects/space-game/step01/img/enemy-black-1.png
new file mode 100644
index 000000000..bc2fa4c1c
Binary files /dev/null and b/Projects/space-game/step01/img/enemy-black-1.png differ
diff --git a/Projects/space-game/step01/img/enemy-black-2.png b/Projects/space-game/step01/img/enemy-black-2.png
new file mode 100644
index 000000000..0e6b91c56
Binary files /dev/null and b/Projects/space-game/step01/img/enemy-black-2.png differ
diff --git a/Projects/space-game/step01/img/enemy-black-3.png b/Projects/space-game/step01/img/enemy-black-3.png
new file mode 100644
index 000000000..dafec1b16
Binary files /dev/null and b/Projects/space-game/step01/img/enemy-black-3.png differ
diff --git a/Projects/space-game/step01/img/enemy-black-4.png b/Projects/space-game/step01/img/enemy-black-4.png
new file mode 100644
index 000000000..a575c9d49
Binary files /dev/null and b/Projects/space-game/step01/img/enemy-black-4.png differ
diff --git a/Projects/space-game/step01/img/enemy-black-5.png b/Projects/space-game/step01/img/enemy-black-5.png
new file mode 100644
index 000000000..739dcf0fe
Binary files /dev/null and b/Projects/space-game/step01/img/enemy-black-5.png differ
diff --git a/Projects/space-game/step01/img/enemy-blue-1.png b/Projects/space-game/step01/img/enemy-blue-1.png
new file mode 100644
index 000000000..cedc0730d
Binary files /dev/null and b/Projects/space-game/step01/img/enemy-blue-1.png differ
diff --git a/Projects/space-game/step01/img/enemy-blue-2.png b/Projects/space-game/step01/img/enemy-blue-2.png
new file mode 100644
index 000000000..bf3bd0c9f
Binary files /dev/null and b/Projects/space-game/step01/img/enemy-blue-2.png differ
diff --git a/Projects/space-game/step01/img/enemy-blue-3.png b/Projects/space-game/step01/img/enemy-blue-3.png
new file mode 100644
index 000000000..9a63d03b0
Binary files /dev/null and b/Projects/space-game/step01/img/enemy-blue-3.png differ
diff --git a/Projects/space-game/step01/img/enemy-blue-4.png b/Projects/space-game/step01/img/enemy-blue-4.png
new file mode 100644
index 000000000..d5670a3a5
Binary files /dev/null and b/Projects/space-game/step01/img/enemy-blue-4.png differ
diff --git a/Projects/space-game/step01/img/enemy-blue-5.png b/Projects/space-game/step01/img/enemy-blue-5.png
new file mode 100644
index 000000000..e740509f7
Binary files /dev/null and b/Projects/space-game/step01/img/enemy-blue-5.png differ
diff --git a/Projects/space-game/step01/img/enemy-green-1.png b/Projects/space-game/step01/img/enemy-green-1.png
new file mode 100644
index 000000000..064e29037
Binary files /dev/null and b/Projects/space-game/step01/img/enemy-green-1.png differ
diff --git a/Projects/space-game/step01/img/enemy-green-2.png b/Projects/space-game/step01/img/enemy-green-2.png
new file mode 100644
index 000000000..5189d2459
Binary files /dev/null and b/Projects/space-game/step01/img/enemy-green-2.png differ
diff --git a/Projects/space-game/step01/img/enemy-green-3.png b/Projects/space-game/step01/img/enemy-green-3.png
new file mode 100644
index 000000000..74e2bca68
Binary files /dev/null and b/Projects/space-game/step01/img/enemy-green-3.png differ
diff --git a/Projects/space-game/step01/img/enemy-green-4.png b/Projects/space-game/step01/img/enemy-green-4.png
new file mode 100644
index 000000000..112e299f8
Binary files /dev/null and b/Projects/space-game/step01/img/enemy-green-4.png differ
diff --git a/Projects/space-game/step01/img/enemy-green-5.png b/Projects/space-game/step01/img/enemy-green-5.png
new file mode 100644
index 000000000..59382705b
Binary files /dev/null and b/Projects/space-game/step01/img/enemy-green-5.png differ
diff --git a/Projects/space-game/step01/img/enemy-red-1.png b/Projects/space-game/step01/img/enemy-red-1.png
new file mode 100644
index 000000000..fb0c0a2ca
Binary files /dev/null and b/Projects/space-game/step01/img/enemy-red-1.png differ
diff --git a/Projects/space-game/step01/img/enemy-red-2.png b/Projects/space-game/step01/img/enemy-red-2.png
new file mode 100644
index 000000000..3ee96c571
Binary files /dev/null and b/Projects/space-game/step01/img/enemy-red-2.png differ
diff --git a/Projects/space-game/step01/img/enemy-red-3.png b/Projects/space-game/step01/img/enemy-red-3.png
new file mode 100644
index 000000000..bc8eacd99
Binary files /dev/null and b/Projects/space-game/step01/img/enemy-red-3.png differ
diff --git a/Projects/space-game/step01/img/enemy-red-4.png b/Projects/space-game/step01/img/enemy-red-4.png
new file mode 100644
index 000000000..a3216d4bf
Binary files /dev/null and b/Projects/space-game/step01/img/enemy-red-4.png differ
diff --git a/Projects/space-game/step01/img/enemy-red-5.png b/Projects/space-game/step01/img/enemy-red-5.png
new file mode 100644
index 000000000..645cdf3c8
Binary files /dev/null and b/Projects/space-game/step01/img/enemy-red-5.png differ
diff --git a/Projects/space-game/step01/img/laser-blue-1.png b/Projects/space-game/step01/img/laser-blue-1.png
new file mode 100644
index 000000000..b76aaf7a0
Binary files /dev/null and b/Projects/space-game/step01/img/laser-blue-1.png differ
diff --git a/Projects/space-game/step01/img/laser-blue-10.png b/Projects/space-game/step01/img/laser-blue-10.png
new file mode 100644
index 000000000..dd6b766a4
Binary files /dev/null and b/Projects/space-game/step01/img/laser-blue-10.png differ
diff --git a/Projects/space-game/step01/img/laser-blue-11.png b/Projects/space-game/step01/img/laser-blue-11.png
new file mode 100644
index 000000000..c06234958
Binary files /dev/null and b/Projects/space-game/step01/img/laser-blue-11.png differ
diff --git a/Projects/space-game/step01/img/laser-blue-12.png b/Projects/space-game/step01/img/laser-blue-12.png
new file mode 100644
index 000000000..48b6103e1
Binary files /dev/null and b/Projects/space-game/step01/img/laser-blue-12.png differ
diff --git a/Projects/space-game/step01/img/laser-blue-13.png b/Projects/space-game/step01/img/laser-blue-13.png
new file mode 100644
index 000000000..c5ec6a329
Binary files /dev/null and b/Projects/space-game/step01/img/laser-blue-13.png differ
diff --git a/Projects/space-game/step01/img/laser-blue-14.png b/Projects/space-game/step01/img/laser-blue-14.png
new file mode 100644
index 000000000..254601e5f
Binary files /dev/null and b/Projects/space-game/step01/img/laser-blue-14.png differ
diff --git a/Projects/space-game/step01/img/laser-blue-15.png b/Projects/space-game/step01/img/laser-blue-15.png
new file mode 100644
index 000000000..1ea1966d5
Binary files /dev/null and b/Projects/space-game/step01/img/laser-blue-15.png differ
diff --git a/Projects/space-game/step01/img/laser-blue-16.png b/Projects/space-game/step01/img/laser-blue-16.png
new file mode 100644
index 000000000..1def98fb6
Binary files /dev/null and b/Projects/space-game/step01/img/laser-blue-16.png differ
diff --git a/Projects/space-game/step01/img/laser-blue-2.png b/Projects/space-game/step01/img/laser-blue-2.png
new file mode 100644
index 000000000..3f923a394
Binary files /dev/null and b/Projects/space-game/step01/img/laser-blue-2.png differ
diff --git a/Projects/space-game/step01/img/laser-blue-3.png b/Projects/space-game/step01/img/laser-blue-3.png
new file mode 100644
index 000000000..a16e9a82e
Binary files /dev/null and b/Projects/space-game/step01/img/laser-blue-3.png differ
diff --git a/Projects/space-game/step01/img/laser-blue-4.png b/Projects/space-game/step01/img/laser-blue-4.png
new file mode 100644
index 000000000..6f3b9103a
Binary files /dev/null and b/Projects/space-game/step01/img/laser-blue-4.png differ
diff --git a/Projects/space-game/step01/img/laser-blue-5.png b/Projects/space-game/step01/img/laser-blue-5.png
new file mode 100644
index 000000000..85cff7d5d
Binary files /dev/null and b/Projects/space-game/step01/img/laser-blue-5.png differ
diff --git a/Projects/space-game/step01/img/laser-blue-6.png b/Projects/space-game/step01/img/laser-blue-6.png
new file mode 100644
index 000000000..a621875c5
Binary files /dev/null and b/Projects/space-game/step01/img/laser-blue-6.png differ
diff --git a/Projects/space-game/step01/img/laser-blue-7.png b/Projects/space-game/step01/img/laser-blue-7.png
new file mode 100644
index 000000000..e1848bfc3
Binary files /dev/null and b/Projects/space-game/step01/img/laser-blue-7.png differ
diff --git a/Projects/space-game/step01/img/laser-blue-8.png b/Projects/space-game/step01/img/laser-blue-8.png
new file mode 100644
index 000000000..7a463965c
Binary files /dev/null and b/Projects/space-game/step01/img/laser-blue-8.png differ
diff --git a/Projects/space-game/step01/img/laser-blue-9.png b/Projects/space-game/step01/img/laser-blue-9.png
new file mode 100644
index 000000000..35624e649
Binary files /dev/null and b/Projects/space-game/step01/img/laser-blue-9.png differ
diff --git a/Projects/space-game/step01/img/laser-green-1.png b/Projects/space-game/step01/img/laser-green-1.png
new file mode 100644
index 000000000..c9982b1ed
Binary files /dev/null and b/Projects/space-game/step01/img/laser-green-1.png differ
diff --git a/Projects/space-game/step01/img/laser-green-10.png b/Projects/space-game/step01/img/laser-green-10.png
new file mode 100644
index 000000000..9c7974c69
Binary files /dev/null and b/Projects/space-game/step01/img/laser-green-10.png differ
diff --git a/Projects/space-game/step01/img/laser-green-11.png b/Projects/space-game/step01/img/laser-green-11.png
new file mode 100644
index 000000000..100cddbd4
Binary files /dev/null and b/Projects/space-game/step01/img/laser-green-11.png differ
diff --git a/Projects/space-game/step01/img/laser-green-12.png b/Projects/space-game/step01/img/laser-green-12.png
new file mode 100644
index 000000000..b05a72fa6
Binary files /dev/null and b/Projects/space-game/step01/img/laser-green-12.png differ
diff --git a/Projects/space-game/step01/img/laser-green-13.png b/Projects/space-game/step01/img/laser-green-13.png
new file mode 100644
index 000000000..92cc35334
Binary files /dev/null and b/Projects/space-game/step01/img/laser-green-13.png differ
diff --git a/Projects/space-game/step01/img/laser-green-14.png b/Projects/space-game/step01/img/laser-green-14.png
new file mode 100644
index 000000000..7abd3b29b
Binary files /dev/null and b/Projects/space-game/step01/img/laser-green-14.png differ
diff --git a/Projects/space-game/step01/img/laser-green-15.png b/Projects/space-game/step01/img/laser-green-15.png
new file mode 100644
index 000000000..97a44051d
Binary files /dev/null and b/Projects/space-game/step01/img/laser-green-15.png differ
diff --git a/Projects/space-game/step01/img/laser-green-16.png b/Projects/space-game/step01/img/laser-green-16.png
new file mode 100644
index 000000000..b73c12fb9
Binary files /dev/null and b/Projects/space-game/step01/img/laser-green-16.png differ
diff --git a/Projects/space-game/step01/img/laser-green-2.png b/Projects/space-game/step01/img/laser-green-2.png
new file mode 100644
index 000000000..5cd78303e
Binary files /dev/null and b/Projects/space-game/step01/img/laser-green-2.png differ
diff --git a/Projects/space-game/step01/img/laser-green-3.png b/Projects/space-game/step01/img/laser-green-3.png
new file mode 100644
index 000000000..d658547bc
Binary files /dev/null and b/Projects/space-game/step01/img/laser-green-3.png differ
diff --git a/Projects/space-game/step01/img/laser-green-4.png b/Projects/space-game/step01/img/laser-green-4.png
new file mode 100644
index 000000000..61b04fb71
Binary files /dev/null and b/Projects/space-game/step01/img/laser-green-4.png differ
diff --git a/Projects/space-game/step01/img/laser-green-5.png b/Projects/space-game/step01/img/laser-green-5.png
new file mode 100644
index 000000000..98ae6bee2
Binary files /dev/null and b/Projects/space-game/step01/img/laser-green-5.png differ
diff --git a/Projects/space-game/step01/img/laser-green-6.png b/Projects/space-game/step01/img/laser-green-6.png
new file mode 100644
index 000000000..36dd94d46
Binary files /dev/null and b/Projects/space-game/step01/img/laser-green-6.png differ
diff --git a/Projects/space-game/step01/img/laser-green-7.png b/Projects/space-game/step01/img/laser-green-7.png
new file mode 100644
index 000000000..0ae7c2d0c
Binary files /dev/null and b/Projects/space-game/step01/img/laser-green-7.png differ
diff --git a/Projects/space-game/step01/img/laser-green-8.png b/Projects/space-game/step01/img/laser-green-8.png
new file mode 100644
index 000000000..0ff1d80f9
Binary files /dev/null and b/Projects/space-game/step01/img/laser-green-8.png differ
diff --git a/Projects/space-game/step01/img/laser-green-9.png b/Projects/space-game/step01/img/laser-green-9.png
new file mode 100644
index 000000000..932056b9f
Binary files /dev/null and b/Projects/space-game/step01/img/laser-green-9.png differ
diff --git a/Projects/space-game/step01/img/laser-red-1.png b/Projects/space-game/step01/img/laser-red-1.png
new file mode 100644
index 000000000..5e467b65b
Binary files /dev/null and b/Projects/space-game/step01/img/laser-red-1.png differ
diff --git a/Projects/space-game/step01/img/laser-red-10.png b/Projects/space-game/step01/img/laser-red-10.png
new file mode 100644
index 000000000..0f85ba1b0
Binary files /dev/null and b/Projects/space-game/step01/img/laser-red-10.png differ
diff --git a/Projects/space-game/step01/img/laser-red-11.png b/Projects/space-game/step01/img/laser-red-11.png
new file mode 100644
index 000000000..95e9c0a14
Binary files /dev/null and b/Projects/space-game/step01/img/laser-red-11.png differ
diff --git a/Projects/space-game/step01/img/laser-red-12.png b/Projects/space-game/step01/img/laser-red-12.png
new file mode 100644
index 000000000..9f56da0ce
Binary files /dev/null and b/Projects/space-game/step01/img/laser-red-12.png differ
diff --git a/Projects/space-game/step01/img/laser-red-13.png b/Projects/space-game/step01/img/laser-red-13.png
new file mode 100644
index 000000000..292bcc5d5
Binary files /dev/null and b/Projects/space-game/step01/img/laser-red-13.png differ
diff --git a/Projects/space-game/step01/img/laser-red-14.png b/Projects/space-game/step01/img/laser-red-14.png
new file mode 100644
index 000000000..eaf8346de
Binary files /dev/null and b/Projects/space-game/step01/img/laser-red-14.png differ
diff --git a/Projects/space-game/step01/img/laser-red-15.png b/Projects/space-game/step01/img/laser-red-15.png
new file mode 100644
index 000000000..7d27c2a94
Binary files /dev/null and b/Projects/space-game/step01/img/laser-red-15.png differ
diff --git a/Projects/space-game/step01/img/laser-red-16.png b/Projects/space-game/step01/img/laser-red-16.png
new file mode 100644
index 000000000..b12fcd5d4
Binary files /dev/null and b/Projects/space-game/step01/img/laser-red-16.png differ
diff --git a/Projects/space-game/step01/img/laser-red-2.png b/Projects/space-game/step01/img/laser-red-2.png
new file mode 100644
index 000000000..1127fffb6
Binary files /dev/null and b/Projects/space-game/step01/img/laser-red-2.png differ
diff --git a/Projects/space-game/step01/img/laser-red-3.png b/Projects/space-game/step01/img/laser-red-3.png
new file mode 100644
index 000000000..bc1bb8730
Binary files /dev/null and b/Projects/space-game/step01/img/laser-red-3.png differ
diff --git a/Projects/space-game/step01/img/laser-red-4.png b/Projects/space-game/step01/img/laser-red-4.png
new file mode 100644
index 000000000..fc3655b0f
Binary files /dev/null and b/Projects/space-game/step01/img/laser-red-4.png differ
diff --git a/Projects/space-game/step01/img/laser-red-5.png b/Projects/space-game/step01/img/laser-red-5.png
new file mode 100644
index 000000000..46db2d77f
Binary files /dev/null and b/Projects/space-game/step01/img/laser-red-5.png differ
diff --git a/Projects/space-game/step01/img/laser-red-6.png b/Projects/space-game/step01/img/laser-red-6.png
new file mode 100644
index 000000000..33614ae1a
Binary files /dev/null and b/Projects/space-game/step01/img/laser-red-6.png differ
diff --git a/Projects/space-game/step01/img/laser-red-7.png b/Projects/space-game/step01/img/laser-red-7.png
new file mode 100644
index 000000000..23bab346f
Binary files /dev/null and b/Projects/space-game/step01/img/laser-red-7.png differ
diff --git a/Projects/space-game/step01/img/laser-red-8.png b/Projects/space-game/step01/img/laser-red-8.png
new file mode 100644
index 000000000..5a2cce30e
Binary files /dev/null and b/Projects/space-game/step01/img/laser-red-8.png differ
diff --git a/Projects/space-game/step01/img/laser-red-9.png b/Projects/space-game/step01/img/laser-red-9.png
new file mode 100644
index 000000000..7dc31dcc2
Binary files /dev/null and b/Projects/space-game/step01/img/laser-red-9.png differ
diff --git a/Projects/space-game/step01/img/player-blue-1.png b/Projects/space-game/step01/img/player-blue-1.png
new file mode 100644
index 000000000..cecbbed97
Binary files /dev/null and b/Projects/space-game/step01/img/player-blue-1.png differ
diff --git a/Projects/space-game/step01/img/player-blue-2.png b/Projects/space-game/step01/img/player-blue-2.png
new file mode 100644
index 000000000..e277114fd
Binary files /dev/null and b/Projects/space-game/step01/img/player-blue-2.png differ
diff --git a/Projects/space-game/step01/img/player-blue-3.png b/Projects/space-game/step01/img/player-blue-3.png
new file mode 100644
index 000000000..f34faf066
Binary files /dev/null and b/Projects/space-game/step01/img/player-blue-3.png differ
diff --git a/Projects/space-game/step01/img/player-green-1.png b/Projects/space-game/step01/img/player-green-1.png
new file mode 100644
index 000000000..2eb6f9c06
Binary files /dev/null and b/Projects/space-game/step01/img/player-green-1.png differ
diff --git a/Projects/space-game/step01/img/player-green-2.png b/Projects/space-game/step01/img/player-green-2.png
new file mode 100644
index 000000000..72e18c7ff
Binary files /dev/null and b/Projects/space-game/step01/img/player-green-2.png differ
diff --git a/Projects/space-game/step01/img/player-green-3.png b/Projects/space-game/step01/img/player-green-3.png
new file mode 100644
index 000000000..b853be42a
Binary files /dev/null and b/Projects/space-game/step01/img/player-green-3.png differ
diff --git a/Projects/space-game/step01/img/player-orange-1.png b/Projects/space-game/step01/img/player-orange-1.png
new file mode 100644
index 000000000..3902283d4
Binary files /dev/null and b/Projects/space-game/step01/img/player-orange-1.png differ
diff --git a/Projects/space-game/step01/img/player-orange-2.png b/Projects/space-game/step01/img/player-orange-2.png
new file mode 100644
index 000000000..82ddc8068
Binary files /dev/null and b/Projects/space-game/step01/img/player-orange-2.png differ
diff --git a/Projects/space-game/step01/img/player-orange-3.png b/Projects/space-game/step01/img/player-orange-3.png
new file mode 100644
index 000000000..0b6b7ec68
Binary files /dev/null and b/Projects/space-game/step01/img/player-orange-3.png differ
diff --git a/Projects/space-game/step01/img/player-red-1.png b/Projects/space-game/step01/img/player-red-1.png
new file mode 100644
index 000000000..3695e09e2
Binary files /dev/null and b/Projects/space-game/step01/img/player-red-1.png differ
diff --git a/Projects/space-game/step01/img/player-red-2.png b/Projects/space-game/step01/img/player-red-2.png
new file mode 100644
index 000000000..8213e978d
Binary files /dev/null and b/Projects/space-game/step01/img/player-red-2.png differ
diff --git a/Projects/space-game/step01/img/player-red-3.png b/Projects/space-game/step01/img/player-red-3.png
new file mode 100644
index 000000000..796e81d71
Binary files /dev/null and b/Projects/space-game/step01/img/player-red-3.png differ
diff --git a/Projects/space-game/step01/index.html b/Projects/space-game/step01/index.html
new file mode 100644
index 000000000..3f010b49b
--- /dev/null
+++ b/Projects/space-game/step01/index.html
@@ -0,0 +1,32 @@
+
+
+
+
+
+
+ Space Game
+
+
+
+
+
+ Space Game
+
+
+
+
Congratulations!
+
You won the game
+
+
+
+
GAME OVER
+
You lost the game
+
+
+
+
+
+
+
+
+
diff --git a/Projects/space-game/step01/js/game.js b/Projects/space-game/step01/js/game.js
new file mode 100644
index 000000000..75a8dc201
--- /dev/null
+++ b/Projects/space-game/step01/js/game.js
@@ -0,0 +1,41 @@
+const GAME_WIDTH = 800;
+const GAME_HEIGHT = 600;
+
+const GAME_STATE = {
+ playerX: 0,
+ playerY: 0,
+};
+
+function setPosition(el, x, y) {
+ el.style.transform = `translate(${x}px, ${y}px)`;
+}
+
+function createPlayer(container) {
+ GAME_STATE.playerX = GAME_WIDTH / 2;
+ GAME_STATE.playerY = GAME_HEIGHT - 50;
+ const player = document.createElement("img");
+ player.src = "img/player-blue-1.png";
+ player.className = "player";
+ container.appendChild(player);
+ setPosition(player, GAME_STATE.playerX, GAME_STATE.playerY);
+}
+
+function init() {
+ const container = document.querySelector(".game");
+ createPlayer(container);
+}
+
+function onKeyPress(e) {
+ if (e.key === 'a') {
+ GAME_STATE.playerX -= 5;
+ const player = document.querySelector(".player");
+ setPosition(player, GAME_STATE.playerX, GAME_STATE.playerY);
+ } else if (e.key === 'd') {
+ GAME_STATE.playerX += 5;
+ const player = document.querySelector(".player");
+ setPosition(player, GAME_STATE.playerX, GAME_STATE.playerY);
+ }
+}
+
+init();
+window.addEventListener("keypress", onKeyPress);
diff --git a/Projects/space-game/step01/sound/sfx-laser1.ogg b/Projects/space-game/step01/sound/sfx-laser1.ogg
new file mode 100644
index 000000000..7a9a4d2f2
Binary files /dev/null and b/Projects/space-game/step01/sound/sfx-laser1.ogg differ
diff --git a/Projects/space-game/step01/sound/sfx-lose.ogg b/Projects/space-game/step01/sound/sfx-lose.ogg
new file mode 100644
index 000000000..496968f8d
Binary files /dev/null and b/Projects/space-game/step01/sound/sfx-lose.ogg differ
diff --git a/Projects/space-game/step02/README.md b/Projects/space-game/step02/README.md
new file mode 100644
index 000000000..8488d447c
--- /dev/null
+++ b/Projects/space-game/step02/README.md
@@ -0,0 +1,7 @@
+# Step 2 - Correct key input
+
+[Play this version](https://rawgit.com/HackYourFutureBelgium/JavaScript2/master/Projects/space-game/step02/index.html)
+
+The `keypress` resulted in choppy input, and we also couldn't use the arrow keys. We now use `keyup` and `keydown` events to just note which keys are pressed and released.
+
+We introduce a main update loop that checks the state of the keys and reacts on them by moving the player. We also [clamp](https://en.wikipedia.org/wiki/Clamping_(graphics)) (constrain) the position of the player to the screen.
diff --git a/Projects/space-game/step02/css/main.css b/Projects/space-game/step02/css/main.css
new file mode 100644
index 000000000..112ed105b
--- /dev/null
+++ b/Projects/space-game/step02/css/main.css
@@ -0,0 +1,135 @@
+html,
+body {
+ height: 100%;
+ overflow: hidden;
+}
+
+body {
+ margin: 0;
+ font: 16px sans-serif;
+}
+
+.wrap {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+}
+
+header {
+ text-align: center;
+ background: black;
+ color: #fff;
+ padding: 10px;
+}
+
+footer {
+ padding: 10px;
+ text-align: center;
+ font-size: 11px;
+ background: black;
+ color: white;
+}
+
+.game-wrapper {
+ flex: 1;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background: #222;
+}
+.game {
+ width: 800px;
+ height: 600px;
+ background: url(../img/background-blue.png);
+ animation: scroll-background 5s linear infinite;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+ position: relative;
+}
+
+@keyframes scroll-background {
+ from {
+ background-position-y: 0px;
+ }
+ to {
+ background-position-y: 256px;
+ }
+}
+
+.game .enemy {
+ position: absolute;
+ margin-left: -20px;
+ margin-top: -18px;
+ width: 40px;
+}
+
+.game .player {
+ position: absolute;
+ margin-left: -20px;
+ width: 40px;
+}
+
+.game .laser {
+ position: absolute;
+ margin-left: -2.5px;
+ height: 30px;
+}
+
+.game .enemy-laser {
+ position: absolute;
+ margin-left: -2.5px;
+ height: 30px;
+}
+
+.congratulations {
+ display: none;
+ position: absolute;
+ background: #c7a526;
+ color: white;
+ padding: 20px 50px;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+ border-radius: 10px;
+ text-align: center;
+ animation: pop-in 1s;
+}
+
+.game-over {
+ display: none;
+ position: absolute;
+ background: #6b1818;
+ color: white;
+ padding: 20px 50px;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+ border-radius: 10px;
+ text-align: center;
+ animation: pop-in 1s;
+}
+
+.btn {
+ border: 2px solid #36bbf5;
+ border-radius: 3px;
+ box-shadow: 0 2px rgba(0, 0, 0, 0.15);
+ background: linear-gradient(
+ to bottom,
+ #fff 0%,
+ #fff 49%,
+ #f5f5f5 50%,
+ #eee 100%
+ );
+ padding: 10px 40px;
+ font: 14px sans-serif;
+}
+@keyframes pop-in {
+ 0% {
+ opacity: 0;
+ transform: translate(0, -100px);
+ }
+ 10% {
+ opacity: 1;
+ }
+ 50% {
+ transform: translate(0, 30px);
+ }
+ 100% {
+ transform: translate(0, 0);
+ }
+}
diff --git a/Projects/space-game/step02/img/background-black.png b/Projects/space-game/step02/img/background-black.png
new file mode 100644
index 000000000..82ddab992
Binary files /dev/null and b/Projects/space-game/step02/img/background-black.png differ
diff --git a/Projects/space-game/step02/img/background-blue.png b/Projects/space-game/step02/img/background-blue.png
new file mode 100644
index 000000000..47642cd5d
Binary files /dev/null and b/Projects/space-game/step02/img/background-blue.png differ
diff --git a/Projects/space-game/step02/img/background-dark-purple.png b/Projects/space-game/step02/img/background-dark-purple.png
new file mode 100644
index 000000000..d9c3fd42d
Binary files /dev/null and b/Projects/space-game/step02/img/background-dark-purple.png differ
diff --git a/Projects/space-game/step02/img/background-purple.png b/Projects/space-game/step02/img/background-purple.png
new file mode 100644
index 000000000..5e8617769
Binary files /dev/null and b/Projects/space-game/step02/img/background-purple.png differ
diff --git a/Projects/space-game/step02/img/enemy-black-1.png b/Projects/space-game/step02/img/enemy-black-1.png
new file mode 100644
index 000000000..bc2fa4c1c
Binary files /dev/null and b/Projects/space-game/step02/img/enemy-black-1.png differ
diff --git a/Projects/space-game/step02/img/enemy-black-2.png b/Projects/space-game/step02/img/enemy-black-2.png
new file mode 100644
index 000000000..0e6b91c56
Binary files /dev/null and b/Projects/space-game/step02/img/enemy-black-2.png differ
diff --git a/Projects/space-game/step02/img/enemy-black-3.png b/Projects/space-game/step02/img/enemy-black-3.png
new file mode 100644
index 000000000..dafec1b16
Binary files /dev/null and b/Projects/space-game/step02/img/enemy-black-3.png differ
diff --git a/Projects/space-game/step02/img/enemy-black-4.png b/Projects/space-game/step02/img/enemy-black-4.png
new file mode 100644
index 000000000..a575c9d49
Binary files /dev/null and b/Projects/space-game/step02/img/enemy-black-4.png differ
diff --git a/Projects/space-game/step02/img/enemy-black-5.png b/Projects/space-game/step02/img/enemy-black-5.png
new file mode 100644
index 000000000..739dcf0fe
Binary files /dev/null and b/Projects/space-game/step02/img/enemy-black-5.png differ
diff --git a/Projects/space-game/step02/img/enemy-blue-1.png b/Projects/space-game/step02/img/enemy-blue-1.png
new file mode 100644
index 000000000..cedc0730d
Binary files /dev/null and b/Projects/space-game/step02/img/enemy-blue-1.png differ
diff --git a/Projects/space-game/step02/img/enemy-blue-2.png b/Projects/space-game/step02/img/enemy-blue-2.png
new file mode 100644
index 000000000..bf3bd0c9f
Binary files /dev/null and b/Projects/space-game/step02/img/enemy-blue-2.png differ
diff --git a/Projects/space-game/step02/img/enemy-blue-3.png b/Projects/space-game/step02/img/enemy-blue-3.png
new file mode 100644
index 000000000..9a63d03b0
Binary files /dev/null and b/Projects/space-game/step02/img/enemy-blue-3.png differ
diff --git a/Projects/space-game/step02/img/enemy-blue-4.png b/Projects/space-game/step02/img/enemy-blue-4.png
new file mode 100644
index 000000000..d5670a3a5
Binary files /dev/null and b/Projects/space-game/step02/img/enemy-blue-4.png differ
diff --git a/Projects/space-game/step02/img/enemy-blue-5.png b/Projects/space-game/step02/img/enemy-blue-5.png
new file mode 100644
index 000000000..e740509f7
Binary files /dev/null and b/Projects/space-game/step02/img/enemy-blue-5.png differ
diff --git a/Projects/space-game/step02/img/enemy-green-1.png b/Projects/space-game/step02/img/enemy-green-1.png
new file mode 100644
index 000000000..064e29037
Binary files /dev/null and b/Projects/space-game/step02/img/enemy-green-1.png differ
diff --git a/Projects/space-game/step02/img/enemy-green-2.png b/Projects/space-game/step02/img/enemy-green-2.png
new file mode 100644
index 000000000..5189d2459
Binary files /dev/null and b/Projects/space-game/step02/img/enemy-green-2.png differ
diff --git a/Projects/space-game/step02/img/enemy-green-3.png b/Projects/space-game/step02/img/enemy-green-3.png
new file mode 100644
index 000000000..74e2bca68
Binary files /dev/null and b/Projects/space-game/step02/img/enemy-green-3.png differ
diff --git a/Projects/space-game/step02/img/enemy-green-4.png b/Projects/space-game/step02/img/enemy-green-4.png
new file mode 100644
index 000000000..112e299f8
Binary files /dev/null and b/Projects/space-game/step02/img/enemy-green-4.png differ
diff --git a/Projects/space-game/step02/img/enemy-green-5.png b/Projects/space-game/step02/img/enemy-green-5.png
new file mode 100644
index 000000000..59382705b
Binary files /dev/null and b/Projects/space-game/step02/img/enemy-green-5.png differ
diff --git a/Projects/space-game/step02/img/enemy-red-1.png b/Projects/space-game/step02/img/enemy-red-1.png
new file mode 100644
index 000000000..fb0c0a2ca
Binary files /dev/null and b/Projects/space-game/step02/img/enemy-red-1.png differ
diff --git a/Projects/space-game/step02/img/enemy-red-2.png b/Projects/space-game/step02/img/enemy-red-2.png
new file mode 100644
index 000000000..3ee96c571
Binary files /dev/null and b/Projects/space-game/step02/img/enemy-red-2.png differ
diff --git a/Projects/space-game/step02/img/enemy-red-3.png b/Projects/space-game/step02/img/enemy-red-3.png
new file mode 100644
index 000000000..bc8eacd99
Binary files /dev/null and b/Projects/space-game/step02/img/enemy-red-3.png differ
diff --git a/Projects/space-game/step02/img/enemy-red-4.png b/Projects/space-game/step02/img/enemy-red-4.png
new file mode 100644
index 000000000..a3216d4bf
Binary files /dev/null and b/Projects/space-game/step02/img/enemy-red-4.png differ
diff --git a/Projects/space-game/step02/img/enemy-red-5.png b/Projects/space-game/step02/img/enemy-red-5.png
new file mode 100644
index 000000000..645cdf3c8
Binary files /dev/null and b/Projects/space-game/step02/img/enemy-red-5.png differ
diff --git a/Projects/space-game/step02/img/laser-blue-1.png b/Projects/space-game/step02/img/laser-blue-1.png
new file mode 100644
index 000000000..b76aaf7a0
Binary files /dev/null and b/Projects/space-game/step02/img/laser-blue-1.png differ
diff --git a/Projects/space-game/step02/img/laser-blue-10.png b/Projects/space-game/step02/img/laser-blue-10.png
new file mode 100644
index 000000000..dd6b766a4
Binary files /dev/null and b/Projects/space-game/step02/img/laser-blue-10.png differ
diff --git a/Projects/space-game/step02/img/laser-blue-11.png b/Projects/space-game/step02/img/laser-blue-11.png
new file mode 100644
index 000000000..c06234958
Binary files /dev/null and b/Projects/space-game/step02/img/laser-blue-11.png differ
diff --git a/Projects/space-game/step02/img/laser-blue-12.png b/Projects/space-game/step02/img/laser-blue-12.png
new file mode 100644
index 000000000..48b6103e1
Binary files /dev/null and b/Projects/space-game/step02/img/laser-blue-12.png differ
diff --git a/Projects/space-game/step02/img/laser-blue-13.png b/Projects/space-game/step02/img/laser-blue-13.png
new file mode 100644
index 000000000..c5ec6a329
Binary files /dev/null and b/Projects/space-game/step02/img/laser-blue-13.png differ
diff --git a/Projects/space-game/step02/img/laser-blue-14.png b/Projects/space-game/step02/img/laser-blue-14.png
new file mode 100644
index 000000000..254601e5f
Binary files /dev/null and b/Projects/space-game/step02/img/laser-blue-14.png differ
diff --git a/Projects/space-game/step02/img/laser-blue-15.png b/Projects/space-game/step02/img/laser-blue-15.png
new file mode 100644
index 000000000..1ea1966d5
Binary files /dev/null and b/Projects/space-game/step02/img/laser-blue-15.png differ
diff --git a/Projects/space-game/step02/img/laser-blue-16.png b/Projects/space-game/step02/img/laser-blue-16.png
new file mode 100644
index 000000000..1def98fb6
Binary files /dev/null and b/Projects/space-game/step02/img/laser-blue-16.png differ
diff --git a/Projects/space-game/step02/img/laser-blue-2.png b/Projects/space-game/step02/img/laser-blue-2.png
new file mode 100644
index 000000000..3f923a394
Binary files /dev/null and b/Projects/space-game/step02/img/laser-blue-2.png differ
diff --git a/Projects/space-game/step02/img/laser-blue-3.png b/Projects/space-game/step02/img/laser-blue-3.png
new file mode 100644
index 000000000..a16e9a82e
Binary files /dev/null and b/Projects/space-game/step02/img/laser-blue-3.png differ
diff --git a/Projects/space-game/step02/img/laser-blue-4.png b/Projects/space-game/step02/img/laser-blue-4.png
new file mode 100644
index 000000000..6f3b9103a
Binary files /dev/null and b/Projects/space-game/step02/img/laser-blue-4.png differ
diff --git a/Projects/space-game/step02/img/laser-blue-5.png b/Projects/space-game/step02/img/laser-blue-5.png
new file mode 100644
index 000000000..85cff7d5d
Binary files /dev/null and b/Projects/space-game/step02/img/laser-blue-5.png differ
diff --git a/Projects/space-game/step02/img/laser-blue-6.png b/Projects/space-game/step02/img/laser-blue-6.png
new file mode 100644
index 000000000..a621875c5
Binary files /dev/null and b/Projects/space-game/step02/img/laser-blue-6.png differ
diff --git a/Projects/space-game/step02/img/laser-blue-7.png b/Projects/space-game/step02/img/laser-blue-7.png
new file mode 100644
index 000000000..e1848bfc3
Binary files /dev/null and b/Projects/space-game/step02/img/laser-blue-7.png differ
diff --git a/Projects/space-game/step02/img/laser-blue-8.png b/Projects/space-game/step02/img/laser-blue-8.png
new file mode 100644
index 000000000..7a463965c
Binary files /dev/null and b/Projects/space-game/step02/img/laser-blue-8.png differ
diff --git a/Projects/space-game/step02/img/laser-blue-9.png b/Projects/space-game/step02/img/laser-blue-9.png
new file mode 100644
index 000000000..35624e649
Binary files /dev/null and b/Projects/space-game/step02/img/laser-blue-9.png differ
diff --git a/Projects/space-game/step02/img/laser-green-1.png b/Projects/space-game/step02/img/laser-green-1.png
new file mode 100644
index 000000000..c9982b1ed
Binary files /dev/null and b/Projects/space-game/step02/img/laser-green-1.png differ
diff --git a/Projects/space-game/step02/img/laser-green-10.png b/Projects/space-game/step02/img/laser-green-10.png
new file mode 100644
index 000000000..9c7974c69
Binary files /dev/null and b/Projects/space-game/step02/img/laser-green-10.png differ
diff --git a/Projects/space-game/step02/img/laser-green-11.png b/Projects/space-game/step02/img/laser-green-11.png
new file mode 100644
index 000000000..100cddbd4
Binary files /dev/null and b/Projects/space-game/step02/img/laser-green-11.png differ
diff --git a/Projects/space-game/step02/img/laser-green-12.png b/Projects/space-game/step02/img/laser-green-12.png
new file mode 100644
index 000000000..b05a72fa6
Binary files /dev/null and b/Projects/space-game/step02/img/laser-green-12.png differ
diff --git a/Projects/space-game/step02/img/laser-green-13.png b/Projects/space-game/step02/img/laser-green-13.png
new file mode 100644
index 000000000..92cc35334
Binary files /dev/null and b/Projects/space-game/step02/img/laser-green-13.png differ
diff --git a/Projects/space-game/step02/img/laser-green-14.png b/Projects/space-game/step02/img/laser-green-14.png
new file mode 100644
index 000000000..7abd3b29b
Binary files /dev/null and b/Projects/space-game/step02/img/laser-green-14.png differ
diff --git a/Projects/space-game/step02/img/laser-green-15.png b/Projects/space-game/step02/img/laser-green-15.png
new file mode 100644
index 000000000..97a44051d
Binary files /dev/null and b/Projects/space-game/step02/img/laser-green-15.png differ
diff --git a/Projects/space-game/step02/img/laser-green-16.png b/Projects/space-game/step02/img/laser-green-16.png
new file mode 100644
index 000000000..b73c12fb9
Binary files /dev/null and b/Projects/space-game/step02/img/laser-green-16.png differ
diff --git a/Projects/space-game/step02/img/laser-green-2.png b/Projects/space-game/step02/img/laser-green-2.png
new file mode 100644
index 000000000..5cd78303e
Binary files /dev/null and b/Projects/space-game/step02/img/laser-green-2.png differ
diff --git a/Projects/space-game/step02/img/laser-green-3.png b/Projects/space-game/step02/img/laser-green-3.png
new file mode 100644
index 000000000..d658547bc
Binary files /dev/null and b/Projects/space-game/step02/img/laser-green-3.png differ
diff --git a/Projects/space-game/step02/img/laser-green-4.png b/Projects/space-game/step02/img/laser-green-4.png
new file mode 100644
index 000000000..61b04fb71
Binary files /dev/null and b/Projects/space-game/step02/img/laser-green-4.png differ
diff --git a/Projects/space-game/step02/img/laser-green-5.png b/Projects/space-game/step02/img/laser-green-5.png
new file mode 100644
index 000000000..98ae6bee2
Binary files /dev/null and b/Projects/space-game/step02/img/laser-green-5.png differ
diff --git a/Projects/space-game/step02/img/laser-green-6.png b/Projects/space-game/step02/img/laser-green-6.png
new file mode 100644
index 000000000..36dd94d46
Binary files /dev/null and b/Projects/space-game/step02/img/laser-green-6.png differ
diff --git a/Projects/space-game/step02/img/laser-green-7.png b/Projects/space-game/step02/img/laser-green-7.png
new file mode 100644
index 000000000..0ae7c2d0c
Binary files /dev/null and b/Projects/space-game/step02/img/laser-green-7.png differ
diff --git a/Projects/space-game/step02/img/laser-green-8.png b/Projects/space-game/step02/img/laser-green-8.png
new file mode 100644
index 000000000..0ff1d80f9
Binary files /dev/null and b/Projects/space-game/step02/img/laser-green-8.png differ
diff --git a/Projects/space-game/step02/img/laser-green-9.png b/Projects/space-game/step02/img/laser-green-9.png
new file mode 100644
index 000000000..932056b9f
Binary files /dev/null and b/Projects/space-game/step02/img/laser-green-9.png differ
diff --git a/Projects/space-game/step02/img/laser-red-1.png b/Projects/space-game/step02/img/laser-red-1.png
new file mode 100644
index 000000000..5e467b65b
Binary files /dev/null and b/Projects/space-game/step02/img/laser-red-1.png differ
diff --git a/Projects/space-game/step02/img/laser-red-10.png b/Projects/space-game/step02/img/laser-red-10.png
new file mode 100644
index 000000000..0f85ba1b0
Binary files /dev/null and b/Projects/space-game/step02/img/laser-red-10.png differ
diff --git a/Projects/space-game/step02/img/laser-red-11.png b/Projects/space-game/step02/img/laser-red-11.png
new file mode 100644
index 000000000..95e9c0a14
Binary files /dev/null and b/Projects/space-game/step02/img/laser-red-11.png differ
diff --git a/Projects/space-game/step02/img/laser-red-12.png b/Projects/space-game/step02/img/laser-red-12.png
new file mode 100644
index 000000000..9f56da0ce
Binary files /dev/null and b/Projects/space-game/step02/img/laser-red-12.png differ
diff --git a/Projects/space-game/step02/img/laser-red-13.png b/Projects/space-game/step02/img/laser-red-13.png
new file mode 100644
index 000000000..292bcc5d5
Binary files /dev/null and b/Projects/space-game/step02/img/laser-red-13.png differ
diff --git a/Projects/space-game/step02/img/laser-red-14.png b/Projects/space-game/step02/img/laser-red-14.png
new file mode 100644
index 000000000..eaf8346de
Binary files /dev/null and b/Projects/space-game/step02/img/laser-red-14.png differ
diff --git a/Projects/space-game/step02/img/laser-red-15.png b/Projects/space-game/step02/img/laser-red-15.png
new file mode 100644
index 000000000..7d27c2a94
Binary files /dev/null and b/Projects/space-game/step02/img/laser-red-15.png differ
diff --git a/Projects/space-game/step02/img/laser-red-16.png b/Projects/space-game/step02/img/laser-red-16.png
new file mode 100644
index 000000000..b12fcd5d4
Binary files /dev/null and b/Projects/space-game/step02/img/laser-red-16.png differ
diff --git a/Projects/space-game/step02/img/laser-red-2.png b/Projects/space-game/step02/img/laser-red-2.png
new file mode 100644
index 000000000..1127fffb6
Binary files /dev/null and b/Projects/space-game/step02/img/laser-red-2.png differ
diff --git a/Projects/space-game/step02/img/laser-red-3.png b/Projects/space-game/step02/img/laser-red-3.png
new file mode 100644
index 000000000..bc1bb8730
Binary files /dev/null and b/Projects/space-game/step02/img/laser-red-3.png differ
diff --git a/Projects/space-game/step02/img/laser-red-4.png b/Projects/space-game/step02/img/laser-red-4.png
new file mode 100644
index 000000000..fc3655b0f
Binary files /dev/null and b/Projects/space-game/step02/img/laser-red-4.png differ
diff --git a/Projects/space-game/step02/img/laser-red-5.png b/Projects/space-game/step02/img/laser-red-5.png
new file mode 100644
index 000000000..46db2d77f
Binary files /dev/null and b/Projects/space-game/step02/img/laser-red-5.png differ
diff --git a/Projects/space-game/step02/img/laser-red-6.png b/Projects/space-game/step02/img/laser-red-6.png
new file mode 100644
index 000000000..33614ae1a
Binary files /dev/null and b/Projects/space-game/step02/img/laser-red-6.png differ
diff --git a/Projects/space-game/step02/img/laser-red-7.png b/Projects/space-game/step02/img/laser-red-7.png
new file mode 100644
index 000000000..23bab346f
Binary files /dev/null and b/Projects/space-game/step02/img/laser-red-7.png differ
diff --git a/Projects/space-game/step02/img/laser-red-8.png b/Projects/space-game/step02/img/laser-red-8.png
new file mode 100644
index 000000000..5a2cce30e
Binary files /dev/null and b/Projects/space-game/step02/img/laser-red-8.png differ
diff --git a/Projects/space-game/step02/img/laser-red-9.png b/Projects/space-game/step02/img/laser-red-9.png
new file mode 100644
index 000000000..7dc31dcc2
Binary files /dev/null and b/Projects/space-game/step02/img/laser-red-9.png differ
diff --git a/Projects/space-game/step02/img/player-blue-1.png b/Projects/space-game/step02/img/player-blue-1.png
new file mode 100644
index 000000000..cecbbed97
Binary files /dev/null and b/Projects/space-game/step02/img/player-blue-1.png differ
diff --git a/Projects/space-game/step02/img/player-blue-2.png b/Projects/space-game/step02/img/player-blue-2.png
new file mode 100644
index 000000000..e277114fd
Binary files /dev/null and b/Projects/space-game/step02/img/player-blue-2.png differ
diff --git a/Projects/space-game/step02/img/player-blue-3.png b/Projects/space-game/step02/img/player-blue-3.png
new file mode 100644
index 000000000..f34faf066
Binary files /dev/null and b/Projects/space-game/step02/img/player-blue-3.png differ
diff --git a/Projects/space-game/step02/img/player-green-1.png b/Projects/space-game/step02/img/player-green-1.png
new file mode 100644
index 000000000..2eb6f9c06
Binary files /dev/null and b/Projects/space-game/step02/img/player-green-1.png differ
diff --git a/Projects/space-game/step02/img/player-green-2.png b/Projects/space-game/step02/img/player-green-2.png
new file mode 100644
index 000000000..72e18c7ff
Binary files /dev/null and b/Projects/space-game/step02/img/player-green-2.png differ
diff --git a/Projects/space-game/step02/img/player-green-3.png b/Projects/space-game/step02/img/player-green-3.png
new file mode 100644
index 000000000..b853be42a
Binary files /dev/null and b/Projects/space-game/step02/img/player-green-3.png differ
diff --git a/Projects/space-game/step02/img/player-orange-1.png b/Projects/space-game/step02/img/player-orange-1.png
new file mode 100644
index 000000000..3902283d4
Binary files /dev/null and b/Projects/space-game/step02/img/player-orange-1.png differ
diff --git a/Projects/space-game/step02/img/player-orange-2.png b/Projects/space-game/step02/img/player-orange-2.png
new file mode 100644
index 000000000..82ddc8068
Binary files /dev/null and b/Projects/space-game/step02/img/player-orange-2.png differ
diff --git a/Projects/space-game/step02/img/player-orange-3.png b/Projects/space-game/step02/img/player-orange-3.png
new file mode 100644
index 000000000..0b6b7ec68
Binary files /dev/null and b/Projects/space-game/step02/img/player-orange-3.png differ
diff --git a/Projects/space-game/step02/img/player-red-1.png b/Projects/space-game/step02/img/player-red-1.png
new file mode 100644
index 000000000..3695e09e2
Binary files /dev/null and b/Projects/space-game/step02/img/player-red-1.png differ
diff --git a/Projects/space-game/step02/img/player-red-2.png b/Projects/space-game/step02/img/player-red-2.png
new file mode 100644
index 000000000..8213e978d
Binary files /dev/null and b/Projects/space-game/step02/img/player-red-2.png differ
diff --git a/Projects/space-game/step02/img/player-red-3.png b/Projects/space-game/step02/img/player-red-3.png
new file mode 100644
index 000000000..796e81d71
Binary files /dev/null and b/Projects/space-game/step02/img/player-red-3.png differ
diff --git a/Projects/space-game/step02/index.html b/Projects/space-game/step02/index.html
new file mode 100644
index 000000000..f00a5c146
--- /dev/null
+++ b/Projects/space-game/step02/index.html
@@ -0,0 +1,32 @@
+
+
+
+
+
+
+ Space Game
+
+
+
+
+
+ Space Game
+
+
+
+
Congratulations!
+
You won the game
+
+
+
+
GAME OVER
+
You lost the game
+
+
+
+
+
+
+
+
+
diff --git a/Projects/space-game/step02/js/game.js b/Projects/space-game/step02/js/game.js
new file mode 100644
index 000000000..3c75ff2b4
--- /dev/null
+++ b/Projects/space-game/step02/js/game.js
@@ -0,0 +1,93 @@
+const KEY_CODE_LEFT = 37;
+const KEY_CODE_RIGHT = 39;
+const KEY_CODE_SPACE = 32;
+
+const GAME_WIDTH = 800;
+const GAME_HEIGHT = 600;
+
+const PLAYER_WIDTH = 20;
+
+const GAME_STATE = {
+ leftPressed: false,
+ rightPressed: false,
+ spacePressed: false,
+ playerX: 0,
+ playerY: 0,
+};
+
+function setPosition(el, x, y) {
+ el.style.transform = `translate(${x}px, ${y}px)`;
+}
+
+function clamp(v, min, max) {
+ if (v < min) {
+ return min;
+ } else if (v > max) {
+ return max;
+ } else {
+ return v;
+ }
+}
+
+function createPlayer(container) {
+ GAME_STATE.playerX = GAME_WIDTH / 2;
+ GAME_STATE.playerY = GAME_HEIGHT - 50;
+ const player = document.createElement("img");
+ player.src = "img/player-blue-1.png";
+ player.className = "player";
+ container.appendChild(player);
+ setPosition(player, GAME_STATE.playerX, GAME_STATE.playerY);
+}
+
+function updatePlayer() {
+ if (GAME_STATE.leftPressed) {
+ GAME_STATE.playerX -= 5;
+ }
+ if (GAME_STATE.rightPressed) {
+ GAME_STATE.playerX += 5;
+ }
+
+ GAME_STATE.playerX = clamp(
+ GAME_STATE.playerX,
+ PLAYER_WIDTH,
+ GAME_WIDTH - PLAYER_WIDTH
+ );
+
+ const player = document.querySelector(".player");
+ setPosition(player, GAME_STATE.playerX, GAME_STATE.playerY);
+}
+
+function init() {
+ const container = document.querySelector(".game");
+ createPlayer(container);
+}
+
+function update(e) {
+ updatePlayer();
+ window.requestAnimationFrame(update);
+}
+
+function onKeyDown(e) {
+ if (e.keyCode === KEY_CODE_LEFT) {
+ GAME_STATE.leftPressed = true;
+ } else if (e.keyCode === KEY_CODE_RIGHT) {
+ GAME_STATE.rightPressed = true;
+ } else if (e.keyCode === KEY_CODE_SPACE) {
+ GAME_STATE.spacePressed = true;
+ }
+}
+
+function onKeyUp(e) {
+ if (e.keyCode === KEY_CODE_LEFT) {
+ GAME_STATE.leftPressed = false;
+ } else if (e.keyCode === KEY_CODE_RIGHT) {
+ GAME_STATE.rightPressed = false;
+ } else if (e.keyCode === KEY_CODE_SPACE) {
+ GAME_STATE.spacePressed = false;
+ }
+}
+
+init();
+window.addEventListener("keydown", onKeyDown);
+window.addEventListener("keyup", onKeyUp);
+window.requestAnimationFrame(update);
diff --git a/Projects/space-game/step02/sound/sfx-laser1.ogg b/Projects/space-game/step02/sound/sfx-laser1.ogg
new file mode 100644
index 000000000..7a9a4d2f2
Binary files /dev/null and b/Projects/space-game/step02/sound/sfx-laser1.ogg differ
diff --git a/Projects/space-game/step02/sound/sfx-lose.ogg b/Projects/space-game/step02/sound/sfx-lose.ogg
new file mode 100644
index 000000000..496968f8d
Binary files /dev/null and b/Projects/space-game/step02/sound/sfx-lose.ogg differ
diff --git a/Projects/space-game/step03/README.md b/Projects/space-game/step03/README.md
new file mode 100644
index 000000000..2c622f564
--- /dev/null
+++ b/Projects/space-game/step03/README.md
@@ -0,0 +1,5 @@
+# Step 3 - Correct timing
+
+[Play this version](https://rawgit.com/HackYourFutureBelgium/JavaScript2/master/Projects/space-game/step03/index.html)
+
+Instead of always moving the player 5 pixels per frame, we base the movement on the elapsed time since the previous frame, also called the delta time.
diff --git a/Projects/space-game/step03/css/main.css b/Projects/space-game/step03/css/main.css
new file mode 100644
index 000000000..112ed105b
--- /dev/null
+++ b/Projects/space-game/step03/css/main.css
@@ -0,0 +1,135 @@
+html,
+body {
+ height: 100%;
+ overflow: hidden;
+}
+
+body {
+ margin: 0;
+ font: 16px sans-serif;
+}
+
+.wrap {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+}
+
+header {
+ text-align: center;
+ background: black;
+ color: #fff;
+ padding: 10px;
+}
+
+footer {
+ padding: 10px;
+ text-align: center;
+ font-size: 11px;
+ background: black;
+ color: white;
+}
+
+.game-wrapper {
+ flex: 1;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background: #222;
+}
+.game {
+ width: 800px;
+ height: 600px;
+ background: url(../img/background-blue.png);
+ animation: scroll-background 5s linear infinite;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+ position: relative;
+}
+
+@keyframes scroll-background {
+ from {
+ background-position-y: 0px;
+ }
+ to {
+ background-position-y: 256px;
+ }
+}
+
+.game .enemy {
+ position: absolute;
+ margin-left: -20px;
+ margin-top: -18px;
+ width: 40px;
+}
+
+.game .player {
+ position: absolute;
+ margin-left: -20px;
+ width: 40px;
+}
+
+.game .laser {
+ position: absolute;
+ margin-left: -2.5px;
+ height: 30px;
+}
+
+.game .enemy-laser {
+ position: absolute;
+ margin-left: -2.5px;
+ height: 30px;
+}
+
+.congratulations {
+ display: none;
+ position: absolute;
+ background: #c7a526;
+ color: white;
+ padding: 20px 50px;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+ border-radius: 10px;
+ text-align: center;
+ animation: pop-in 1s;
+}
+
+.game-over {
+ display: none;
+ position: absolute;
+ background: #6b1818;
+ color: white;
+ padding: 20px 50px;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+ border-radius: 10px;
+ text-align: center;
+ animation: pop-in 1s;
+}
+
+.btn {
+ border: 2px solid #36bbf5;
+ border-radius: 3px;
+ box-shadow: 0 2px rgba(0, 0, 0, 0.15);
+ background: linear-gradient(
+ to bottom,
+ #fff 0%,
+ #fff 49%,
+ #f5f5f5 50%,
+ #eee 100%
+ );
+ padding: 10px 40px;
+ font: 14px sans-serif;
+}
+@keyframes pop-in {
+ 0% {
+ opacity: 0;
+ transform: translate(0, -100px);
+ }
+ 10% {
+ opacity: 1;
+ }
+ 50% {
+ transform: translate(0, 30px);
+ }
+ 100% {
+ transform: translate(0, 0);
+ }
+}
diff --git a/Projects/space-game/step03/img/background-black.png b/Projects/space-game/step03/img/background-black.png
new file mode 100644
index 000000000..82ddab992
Binary files /dev/null and b/Projects/space-game/step03/img/background-black.png differ
diff --git a/Projects/space-game/step03/img/background-blue.png b/Projects/space-game/step03/img/background-blue.png
new file mode 100644
index 000000000..47642cd5d
Binary files /dev/null and b/Projects/space-game/step03/img/background-blue.png differ
diff --git a/Projects/space-game/step03/img/background-dark-purple.png b/Projects/space-game/step03/img/background-dark-purple.png
new file mode 100644
index 000000000..d9c3fd42d
Binary files /dev/null and b/Projects/space-game/step03/img/background-dark-purple.png differ
diff --git a/Projects/space-game/step03/img/background-purple.png b/Projects/space-game/step03/img/background-purple.png
new file mode 100644
index 000000000..5e8617769
Binary files /dev/null and b/Projects/space-game/step03/img/background-purple.png differ
diff --git a/Projects/space-game/step03/img/enemy-black-1.png b/Projects/space-game/step03/img/enemy-black-1.png
new file mode 100644
index 000000000..bc2fa4c1c
Binary files /dev/null and b/Projects/space-game/step03/img/enemy-black-1.png differ
diff --git a/Projects/space-game/step03/img/enemy-black-2.png b/Projects/space-game/step03/img/enemy-black-2.png
new file mode 100644
index 000000000..0e6b91c56
Binary files /dev/null and b/Projects/space-game/step03/img/enemy-black-2.png differ
diff --git a/Projects/space-game/step03/img/enemy-black-3.png b/Projects/space-game/step03/img/enemy-black-3.png
new file mode 100644
index 000000000..dafec1b16
Binary files /dev/null and b/Projects/space-game/step03/img/enemy-black-3.png differ
diff --git a/Projects/space-game/step03/img/enemy-black-4.png b/Projects/space-game/step03/img/enemy-black-4.png
new file mode 100644
index 000000000..a575c9d49
Binary files /dev/null and b/Projects/space-game/step03/img/enemy-black-4.png differ
diff --git a/Projects/space-game/step03/img/enemy-black-5.png b/Projects/space-game/step03/img/enemy-black-5.png
new file mode 100644
index 000000000..739dcf0fe
Binary files /dev/null and b/Projects/space-game/step03/img/enemy-black-5.png differ
diff --git a/Projects/space-game/step03/img/enemy-blue-1.png b/Projects/space-game/step03/img/enemy-blue-1.png
new file mode 100644
index 000000000..cedc0730d
Binary files /dev/null and b/Projects/space-game/step03/img/enemy-blue-1.png differ
diff --git a/Projects/space-game/step03/img/enemy-blue-2.png b/Projects/space-game/step03/img/enemy-blue-2.png
new file mode 100644
index 000000000..bf3bd0c9f
Binary files /dev/null and b/Projects/space-game/step03/img/enemy-blue-2.png differ
diff --git a/Projects/space-game/step03/img/enemy-blue-3.png b/Projects/space-game/step03/img/enemy-blue-3.png
new file mode 100644
index 000000000..9a63d03b0
Binary files /dev/null and b/Projects/space-game/step03/img/enemy-blue-3.png differ
diff --git a/Projects/space-game/step03/img/enemy-blue-4.png b/Projects/space-game/step03/img/enemy-blue-4.png
new file mode 100644
index 000000000..d5670a3a5
Binary files /dev/null and b/Projects/space-game/step03/img/enemy-blue-4.png differ
diff --git a/Projects/space-game/step03/img/enemy-blue-5.png b/Projects/space-game/step03/img/enemy-blue-5.png
new file mode 100644
index 000000000..e740509f7
Binary files /dev/null and b/Projects/space-game/step03/img/enemy-blue-5.png differ
diff --git a/Projects/space-game/step03/img/enemy-green-1.png b/Projects/space-game/step03/img/enemy-green-1.png
new file mode 100644
index 000000000..064e29037
Binary files /dev/null and b/Projects/space-game/step03/img/enemy-green-1.png differ
diff --git a/Projects/space-game/step03/img/enemy-green-2.png b/Projects/space-game/step03/img/enemy-green-2.png
new file mode 100644
index 000000000..5189d2459
Binary files /dev/null and b/Projects/space-game/step03/img/enemy-green-2.png differ
diff --git a/Projects/space-game/step03/img/enemy-green-3.png b/Projects/space-game/step03/img/enemy-green-3.png
new file mode 100644
index 000000000..74e2bca68
Binary files /dev/null and b/Projects/space-game/step03/img/enemy-green-3.png differ
diff --git a/Projects/space-game/step03/img/enemy-green-4.png b/Projects/space-game/step03/img/enemy-green-4.png
new file mode 100644
index 000000000..112e299f8
Binary files /dev/null and b/Projects/space-game/step03/img/enemy-green-4.png differ
diff --git a/Projects/space-game/step03/img/enemy-green-5.png b/Projects/space-game/step03/img/enemy-green-5.png
new file mode 100644
index 000000000..59382705b
Binary files /dev/null and b/Projects/space-game/step03/img/enemy-green-5.png differ
diff --git a/Projects/space-game/step03/img/enemy-red-1.png b/Projects/space-game/step03/img/enemy-red-1.png
new file mode 100644
index 000000000..fb0c0a2ca
Binary files /dev/null and b/Projects/space-game/step03/img/enemy-red-1.png differ
diff --git a/Projects/space-game/step03/img/enemy-red-2.png b/Projects/space-game/step03/img/enemy-red-2.png
new file mode 100644
index 000000000..3ee96c571
Binary files /dev/null and b/Projects/space-game/step03/img/enemy-red-2.png differ
diff --git a/Projects/space-game/step03/img/enemy-red-3.png b/Projects/space-game/step03/img/enemy-red-3.png
new file mode 100644
index 000000000..bc8eacd99
Binary files /dev/null and b/Projects/space-game/step03/img/enemy-red-3.png differ
diff --git a/Projects/space-game/step03/img/enemy-red-4.png b/Projects/space-game/step03/img/enemy-red-4.png
new file mode 100644
index 000000000..a3216d4bf
Binary files /dev/null and b/Projects/space-game/step03/img/enemy-red-4.png differ
diff --git a/Projects/space-game/step03/img/enemy-red-5.png b/Projects/space-game/step03/img/enemy-red-5.png
new file mode 100644
index 000000000..645cdf3c8
Binary files /dev/null and b/Projects/space-game/step03/img/enemy-red-5.png differ
diff --git a/Projects/space-game/step03/img/laser-blue-1.png b/Projects/space-game/step03/img/laser-blue-1.png
new file mode 100644
index 000000000..b76aaf7a0
Binary files /dev/null and b/Projects/space-game/step03/img/laser-blue-1.png differ
diff --git a/Projects/space-game/step03/img/laser-blue-10.png b/Projects/space-game/step03/img/laser-blue-10.png
new file mode 100644
index 000000000..dd6b766a4
Binary files /dev/null and b/Projects/space-game/step03/img/laser-blue-10.png differ
diff --git a/Projects/space-game/step03/img/laser-blue-11.png b/Projects/space-game/step03/img/laser-blue-11.png
new file mode 100644
index 000000000..c06234958
Binary files /dev/null and b/Projects/space-game/step03/img/laser-blue-11.png differ
diff --git a/Projects/space-game/step03/img/laser-blue-12.png b/Projects/space-game/step03/img/laser-blue-12.png
new file mode 100644
index 000000000..48b6103e1
Binary files /dev/null and b/Projects/space-game/step03/img/laser-blue-12.png differ
diff --git a/Projects/space-game/step03/img/laser-blue-13.png b/Projects/space-game/step03/img/laser-blue-13.png
new file mode 100644
index 000000000..c5ec6a329
Binary files /dev/null and b/Projects/space-game/step03/img/laser-blue-13.png differ
diff --git a/Projects/space-game/step03/img/laser-blue-14.png b/Projects/space-game/step03/img/laser-blue-14.png
new file mode 100644
index 000000000..254601e5f
Binary files /dev/null and b/Projects/space-game/step03/img/laser-blue-14.png differ
diff --git a/Projects/space-game/step03/img/laser-blue-15.png b/Projects/space-game/step03/img/laser-blue-15.png
new file mode 100644
index 000000000..1ea1966d5
Binary files /dev/null and b/Projects/space-game/step03/img/laser-blue-15.png differ
diff --git a/Projects/space-game/step03/img/laser-blue-16.png b/Projects/space-game/step03/img/laser-blue-16.png
new file mode 100644
index 000000000..1def98fb6
Binary files /dev/null and b/Projects/space-game/step03/img/laser-blue-16.png differ
diff --git a/Projects/space-game/step03/img/laser-blue-2.png b/Projects/space-game/step03/img/laser-blue-2.png
new file mode 100644
index 000000000..3f923a394
Binary files /dev/null and b/Projects/space-game/step03/img/laser-blue-2.png differ
diff --git a/Projects/space-game/step03/img/laser-blue-3.png b/Projects/space-game/step03/img/laser-blue-3.png
new file mode 100644
index 000000000..a16e9a82e
Binary files /dev/null and b/Projects/space-game/step03/img/laser-blue-3.png differ
diff --git a/Projects/space-game/step03/img/laser-blue-4.png b/Projects/space-game/step03/img/laser-blue-4.png
new file mode 100644
index 000000000..6f3b9103a
Binary files /dev/null and b/Projects/space-game/step03/img/laser-blue-4.png differ
diff --git a/Projects/space-game/step03/img/laser-blue-5.png b/Projects/space-game/step03/img/laser-blue-5.png
new file mode 100644
index 000000000..85cff7d5d
Binary files /dev/null and b/Projects/space-game/step03/img/laser-blue-5.png differ
diff --git a/Projects/space-game/step03/img/laser-blue-6.png b/Projects/space-game/step03/img/laser-blue-6.png
new file mode 100644
index 000000000..a621875c5
Binary files /dev/null and b/Projects/space-game/step03/img/laser-blue-6.png differ
diff --git a/Projects/space-game/step03/img/laser-blue-7.png b/Projects/space-game/step03/img/laser-blue-7.png
new file mode 100644
index 000000000..e1848bfc3
Binary files /dev/null and b/Projects/space-game/step03/img/laser-blue-7.png differ
diff --git a/Projects/space-game/step03/img/laser-blue-8.png b/Projects/space-game/step03/img/laser-blue-8.png
new file mode 100644
index 000000000..7a463965c
Binary files /dev/null and b/Projects/space-game/step03/img/laser-blue-8.png differ
diff --git a/Projects/space-game/step03/img/laser-blue-9.png b/Projects/space-game/step03/img/laser-blue-9.png
new file mode 100644
index 000000000..35624e649
Binary files /dev/null and b/Projects/space-game/step03/img/laser-blue-9.png differ
diff --git a/Projects/space-game/step03/img/laser-green-1.png b/Projects/space-game/step03/img/laser-green-1.png
new file mode 100644
index 000000000..c9982b1ed
Binary files /dev/null and b/Projects/space-game/step03/img/laser-green-1.png differ
diff --git a/Projects/space-game/step03/img/laser-green-10.png b/Projects/space-game/step03/img/laser-green-10.png
new file mode 100644
index 000000000..9c7974c69
Binary files /dev/null and b/Projects/space-game/step03/img/laser-green-10.png differ
diff --git a/Projects/space-game/step03/img/laser-green-11.png b/Projects/space-game/step03/img/laser-green-11.png
new file mode 100644
index 000000000..100cddbd4
Binary files /dev/null and b/Projects/space-game/step03/img/laser-green-11.png differ
diff --git a/Projects/space-game/step03/img/laser-green-12.png b/Projects/space-game/step03/img/laser-green-12.png
new file mode 100644
index 000000000..b05a72fa6
Binary files /dev/null and b/Projects/space-game/step03/img/laser-green-12.png differ
diff --git a/Projects/space-game/step03/img/laser-green-13.png b/Projects/space-game/step03/img/laser-green-13.png
new file mode 100644
index 000000000..92cc35334
Binary files /dev/null and b/Projects/space-game/step03/img/laser-green-13.png differ
diff --git a/Projects/space-game/step03/img/laser-green-14.png b/Projects/space-game/step03/img/laser-green-14.png
new file mode 100644
index 000000000..7abd3b29b
Binary files /dev/null and b/Projects/space-game/step03/img/laser-green-14.png differ
diff --git a/Projects/space-game/step03/img/laser-green-15.png b/Projects/space-game/step03/img/laser-green-15.png
new file mode 100644
index 000000000..97a44051d
Binary files /dev/null and b/Projects/space-game/step03/img/laser-green-15.png differ
diff --git a/Projects/space-game/step03/img/laser-green-16.png b/Projects/space-game/step03/img/laser-green-16.png
new file mode 100644
index 000000000..b73c12fb9
Binary files /dev/null and b/Projects/space-game/step03/img/laser-green-16.png differ
diff --git a/Projects/space-game/step03/img/laser-green-2.png b/Projects/space-game/step03/img/laser-green-2.png
new file mode 100644
index 000000000..5cd78303e
Binary files /dev/null and b/Projects/space-game/step03/img/laser-green-2.png differ
diff --git a/Projects/space-game/step03/img/laser-green-3.png b/Projects/space-game/step03/img/laser-green-3.png
new file mode 100644
index 000000000..d658547bc
Binary files /dev/null and b/Projects/space-game/step03/img/laser-green-3.png differ
diff --git a/Projects/space-game/step03/img/laser-green-4.png b/Projects/space-game/step03/img/laser-green-4.png
new file mode 100644
index 000000000..61b04fb71
Binary files /dev/null and b/Projects/space-game/step03/img/laser-green-4.png differ
diff --git a/Projects/space-game/step03/img/laser-green-5.png b/Projects/space-game/step03/img/laser-green-5.png
new file mode 100644
index 000000000..98ae6bee2
Binary files /dev/null and b/Projects/space-game/step03/img/laser-green-5.png differ
diff --git a/Projects/space-game/step03/img/laser-green-6.png b/Projects/space-game/step03/img/laser-green-6.png
new file mode 100644
index 000000000..36dd94d46
Binary files /dev/null and b/Projects/space-game/step03/img/laser-green-6.png differ
diff --git a/Projects/space-game/step03/img/laser-green-7.png b/Projects/space-game/step03/img/laser-green-7.png
new file mode 100644
index 000000000..0ae7c2d0c
Binary files /dev/null and b/Projects/space-game/step03/img/laser-green-7.png differ
diff --git a/Projects/space-game/step03/img/laser-green-8.png b/Projects/space-game/step03/img/laser-green-8.png
new file mode 100644
index 000000000..0ff1d80f9
Binary files /dev/null and b/Projects/space-game/step03/img/laser-green-8.png differ
diff --git a/Projects/space-game/step03/img/laser-green-9.png b/Projects/space-game/step03/img/laser-green-9.png
new file mode 100644
index 000000000..932056b9f
Binary files /dev/null and b/Projects/space-game/step03/img/laser-green-9.png differ
diff --git a/Projects/space-game/step03/img/laser-red-1.png b/Projects/space-game/step03/img/laser-red-1.png
new file mode 100644
index 000000000..5e467b65b
Binary files /dev/null and b/Projects/space-game/step03/img/laser-red-1.png differ
diff --git a/Projects/space-game/step03/img/laser-red-10.png b/Projects/space-game/step03/img/laser-red-10.png
new file mode 100644
index 000000000..0f85ba1b0
Binary files /dev/null and b/Projects/space-game/step03/img/laser-red-10.png differ
diff --git a/Projects/space-game/step03/img/laser-red-11.png b/Projects/space-game/step03/img/laser-red-11.png
new file mode 100644
index 000000000..95e9c0a14
Binary files /dev/null and b/Projects/space-game/step03/img/laser-red-11.png differ
diff --git a/Projects/space-game/step03/img/laser-red-12.png b/Projects/space-game/step03/img/laser-red-12.png
new file mode 100644
index 000000000..9f56da0ce
Binary files /dev/null and b/Projects/space-game/step03/img/laser-red-12.png differ
diff --git a/Projects/space-game/step03/img/laser-red-13.png b/Projects/space-game/step03/img/laser-red-13.png
new file mode 100644
index 000000000..292bcc5d5
Binary files /dev/null and b/Projects/space-game/step03/img/laser-red-13.png differ
diff --git a/Projects/space-game/step03/img/laser-red-14.png b/Projects/space-game/step03/img/laser-red-14.png
new file mode 100644
index 000000000..eaf8346de
Binary files /dev/null and b/Projects/space-game/step03/img/laser-red-14.png differ
diff --git a/Projects/space-game/step03/img/laser-red-15.png b/Projects/space-game/step03/img/laser-red-15.png
new file mode 100644
index 000000000..7d27c2a94
Binary files /dev/null and b/Projects/space-game/step03/img/laser-red-15.png differ
diff --git a/Projects/space-game/step03/img/laser-red-16.png b/Projects/space-game/step03/img/laser-red-16.png
new file mode 100644
index 000000000..b12fcd5d4
Binary files /dev/null and b/Projects/space-game/step03/img/laser-red-16.png differ
diff --git a/Projects/space-game/step03/img/laser-red-2.png b/Projects/space-game/step03/img/laser-red-2.png
new file mode 100644
index 000000000..1127fffb6
Binary files /dev/null and b/Projects/space-game/step03/img/laser-red-2.png differ
diff --git a/Projects/space-game/step03/img/laser-red-3.png b/Projects/space-game/step03/img/laser-red-3.png
new file mode 100644
index 000000000..bc1bb8730
Binary files /dev/null and b/Projects/space-game/step03/img/laser-red-3.png differ
diff --git a/Projects/space-game/step03/img/laser-red-4.png b/Projects/space-game/step03/img/laser-red-4.png
new file mode 100644
index 000000000..fc3655b0f
Binary files /dev/null and b/Projects/space-game/step03/img/laser-red-4.png differ
diff --git a/Projects/space-game/step03/img/laser-red-5.png b/Projects/space-game/step03/img/laser-red-5.png
new file mode 100644
index 000000000..46db2d77f
Binary files /dev/null and b/Projects/space-game/step03/img/laser-red-5.png differ
diff --git a/Projects/space-game/step03/img/laser-red-6.png b/Projects/space-game/step03/img/laser-red-6.png
new file mode 100644
index 000000000..33614ae1a
Binary files /dev/null and b/Projects/space-game/step03/img/laser-red-6.png differ
diff --git a/Projects/space-game/step03/img/laser-red-7.png b/Projects/space-game/step03/img/laser-red-7.png
new file mode 100644
index 000000000..23bab346f
Binary files /dev/null and b/Projects/space-game/step03/img/laser-red-7.png differ
diff --git a/Projects/space-game/step03/img/laser-red-8.png b/Projects/space-game/step03/img/laser-red-8.png
new file mode 100644
index 000000000..5a2cce30e
Binary files /dev/null and b/Projects/space-game/step03/img/laser-red-8.png differ
diff --git a/Projects/space-game/step03/img/laser-red-9.png b/Projects/space-game/step03/img/laser-red-9.png
new file mode 100644
index 000000000..7dc31dcc2
Binary files /dev/null and b/Projects/space-game/step03/img/laser-red-9.png differ
diff --git a/Projects/space-game/step03/img/player-blue-1.png b/Projects/space-game/step03/img/player-blue-1.png
new file mode 100644
index 000000000..cecbbed97
Binary files /dev/null and b/Projects/space-game/step03/img/player-blue-1.png differ
diff --git a/Projects/space-game/step03/img/player-blue-2.png b/Projects/space-game/step03/img/player-blue-2.png
new file mode 100644
index 000000000..e277114fd
Binary files /dev/null and b/Projects/space-game/step03/img/player-blue-2.png differ
diff --git a/Projects/space-game/step03/img/player-blue-3.png b/Projects/space-game/step03/img/player-blue-3.png
new file mode 100644
index 000000000..f34faf066
Binary files /dev/null and b/Projects/space-game/step03/img/player-blue-3.png differ
diff --git a/Projects/space-game/step03/img/player-green-1.png b/Projects/space-game/step03/img/player-green-1.png
new file mode 100644
index 000000000..2eb6f9c06
Binary files /dev/null and b/Projects/space-game/step03/img/player-green-1.png differ
diff --git a/Projects/space-game/step03/img/player-green-2.png b/Projects/space-game/step03/img/player-green-2.png
new file mode 100644
index 000000000..72e18c7ff
Binary files /dev/null and b/Projects/space-game/step03/img/player-green-2.png differ
diff --git a/Projects/space-game/step03/img/player-green-3.png b/Projects/space-game/step03/img/player-green-3.png
new file mode 100644
index 000000000..b853be42a
Binary files /dev/null and b/Projects/space-game/step03/img/player-green-3.png differ
diff --git a/Projects/space-game/step03/img/player-orange-1.png b/Projects/space-game/step03/img/player-orange-1.png
new file mode 100644
index 000000000..3902283d4
Binary files /dev/null and b/Projects/space-game/step03/img/player-orange-1.png differ
diff --git a/Projects/space-game/step03/img/player-orange-2.png b/Projects/space-game/step03/img/player-orange-2.png
new file mode 100644
index 000000000..82ddc8068
Binary files /dev/null and b/Projects/space-game/step03/img/player-orange-2.png differ
diff --git a/Projects/space-game/step03/img/player-orange-3.png b/Projects/space-game/step03/img/player-orange-3.png
new file mode 100644
index 000000000..0b6b7ec68
Binary files /dev/null and b/Projects/space-game/step03/img/player-orange-3.png differ
diff --git a/Projects/space-game/step03/img/player-red-1.png b/Projects/space-game/step03/img/player-red-1.png
new file mode 100644
index 000000000..3695e09e2
Binary files /dev/null and b/Projects/space-game/step03/img/player-red-1.png differ
diff --git a/Projects/space-game/step03/img/player-red-2.png b/Projects/space-game/step03/img/player-red-2.png
new file mode 100644
index 000000000..8213e978d
Binary files /dev/null and b/Projects/space-game/step03/img/player-red-2.png differ
diff --git a/Projects/space-game/step03/img/player-red-3.png b/Projects/space-game/step03/img/player-red-3.png
new file mode 100644
index 000000000..796e81d71
Binary files /dev/null and b/Projects/space-game/step03/img/player-red-3.png differ
diff --git a/Projects/space-game/step03/index.html b/Projects/space-game/step03/index.html
new file mode 100644
index 000000000..f00a5c146
--- /dev/null
+++ b/Projects/space-game/step03/index.html
@@ -0,0 +1,32 @@
+
+
+
+
+
+
+ Space Game
+
+
+
+
+
+ Space Game
+
+
+
+
Congratulations!
+
You won the game
+
+
+
+
GAME OVER
+
You lost the game
+
+
+
+
+
+
+
+
+
diff --git a/Projects/space-game/step03/js/game.js b/Projects/space-game/step03/js/game.js
new file mode 100644
index 000000000..8f1084217
--- /dev/null
+++ b/Projects/space-game/step03/js/game.js
@@ -0,0 +1,100 @@
+const KEY_CODE_LEFT = 37;
+const KEY_CODE_RIGHT = 39;
+const KEY_CODE_SPACE = 32;
+
+const GAME_WIDTH = 800;
+const GAME_HEIGHT = 600;
+
+const PLAYER_WIDTH = 20;
+const PLAYER_MAX_SPEED = 600.0;
+
+const GAME_STATE = {
+ lastTime: Date.now(),
+ leftPressed: false,
+ rightPressed: false,
+ spacePressed: false,
+ playerX: 0,
+ playerY: 0,
+};
+
+function setPosition(el, x, y) {
+ el.style.transform = `translate(${x}px, ${y}px)`;
+}
+
+function clamp(v, min, max) {
+ if (v < min) {
+ return min;
+ } else if (v > max) {
+ return max;
+ } else {
+ return v;
+ }
+}
+
+function createPlayer(container, x, y) {
+ GAME_STATE.playerX = GAME_WIDTH / 2;
+ GAME_STATE.playerY = GAME_HEIGHT - 50;
+ const player = document.createElement("img");
+ player.src = "img/player-blue-1.png";
+ player.className = "player";
+ container.appendChild(player);
+ setPosition(player, GAME_STATE.playerX, GAME_STATE.playerY);
+}
+
+function updatePlayer(dt) {
+ if (GAME_STATE.leftPressed) {
+ GAME_STATE.playerX -= dt * PLAYER_MAX_SPEED;
+ }
+ if (GAME_STATE.rightPressed) {
+ GAME_STATE.playerX += dt * PLAYER_MAX_SPEED;
+ }
+
+ GAME_STATE.playerX = clamp(
+ GAME_STATE.playerX,
+ PLAYER_WIDTH,
+ GAME_WIDTH - PLAYER_WIDTH
+ );
+
+ const player = document.querySelector(".player");
+ setPosition(player, GAME_STATE.playerX, GAME_STATE.playerY);
+}
+
+function init() {
+ const container = document.querySelector(".game");
+ createPlayer(container);
+}
+
+function update(e) {
+ const currentTime = Date.now();
+ const dt = (currentTime - GAME_STATE.lastTime) / 1000.0;
+
+ updatePlayer(dt);
+
+ GAME_STATE.lastTime = currentTime;
+ window.requestAnimationFrame(update);
+}
+
+function onKeyDown(e) {
+ if (e.keyCode === KEY_CODE_LEFT) {
+ GAME_STATE.leftPressed = true;
+ } else if (e.keyCode === KEY_CODE_RIGHT) {
+ GAME_STATE.rightPressed = true;
+ } else if (e.keyCode === KEY_CODE_SPACE) {
+ GAME_STATE.spacePressed = true;
+ }
+}
+
+function onKeyUp(e) {
+ if (e.keyCode === KEY_CODE_LEFT) {
+ GAME_STATE.leftPressed = false;
+ } else if (e.keyCode === KEY_CODE_RIGHT) {
+ GAME_STATE.rightPressed = false;
+ } else if (e.keyCode === KEY_CODE_SPACE) {
+ GAME_STATE.spacePressed = false;
+ }
+}
+
+init();
+window.addEventListener("keydown", onKeyDown);
+window.addEventListener("keyup", onKeyUp);
+window.requestAnimationFrame(update);
diff --git a/Projects/space-game/step03/sound/sfx-laser1.ogg b/Projects/space-game/step03/sound/sfx-laser1.ogg
new file mode 100644
index 000000000..7a9a4d2f2
Binary files /dev/null and b/Projects/space-game/step03/sound/sfx-laser1.ogg differ
diff --git a/Projects/space-game/step03/sound/sfx-lose.ogg b/Projects/space-game/step03/sound/sfx-lose.ogg
new file mode 100644
index 000000000..496968f8d
Binary files /dev/null and b/Projects/space-game/step03/sound/sfx-lose.ogg differ
diff --git a/Projects/space-game/step04/README.md b/Projects/space-game/step04/README.md
new file mode 100644
index 000000000..d3cfed9b5
--- /dev/null
+++ b/Projects/space-game/step04/README.md
@@ -0,0 +1,15 @@
+# Step 4 - Firing lasers
+
+[Play this version](https://rawgit.com/HackYourFutureBelgium/JavaScript2/master/Projects/space-game/step04/index.html)
+
+This is a big step — we can now let our player fire lasers!
+
+We create a new laser element using `document.createElement`, just like we did with the player element. We append it to a custom array called `lasers` so that we can update them later.
+
+Every frame we go through our array and move each laser a certain position up (negative Y). The amount is related to the elapsed time (`dt`) and the maximum speed of the laser, in seconds (`LASER_MAX_SPEED`).
+
+We can use the same `setPosition` function we used for the player. The player and laser objects have the same properties (they're both DOM elements), so JavaScript treats them the same.
+
+We notice we can't fire every frame, but only after a certain amount of time has elapsed. This is what we call "cooldown". We set a value for the cooldown and subtract the elapsed time value from it every frame. Once it reaches zero, and the spacebar is pressed, we can fire again.
+
+We also note that our lasers remain in the document, even when they disappear offscreen. We need to handle this in the next step.
diff --git a/Projects/space-game/step04/css/main.css b/Projects/space-game/step04/css/main.css
new file mode 100644
index 000000000..112ed105b
--- /dev/null
+++ b/Projects/space-game/step04/css/main.css
@@ -0,0 +1,135 @@
+html,
+body {
+ height: 100%;
+ overflow: hidden;
+}
+
+body {
+ margin: 0;
+ font: 16px sans-serif;
+}
+
+.wrap {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+}
+
+header {
+ text-align: center;
+ background: black;
+ color: #fff;
+ padding: 10px;
+}
+
+footer {
+ padding: 10px;
+ text-align: center;
+ font-size: 11px;
+ background: black;
+ color: white;
+}
+
+.game-wrapper {
+ flex: 1;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background: #222;
+}
+.game {
+ width: 800px;
+ height: 600px;
+ background: url(../img/background-blue.png);
+ animation: scroll-background 5s linear infinite;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+ position: relative;
+}
+
+@keyframes scroll-background {
+ from {
+ background-position-y: 0px;
+ }
+ to {
+ background-position-y: 256px;
+ }
+}
+
+.game .enemy {
+ position: absolute;
+ margin-left: -20px;
+ margin-top: -18px;
+ width: 40px;
+}
+
+.game .player {
+ position: absolute;
+ margin-left: -20px;
+ width: 40px;
+}
+
+.game .laser {
+ position: absolute;
+ margin-left: -2.5px;
+ height: 30px;
+}
+
+.game .enemy-laser {
+ position: absolute;
+ margin-left: -2.5px;
+ height: 30px;
+}
+
+.congratulations {
+ display: none;
+ position: absolute;
+ background: #c7a526;
+ color: white;
+ padding: 20px 50px;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+ border-radius: 10px;
+ text-align: center;
+ animation: pop-in 1s;
+}
+
+.game-over {
+ display: none;
+ position: absolute;
+ background: #6b1818;
+ color: white;
+ padding: 20px 50px;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+ border-radius: 10px;
+ text-align: center;
+ animation: pop-in 1s;
+}
+
+.btn {
+ border: 2px solid #36bbf5;
+ border-radius: 3px;
+ box-shadow: 0 2px rgba(0, 0, 0, 0.15);
+ background: linear-gradient(
+ to bottom,
+ #fff 0%,
+ #fff 49%,
+ #f5f5f5 50%,
+ #eee 100%
+ );
+ padding: 10px 40px;
+ font: 14px sans-serif;
+}
+@keyframes pop-in {
+ 0% {
+ opacity: 0;
+ transform: translate(0, -100px);
+ }
+ 10% {
+ opacity: 1;
+ }
+ 50% {
+ transform: translate(0, 30px);
+ }
+ 100% {
+ transform: translate(0, 0);
+ }
+}
diff --git a/Projects/space-game/step04/img/background-black.png b/Projects/space-game/step04/img/background-black.png
new file mode 100644
index 000000000..82ddab992
Binary files /dev/null and b/Projects/space-game/step04/img/background-black.png differ
diff --git a/Projects/space-game/step04/img/background-blue.png b/Projects/space-game/step04/img/background-blue.png
new file mode 100644
index 000000000..47642cd5d
Binary files /dev/null and b/Projects/space-game/step04/img/background-blue.png differ
diff --git a/Projects/space-game/step04/img/background-dark-purple.png b/Projects/space-game/step04/img/background-dark-purple.png
new file mode 100644
index 000000000..d9c3fd42d
Binary files /dev/null and b/Projects/space-game/step04/img/background-dark-purple.png differ
diff --git a/Projects/space-game/step04/img/background-purple.png b/Projects/space-game/step04/img/background-purple.png
new file mode 100644
index 000000000..5e8617769
Binary files /dev/null and b/Projects/space-game/step04/img/background-purple.png differ
diff --git a/Projects/space-game/step04/img/enemy-black-1.png b/Projects/space-game/step04/img/enemy-black-1.png
new file mode 100644
index 000000000..bc2fa4c1c
Binary files /dev/null and b/Projects/space-game/step04/img/enemy-black-1.png differ
diff --git a/Projects/space-game/step04/img/enemy-black-2.png b/Projects/space-game/step04/img/enemy-black-2.png
new file mode 100644
index 000000000..0e6b91c56
Binary files /dev/null and b/Projects/space-game/step04/img/enemy-black-2.png differ
diff --git a/Projects/space-game/step04/img/enemy-black-3.png b/Projects/space-game/step04/img/enemy-black-3.png
new file mode 100644
index 000000000..dafec1b16
Binary files /dev/null and b/Projects/space-game/step04/img/enemy-black-3.png differ
diff --git a/Projects/space-game/step04/img/enemy-black-4.png b/Projects/space-game/step04/img/enemy-black-4.png
new file mode 100644
index 000000000..a575c9d49
Binary files /dev/null and b/Projects/space-game/step04/img/enemy-black-4.png differ
diff --git a/Projects/space-game/step04/img/enemy-black-5.png b/Projects/space-game/step04/img/enemy-black-5.png
new file mode 100644
index 000000000..739dcf0fe
Binary files /dev/null and b/Projects/space-game/step04/img/enemy-black-5.png differ
diff --git a/Projects/space-game/step04/img/enemy-blue-1.png b/Projects/space-game/step04/img/enemy-blue-1.png
new file mode 100644
index 000000000..cedc0730d
Binary files /dev/null and b/Projects/space-game/step04/img/enemy-blue-1.png differ
diff --git a/Projects/space-game/step04/img/enemy-blue-2.png b/Projects/space-game/step04/img/enemy-blue-2.png
new file mode 100644
index 000000000..bf3bd0c9f
Binary files /dev/null and b/Projects/space-game/step04/img/enemy-blue-2.png differ
diff --git a/Projects/space-game/step04/img/enemy-blue-3.png b/Projects/space-game/step04/img/enemy-blue-3.png
new file mode 100644
index 000000000..9a63d03b0
Binary files /dev/null and b/Projects/space-game/step04/img/enemy-blue-3.png differ
diff --git a/Projects/space-game/step04/img/enemy-blue-4.png b/Projects/space-game/step04/img/enemy-blue-4.png
new file mode 100644
index 000000000..d5670a3a5
Binary files /dev/null and b/Projects/space-game/step04/img/enemy-blue-4.png differ
diff --git a/Projects/space-game/step04/img/enemy-blue-5.png b/Projects/space-game/step04/img/enemy-blue-5.png
new file mode 100644
index 000000000..e740509f7
Binary files /dev/null and b/Projects/space-game/step04/img/enemy-blue-5.png differ
diff --git a/Projects/space-game/step04/img/enemy-green-1.png b/Projects/space-game/step04/img/enemy-green-1.png
new file mode 100644
index 000000000..064e29037
Binary files /dev/null and b/Projects/space-game/step04/img/enemy-green-1.png differ
diff --git a/Projects/space-game/step04/img/enemy-green-2.png b/Projects/space-game/step04/img/enemy-green-2.png
new file mode 100644
index 000000000..5189d2459
Binary files /dev/null and b/Projects/space-game/step04/img/enemy-green-2.png differ
diff --git a/Projects/space-game/step04/img/enemy-green-3.png b/Projects/space-game/step04/img/enemy-green-3.png
new file mode 100644
index 000000000..74e2bca68
Binary files /dev/null and b/Projects/space-game/step04/img/enemy-green-3.png differ
diff --git a/Projects/space-game/step04/img/enemy-green-4.png b/Projects/space-game/step04/img/enemy-green-4.png
new file mode 100644
index 000000000..112e299f8
Binary files /dev/null and b/Projects/space-game/step04/img/enemy-green-4.png differ
diff --git a/Projects/space-game/step04/img/enemy-green-5.png b/Projects/space-game/step04/img/enemy-green-5.png
new file mode 100644
index 000000000..59382705b
Binary files /dev/null and b/Projects/space-game/step04/img/enemy-green-5.png differ
diff --git a/Projects/space-game/step04/img/enemy-red-1.png b/Projects/space-game/step04/img/enemy-red-1.png
new file mode 100644
index 000000000..fb0c0a2ca
Binary files /dev/null and b/Projects/space-game/step04/img/enemy-red-1.png differ
diff --git a/Projects/space-game/step04/img/enemy-red-2.png b/Projects/space-game/step04/img/enemy-red-2.png
new file mode 100644
index 000000000..3ee96c571
Binary files /dev/null and b/Projects/space-game/step04/img/enemy-red-2.png differ
diff --git a/Projects/space-game/step04/img/enemy-red-3.png b/Projects/space-game/step04/img/enemy-red-3.png
new file mode 100644
index 000000000..bc8eacd99
Binary files /dev/null and b/Projects/space-game/step04/img/enemy-red-3.png differ
diff --git a/Projects/space-game/step04/img/enemy-red-4.png b/Projects/space-game/step04/img/enemy-red-4.png
new file mode 100644
index 000000000..a3216d4bf
Binary files /dev/null and b/Projects/space-game/step04/img/enemy-red-4.png differ
diff --git a/Projects/space-game/step04/img/enemy-red-5.png b/Projects/space-game/step04/img/enemy-red-5.png
new file mode 100644
index 000000000..645cdf3c8
Binary files /dev/null and b/Projects/space-game/step04/img/enemy-red-5.png differ
diff --git a/Projects/space-game/step04/img/laser-blue-1.png b/Projects/space-game/step04/img/laser-blue-1.png
new file mode 100644
index 000000000..b76aaf7a0
Binary files /dev/null and b/Projects/space-game/step04/img/laser-blue-1.png differ
diff --git a/Projects/space-game/step04/img/laser-blue-10.png b/Projects/space-game/step04/img/laser-blue-10.png
new file mode 100644
index 000000000..dd6b766a4
Binary files /dev/null and b/Projects/space-game/step04/img/laser-blue-10.png differ
diff --git a/Projects/space-game/step04/img/laser-blue-11.png b/Projects/space-game/step04/img/laser-blue-11.png
new file mode 100644
index 000000000..c06234958
Binary files /dev/null and b/Projects/space-game/step04/img/laser-blue-11.png differ
diff --git a/Projects/space-game/step04/img/laser-blue-12.png b/Projects/space-game/step04/img/laser-blue-12.png
new file mode 100644
index 000000000..48b6103e1
Binary files /dev/null and b/Projects/space-game/step04/img/laser-blue-12.png differ
diff --git a/Projects/space-game/step04/img/laser-blue-13.png b/Projects/space-game/step04/img/laser-blue-13.png
new file mode 100644
index 000000000..c5ec6a329
Binary files /dev/null and b/Projects/space-game/step04/img/laser-blue-13.png differ
diff --git a/Projects/space-game/step04/img/laser-blue-14.png b/Projects/space-game/step04/img/laser-blue-14.png
new file mode 100644
index 000000000..254601e5f
Binary files /dev/null and b/Projects/space-game/step04/img/laser-blue-14.png differ
diff --git a/Projects/space-game/step04/img/laser-blue-15.png b/Projects/space-game/step04/img/laser-blue-15.png
new file mode 100644
index 000000000..1ea1966d5
Binary files /dev/null and b/Projects/space-game/step04/img/laser-blue-15.png differ
diff --git a/Projects/space-game/step04/img/laser-blue-16.png b/Projects/space-game/step04/img/laser-blue-16.png
new file mode 100644
index 000000000..1def98fb6
Binary files /dev/null and b/Projects/space-game/step04/img/laser-blue-16.png differ
diff --git a/Projects/space-game/step04/img/laser-blue-2.png b/Projects/space-game/step04/img/laser-blue-2.png
new file mode 100644
index 000000000..3f923a394
Binary files /dev/null and b/Projects/space-game/step04/img/laser-blue-2.png differ
diff --git a/Projects/space-game/step04/img/laser-blue-3.png b/Projects/space-game/step04/img/laser-blue-3.png
new file mode 100644
index 000000000..a16e9a82e
Binary files /dev/null and b/Projects/space-game/step04/img/laser-blue-3.png differ
diff --git a/Projects/space-game/step04/img/laser-blue-4.png b/Projects/space-game/step04/img/laser-blue-4.png
new file mode 100644
index 000000000..6f3b9103a
Binary files /dev/null and b/Projects/space-game/step04/img/laser-blue-4.png differ
diff --git a/Projects/space-game/step04/img/laser-blue-5.png b/Projects/space-game/step04/img/laser-blue-5.png
new file mode 100644
index 000000000..85cff7d5d
Binary files /dev/null and b/Projects/space-game/step04/img/laser-blue-5.png differ
diff --git a/Projects/space-game/step04/img/laser-blue-6.png b/Projects/space-game/step04/img/laser-blue-6.png
new file mode 100644
index 000000000..a621875c5
Binary files /dev/null and b/Projects/space-game/step04/img/laser-blue-6.png differ
diff --git a/Projects/space-game/step04/img/laser-blue-7.png b/Projects/space-game/step04/img/laser-blue-7.png
new file mode 100644
index 000000000..e1848bfc3
Binary files /dev/null and b/Projects/space-game/step04/img/laser-blue-7.png differ
diff --git a/Projects/space-game/step04/img/laser-blue-8.png b/Projects/space-game/step04/img/laser-blue-8.png
new file mode 100644
index 000000000..7a463965c
Binary files /dev/null and b/Projects/space-game/step04/img/laser-blue-8.png differ
diff --git a/Projects/space-game/step04/img/laser-blue-9.png b/Projects/space-game/step04/img/laser-blue-9.png
new file mode 100644
index 000000000..35624e649
Binary files /dev/null and b/Projects/space-game/step04/img/laser-blue-9.png differ
diff --git a/Projects/space-game/step04/img/laser-green-1.png b/Projects/space-game/step04/img/laser-green-1.png
new file mode 100644
index 000000000..c9982b1ed
Binary files /dev/null and b/Projects/space-game/step04/img/laser-green-1.png differ
diff --git a/Projects/space-game/step04/img/laser-green-10.png b/Projects/space-game/step04/img/laser-green-10.png
new file mode 100644
index 000000000..9c7974c69
Binary files /dev/null and b/Projects/space-game/step04/img/laser-green-10.png differ
diff --git a/Projects/space-game/step04/img/laser-green-11.png b/Projects/space-game/step04/img/laser-green-11.png
new file mode 100644
index 000000000..100cddbd4
Binary files /dev/null and b/Projects/space-game/step04/img/laser-green-11.png differ
diff --git a/Projects/space-game/step04/img/laser-green-12.png b/Projects/space-game/step04/img/laser-green-12.png
new file mode 100644
index 000000000..b05a72fa6
Binary files /dev/null and b/Projects/space-game/step04/img/laser-green-12.png differ
diff --git a/Projects/space-game/step04/img/laser-green-13.png b/Projects/space-game/step04/img/laser-green-13.png
new file mode 100644
index 000000000..92cc35334
Binary files /dev/null and b/Projects/space-game/step04/img/laser-green-13.png differ
diff --git a/Projects/space-game/step04/img/laser-green-14.png b/Projects/space-game/step04/img/laser-green-14.png
new file mode 100644
index 000000000..7abd3b29b
Binary files /dev/null and b/Projects/space-game/step04/img/laser-green-14.png differ
diff --git a/Projects/space-game/step04/img/laser-green-15.png b/Projects/space-game/step04/img/laser-green-15.png
new file mode 100644
index 000000000..97a44051d
Binary files /dev/null and b/Projects/space-game/step04/img/laser-green-15.png differ
diff --git a/Projects/space-game/step04/img/laser-green-16.png b/Projects/space-game/step04/img/laser-green-16.png
new file mode 100644
index 000000000..b73c12fb9
Binary files /dev/null and b/Projects/space-game/step04/img/laser-green-16.png differ
diff --git a/Projects/space-game/step04/img/laser-green-2.png b/Projects/space-game/step04/img/laser-green-2.png
new file mode 100644
index 000000000..5cd78303e
Binary files /dev/null and b/Projects/space-game/step04/img/laser-green-2.png differ
diff --git a/Projects/space-game/step04/img/laser-green-3.png b/Projects/space-game/step04/img/laser-green-3.png
new file mode 100644
index 000000000..d658547bc
Binary files /dev/null and b/Projects/space-game/step04/img/laser-green-3.png differ
diff --git a/Projects/space-game/step04/img/laser-green-4.png b/Projects/space-game/step04/img/laser-green-4.png
new file mode 100644
index 000000000..61b04fb71
Binary files /dev/null and b/Projects/space-game/step04/img/laser-green-4.png differ
diff --git a/Projects/space-game/step04/img/laser-green-5.png b/Projects/space-game/step04/img/laser-green-5.png
new file mode 100644
index 000000000..98ae6bee2
Binary files /dev/null and b/Projects/space-game/step04/img/laser-green-5.png differ
diff --git a/Projects/space-game/step04/img/laser-green-6.png b/Projects/space-game/step04/img/laser-green-6.png
new file mode 100644
index 000000000..36dd94d46
Binary files /dev/null and b/Projects/space-game/step04/img/laser-green-6.png differ
diff --git a/Projects/space-game/step04/img/laser-green-7.png b/Projects/space-game/step04/img/laser-green-7.png
new file mode 100644
index 000000000..0ae7c2d0c
Binary files /dev/null and b/Projects/space-game/step04/img/laser-green-7.png differ
diff --git a/Projects/space-game/step04/img/laser-green-8.png b/Projects/space-game/step04/img/laser-green-8.png
new file mode 100644
index 000000000..0ff1d80f9
Binary files /dev/null and b/Projects/space-game/step04/img/laser-green-8.png differ
diff --git a/Projects/space-game/step04/img/laser-green-9.png b/Projects/space-game/step04/img/laser-green-9.png
new file mode 100644
index 000000000..932056b9f
Binary files /dev/null and b/Projects/space-game/step04/img/laser-green-9.png differ
diff --git a/Projects/space-game/step04/img/laser-red-1.png b/Projects/space-game/step04/img/laser-red-1.png
new file mode 100644
index 000000000..5e467b65b
Binary files /dev/null and b/Projects/space-game/step04/img/laser-red-1.png differ
diff --git a/Projects/space-game/step04/img/laser-red-10.png b/Projects/space-game/step04/img/laser-red-10.png
new file mode 100644
index 000000000..0f85ba1b0
Binary files /dev/null and b/Projects/space-game/step04/img/laser-red-10.png differ
diff --git a/Projects/space-game/step04/img/laser-red-11.png b/Projects/space-game/step04/img/laser-red-11.png
new file mode 100644
index 000000000..95e9c0a14
Binary files /dev/null and b/Projects/space-game/step04/img/laser-red-11.png differ
diff --git a/Projects/space-game/step04/img/laser-red-12.png b/Projects/space-game/step04/img/laser-red-12.png
new file mode 100644
index 000000000..9f56da0ce
Binary files /dev/null and b/Projects/space-game/step04/img/laser-red-12.png differ
diff --git a/Projects/space-game/step04/img/laser-red-13.png b/Projects/space-game/step04/img/laser-red-13.png
new file mode 100644
index 000000000..292bcc5d5
Binary files /dev/null and b/Projects/space-game/step04/img/laser-red-13.png differ
diff --git a/Projects/space-game/step04/img/laser-red-14.png b/Projects/space-game/step04/img/laser-red-14.png
new file mode 100644
index 000000000..eaf8346de
Binary files /dev/null and b/Projects/space-game/step04/img/laser-red-14.png differ
diff --git a/Projects/space-game/step04/img/laser-red-15.png b/Projects/space-game/step04/img/laser-red-15.png
new file mode 100644
index 000000000..7d27c2a94
Binary files /dev/null and b/Projects/space-game/step04/img/laser-red-15.png differ
diff --git a/Projects/space-game/step04/img/laser-red-16.png b/Projects/space-game/step04/img/laser-red-16.png
new file mode 100644
index 000000000..b12fcd5d4
Binary files /dev/null and b/Projects/space-game/step04/img/laser-red-16.png differ
diff --git a/Projects/space-game/step04/img/laser-red-2.png b/Projects/space-game/step04/img/laser-red-2.png
new file mode 100644
index 000000000..1127fffb6
Binary files /dev/null and b/Projects/space-game/step04/img/laser-red-2.png differ
diff --git a/Projects/space-game/step04/img/laser-red-3.png b/Projects/space-game/step04/img/laser-red-3.png
new file mode 100644
index 000000000..bc1bb8730
Binary files /dev/null and b/Projects/space-game/step04/img/laser-red-3.png differ
diff --git a/Projects/space-game/step04/img/laser-red-4.png b/Projects/space-game/step04/img/laser-red-4.png
new file mode 100644
index 000000000..fc3655b0f
Binary files /dev/null and b/Projects/space-game/step04/img/laser-red-4.png differ
diff --git a/Projects/space-game/step04/img/laser-red-5.png b/Projects/space-game/step04/img/laser-red-5.png
new file mode 100644
index 000000000..46db2d77f
Binary files /dev/null and b/Projects/space-game/step04/img/laser-red-5.png differ
diff --git a/Projects/space-game/step04/img/laser-red-6.png b/Projects/space-game/step04/img/laser-red-6.png
new file mode 100644
index 000000000..33614ae1a
Binary files /dev/null and b/Projects/space-game/step04/img/laser-red-6.png differ
diff --git a/Projects/space-game/step04/img/laser-red-7.png b/Projects/space-game/step04/img/laser-red-7.png
new file mode 100644
index 000000000..23bab346f
Binary files /dev/null and b/Projects/space-game/step04/img/laser-red-7.png differ
diff --git a/Projects/space-game/step04/img/laser-red-8.png b/Projects/space-game/step04/img/laser-red-8.png
new file mode 100644
index 000000000..5a2cce30e
Binary files /dev/null and b/Projects/space-game/step04/img/laser-red-8.png differ
diff --git a/Projects/space-game/step04/img/laser-red-9.png b/Projects/space-game/step04/img/laser-red-9.png
new file mode 100644
index 000000000..7dc31dcc2
Binary files /dev/null and b/Projects/space-game/step04/img/laser-red-9.png differ
diff --git a/Projects/space-game/step04/img/player-blue-1.png b/Projects/space-game/step04/img/player-blue-1.png
new file mode 100644
index 000000000..cecbbed97
Binary files /dev/null and b/Projects/space-game/step04/img/player-blue-1.png differ
diff --git a/Projects/space-game/step04/img/player-blue-2.png b/Projects/space-game/step04/img/player-blue-2.png
new file mode 100644
index 000000000..e277114fd
Binary files /dev/null and b/Projects/space-game/step04/img/player-blue-2.png differ
diff --git a/Projects/space-game/step04/img/player-blue-3.png b/Projects/space-game/step04/img/player-blue-3.png
new file mode 100644
index 000000000..f34faf066
Binary files /dev/null and b/Projects/space-game/step04/img/player-blue-3.png differ
diff --git a/Projects/space-game/step04/img/player-green-1.png b/Projects/space-game/step04/img/player-green-1.png
new file mode 100644
index 000000000..2eb6f9c06
Binary files /dev/null and b/Projects/space-game/step04/img/player-green-1.png differ
diff --git a/Projects/space-game/step04/img/player-green-2.png b/Projects/space-game/step04/img/player-green-2.png
new file mode 100644
index 000000000..72e18c7ff
Binary files /dev/null and b/Projects/space-game/step04/img/player-green-2.png differ
diff --git a/Projects/space-game/step04/img/player-green-3.png b/Projects/space-game/step04/img/player-green-3.png
new file mode 100644
index 000000000..b853be42a
Binary files /dev/null and b/Projects/space-game/step04/img/player-green-3.png differ
diff --git a/Projects/space-game/step04/img/player-orange-1.png b/Projects/space-game/step04/img/player-orange-1.png
new file mode 100644
index 000000000..3902283d4
Binary files /dev/null and b/Projects/space-game/step04/img/player-orange-1.png differ
diff --git a/Projects/space-game/step04/img/player-orange-2.png b/Projects/space-game/step04/img/player-orange-2.png
new file mode 100644
index 000000000..82ddc8068
Binary files /dev/null and b/Projects/space-game/step04/img/player-orange-2.png differ
diff --git a/Projects/space-game/step04/img/player-orange-3.png b/Projects/space-game/step04/img/player-orange-3.png
new file mode 100644
index 000000000..0b6b7ec68
Binary files /dev/null and b/Projects/space-game/step04/img/player-orange-3.png differ
diff --git a/Projects/space-game/step04/img/player-red-1.png b/Projects/space-game/step04/img/player-red-1.png
new file mode 100644
index 000000000..3695e09e2
Binary files /dev/null and b/Projects/space-game/step04/img/player-red-1.png differ
diff --git a/Projects/space-game/step04/img/player-red-2.png b/Projects/space-game/step04/img/player-red-2.png
new file mode 100644
index 000000000..8213e978d
Binary files /dev/null and b/Projects/space-game/step04/img/player-red-2.png differ
diff --git a/Projects/space-game/step04/img/player-red-3.png b/Projects/space-game/step04/img/player-red-3.png
new file mode 100644
index 000000000..796e81d71
Binary files /dev/null and b/Projects/space-game/step04/img/player-red-3.png differ
diff --git a/Projects/space-game/step04/index.html b/Projects/space-game/step04/index.html
new file mode 100644
index 000000000..1ebb1e695
--- /dev/null
+++ b/Projects/space-game/step04/index.html
@@ -0,0 +1,32 @@
+
+
+
+
+
+
+ Space Game
+
+
+
+
+
+ Space Game
+
+
+
+
Congratulations!
+
You won the game
+
+
+
+
GAME OVER
+
You lost the game
+
+
+
+
+
+
+
+
+
diff --git a/Projects/space-game/step04/js/game.js b/Projects/space-game/step04/js/game.js
new file mode 100644
index 000000000..0c178e917
--- /dev/null
+++ b/Projects/space-game/step04/js/game.js
@@ -0,0 +1,135 @@
+const KEY_CODE_LEFT = 37;
+const KEY_CODE_RIGHT = 39;
+const KEY_CODE_SPACE = 32;
+
+const GAME_WIDTH = 800;
+const GAME_HEIGHT = 600;
+
+const PLAYER_WIDTH = 20;
+const PLAYER_MAX_SPEED = 600.0;
+const LASER_MAX_SPEED = 300.0;
+const LASER_COOLDOWN = 0.5;
+
+const GAME_STATE = {
+ lastTime: Date.now(),
+ leftPressed: false,
+ rightPressed: false,
+ spacePressed: false,
+ playerX: 0,
+ playerY: 0,
+ playerCooldown: 0,
+ lasers: [],
+};
+
+function setPosition(el, x, y) {
+ el.style.transform = `translate(${x}px, ${y}px)`;
+}
+
+function clamp(v, min, max) {
+ if (v < min) {
+ return min;
+ } else if (v > max) {
+ return max;
+ } else {
+ return v;
+ }
+}
+
+function createPlayer(container) {
+ GAME_STATE.playerX = GAME_WIDTH / 2;
+ GAME_STATE.playerY = GAME_HEIGHT - 50;
+ const player = document.createElement("img");
+ player.src = "img/player-blue-1.png";
+ player.className = "player";
+ container.appendChild(player);
+ setPosition(player, GAME_STATE.playerX, GAME_STATE.playerY);
+}
+
+function updatePlayer(dt, container) {
+ if (GAME_STATE.leftPressed) {
+ GAME_STATE.playerX -= dt * PLAYER_MAX_SPEED;
+ }
+ if (GAME_STATE.rightPressed) {
+ GAME_STATE.playerX += dt * PLAYER_MAX_SPEED;
+ }
+
+ GAME_STATE.playerX = clamp(
+ GAME_STATE.playerX,
+ PLAYER_WIDTH,
+ GAME_WIDTH - PLAYER_WIDTH
+ );
+
+ if (GAME_STATE.spacePressed && GAME_STATE.playerCooldown <= 0) {
+ createLaser(container, GAME_STATE.playerX, GAME_STATE.playerY);
+ GAME_STATE.playerCooldown = LASER_COOLDOWN;
+ }
+ if (GAME_STATE.playerCooldown > 0) {
+ GAME_STATE.playerCooldown -= dt;
+ }
+
+ const player = document.querySelector(".player");
+ setPosition(player, GAME_STATE.playerX, GAME_STATE.playerY);
+}
+
+function createLaser(container, x, y) {
+ const element = document.createElement("img");
+ element.src = "img/laser-blue-1.png";
+ element.className = "laser";
+ container.appendChild(element);
+ const laser = { x, y, element };
+ GAME_STATE.lasers.push(laser);
+ const audio = new Audio("sound/sfx-laser1.ogg");
+ audio.play();
+ setPosition(element, x, y);
+}
+
+function updateLasers(dt, container) {
+ const lasers = GAME_STATE.lasers;
+ for (let i = 0; i < lasers.length; i++) {
+ const laser = lasers[i];
+ laser.y -= dt * LASER_MAX_SPEED;
+ setPosition(laser.element, laser.x, laser.y);
+ }
+}
+
+function init() {
+ const container = document.querySelector(".game");
+ createPlayer(container);
+}
+
+function update(e) {
+ const currentTime = Date.now();
+ const dt = (currentTime - GAME_STATE.lastTime) / 1000.0;
+
+ const container = document.querySelector(".game");
+ updatePlayer(dt, container);
+ updateLasers(dt, container);
+
+ GAME_STATE.lastTime = currentTime;
+ window.requestAnimationFrame(update);
+}
+
+function onKeyDown(e) {
+ if (e.keyCode === KEY_CODE_LEFT) {
+ GAME_STATE.leftPressed = true;
+ } else if (e.keyCode === KEY_CODE_RIGHT) {
+ GAME_STATE.rightPressed = true;
+ } else if (e.keyCode === KEY_CODE_SPACE) {
+ GAME_STATE.spacePressed = true;
+ }
+}
+
+function onKeyUp(e) {
+ if (e.keyCode === KEY_CODE_LEFT) {
+ GAME_STATE.leftPressed = false;
+ } else if (e.keyCode === KEY_CODE_RIGHT) {
+ GAME_STATE.rightPressed = false;
+ } else if (e.keyCode === KEY_CODE_SPACE) {
+ GAME_STATE.spacePressed = false;
+ }
+}
+
+init();
+window.addEventListener("keydown", onKeyDown);
+window.addEventListener("keyup", onKeyUp);
+window.requestAnimationFrame(update);
diff --git a/Projects/space-game/step04/sound/sfx-laser1.ogg b/Projects/space-game/step04/sound/sfx-laser1.ogg
new file mode 100644
index 000000000..7a9a4d2f2
Binary files /dev/null and b/Projects/space-game/step04/sound/sfx-laser1.ogg differ
diff --git a/Projects/space-game/step04/sound/sfx-lose.ogg b/Projects/space-game/step04/sound/sfx-lose.ogg
new file mode 100644
index 000000000..496968f8d
Binary files /dev/null and b/Projects/space-game/step04/sound/sfx-lose.ogg differ
diff --git a/Projects/space-game/step05/README.md b/Projects/space-game/step05/README.md
new file mode 100644
index 000000000..5a0761f6c
--- /dev/null
+++ b/Projects/space-game/step05/README.md
@@ -0,0 +1,37 @@
+# Step 5 - Removing lasers
+
+[Play this version](https://rawgit.com/HackYourFutureBelgium/JavaScript2/master/Projects/space-game/step05/index.html)
+
+Our lasers remain in the document, even when they disappear offscreen. We now use [`removeChild`](https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild) to remove an element offscreen.
+
+Note that we have both the **abstract** state of the game in our `GAME_STATE`, and the **visual state** in the DOM. We need to keep them in sync. Our `destroyLaser` function sets the `isDead` state to `true`, indicating the laser should be removed. We then use [`Array.filter`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) to remove the "dead" lasers from the list.
+
+This is our first foray into [functional programming](http://eloquentjavascript.net/05_higher_order.html). Instead of writing our own `for` loop to remove elements, we can let JavaScript do the bulk of the work. We just provide our small function that says whether an element should be removed or not. Here we use an [arrow function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions).
+
+So instead of writing this:
+
+```js
+let newLasers = [];
+for (let i = 0; i < lasers.length; i++) {
+ const laser = lasers[i];
+ if (!laser.isDead) {
+ newLasers.push(laser);
+ }
+}
+lasers = newLasers;
+```
+
+We can write this:
+
+```
+lasers = lasers.filter(l => !l.isDead);
+```
+
+The arrow function is just a short form for this:
+
+```js
+// The "l" parameter is our laser
+function isNotDead(l) {
+ return !l.isDead;
+}
+```
diff --git a/Projects/space-game/step05/css/main.css b/Projects/space-game/step05/css/main.css
new file mode 100644
index 000000000..112ed105b
--- /dev/null
+++ b/Projects/space-game/step05/css/main.css
@@ -0,0 +1,135 @@
+html,
+body {
+ height: 100%;
+ overflow: hidden;
+}
+
+body {
+ margin: 0;
+ font: 16px sans-serif;
+}
+
+.wrap {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+}
+
+header {
+ text-align: center;
+ background: black;
+ color: #fff;
+ padding: 10px;
+}
+
+footer {
+ padding: 10px;
+ text-align: center;
+ font-size: 11px;
+ background: black;
+ color: white;
+}
+
+.game-wrapper {
+ flex: 1;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background: #222;
+}
+.game {
+ width: 800px;
+ height: 600px;
+ background: url(../img/background-blue.png);
+ animation: scroll-background 5s linear infinite;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+ position: relative;
+}
+
+@keyframes scroll-background {
+ from {
+ background-position-y: 0px;
+ }
+ to {
+ background-position-y: 256px;
+ }
+}
+
+.game .enemy {
+ position: absolute;
+ margin-left: -20px;
+ margin-top: -18px;
+ width: 40px;
+}
+
+.game .player {
+ position: absolute;
+ margin-left: -20px;
+ width: 40px;
+}
+
+.game .laser {
+ position: absolute;
+ margin-left: -2.5px;
+ height: 30px;
+}
+
+.game .enemy-laser {
+ position: absolute;
+ margin-left: -2.5px;
+ height: 30px;
+}
+
+.congratulations {
+ display: none;
+ position: absolute;
+ background: #c7a526;
+ color: white;
+ padding: 20px 50px;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+ border-radius: 10px;
+ text-align: center;
+ animation: pop-in 1s;
+}
+
+.game-over {
+ display: none;
+ position: absolute;
+ background: #6b1818;
+ color: white;
+ padding: 20px 50px;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+ border-radius: 10px;
+ text-align: center;
+ animation: pop-in 1s;
+}
+
+.btn {
+ border: 2px solid #36bbf5;
+ border-radius: 3px;
+ box-shadow: 0 2px rgba(0, 0, 0, 0.15);
+ background: linear-gradient(
+ to bottom,
+ #fff 0%,
+ #fff 49%,
+ #f5f5f5 50%,
+ #eee 100%
+ );
+ padding: 10px 40px;
+ font: 14px sans-serif;
+}
+@keyframes pop-in {
+ 0% {
+ opacity: 0;
+ transform: translate(0, -100px);
+ }
+ 10% {
+ opacity: 1;
+ }
+ 50% {
+ transform: translate(0, 30px);
+ }
+ 100% {
+ transform: translate(0, 0);
+ }
+}
diff --git a/Projects/space-game/step05/img/background-black.png b/Projects/space-game/step05/img/background-black.png
new file mode 100644
index 000000000..82ddab992
Binary files /dev/null and b/Projects/space-game/step05/img/background-black.png differ
diff --git a/Projects/space-game/step05/img/background-blue.png b/Projects/space-game/step05/img/background-blue.png
new file mode 100644
index 000000000..47642cd5d
Binary files /dev/null and b/Projects/space-game/step05/img/background-blue.png differ
diff --git a/Projects/space-game/step05/img/background-dark-purple.png b/Projects/space-game/step05/img/background-dark-purple.png
new file mode 100644
index 000000000..d9c3fd42d
Binary files /dev/null and b/Projects/space-game/step05/img/background-dark-purple.png differ
diff --git a/Projects/space-game/step05/img/background-purple.png b/Projects/space-game/step05/img/background-purple.png
new file mode 100644
index 000000000..5e8617769
Binary files /dev/null and b/Projects/space-game/step05/img/background-purple.png differ
diff --git a/Projects/space-game/step05/img/enemy-black-1.png b/Projects/space-game/step05/img/enemy-black-1.png
new file mode 100644
index 000000000..bc2fa4c1c
Binary files /dev/null and b/Projects/space-game/step05/img/enemy-black-1.png differ
diff --git a/Projects/space-game/step05/img/enemy-black-2.png b/Projects/space-game/step05/img/enemy-black-2.png
new file mode 100644
index 000000000..0e6b91c56
Binary files /dev/null and b/Projects/space-game/step05/img/enemy-black-2.png differ
diff --git a/Projects/space-game/step05/img/enemy-black-3.png b/Projects/space-game/step05/img/enemy-black-3.png
new file mode 100644
index 000000000..dafec1b16
Binary files /dev/null and b/Projects/space-game/step05/img/enemy-black-3.png differ
diff --git a/Projects/space-game/step05/img/enemy-black-4.png b/Projects/space-game/step05/img/enemy-black-4.png
new file mode 100644
index 000000000..a575c9d49
Binary files /dev/null and b/Projects/space-game/step05/img/enemy-black-4.png differ
diff --git a/Projects/space-game/step05/img/enemy-black-5.png b/Projects/space-game/step05/img/enemy-black-5.png
new file mode 100644
index 000000000..739dcf0fe
Binary files /dev/null and b/Projects/space-game/step05/img/enemy-black-5.png differ
diff --git a/Projects/space-game/step05/img/enemy-blue-1.png b/Projects/space-game/step05/img/enemy-blue-1.png
new file mode 100644
index 000000000..cedc0730d
Binary files /dev/null and b/Projects/space-game/step05/img/enemy-blue-1.png differ
diff --git a/Projects/space-game/step05/img/enemy-blue-2.png b/Projects/space-game/step05/img/enemy-blue-2.png
new file mode 100644
index 000000000..bf3bd0c9f
Binary files /dev/null and b/Projects/space-game/step05/img/enemy-blue-2.png differ
diff --git a/Projects/space-game/step05/img/enemy-blue-3.png b/Projects/space-game/step05/img/enemy-blue-3.png
new file mode 100644
index 000000000..9a63d03b0
Binary files /dev/null and b/Projects/space-game/step05/img/enemy-blue-3.png differ
diff --git a/Projects/space-game/step05/img/enemy-blue-4.png b/Projects/space-game/step05/img/enemy-blue-4.png
new file mode 100644
index 000000000..d5670a3a5
Binary files /dev/null and b/Projects/space-game/step05/img/enemy-blue-4.png differ
diff --git a/Projects/space-game/step05/img/enemy-blue-5.png b/Projects/space-game/step05/img/enemy-blue-5.png
new file mode 100644
index 000000000..e740509f7
Binary files /dev/null and b/Projects/space-game/step05/img/enemy-blue-5.png differ
diff --git a/Projects/space-game/step05/img/enemy-green-1.png b/Projects/space-game/step05/img/enemy-green-1.png
new file mode 100644
index 000000000..064e29037
Binary files /dev/null and b/Projects/space-game/step05/img/enemy-green-1.png differ
diff --git a/Projects/space-game/step05/img/enemy-green-2.png b/Projects/space-game/step05/img/enemy-green-2.png
new file mode 100644
index 000000000..5189d2459
Binary files /dev/null and b/Projects/space-game/step05/img/enemy-green-2.png differ
diff --git a/Projects/space-game/step05/img/enemy-green-3.png b/Projects/space-game/step05/img/enemy-green-3.png
new file mode 100644
index 000000000..74e2bca68
Binary files /dev/null and b/Projects/space-game/step05/img/enemy-green-3.png differ
diff --git a/Projects/space-game/step05/img/enemy-green-4.png b/Projects/space-game/step05/img/enemy-green-4.png
new file mode 100644
index 000000000..112e299f8
Binary files /dev/null and b/Projects/space-game/step05/img/enemy-green-4.png differ
diff --git a/Projects/space-game/step05/img/enemy-green-5.png b/Projects/space-game/step05/img/enemy-green-5.png
new file mode 100644
index 000000000..59382705b
Binary files /dev/null and b/Projects/space-game/step05/img/enemy-green-5.png differ
diff --git a/Projects/space-game/step05/img/enemy-red-1.png b/Projects/space-game/step05/img/enemy-red-1.png
new file mode 100644
index 000000000..fb0c0a2ca
Binary files /dev/null and b/Projects/space-game/step05/img/enemy-red-1.png differ
diff --git a/Projects/space-game/step05/img/enemy-red-2.png b/Projects/space-game/step05/img/enemy-red-2.png
new file mode 100644
index 000000000..3ee96c571
Binary files /dev/null and b/Projects/space-game/step05/img/enemy-red-2.png differ
diff --git a/Projects/space-game/step05/img/enemy-red-3.png b/Projects/space-game/step05/img/enemy-red-3.png
new file mode 100644
index 000000000..bc8eacd99
Binary files /dev/null and b/Projects/space-game/step05/img/enemy-red-3.png differ
diff --git a/Projects/space-game/step05/img/enemy-red-4.png b/Projects/space-game/step05/img/enemy-red-4.png
new file mode 100644
index 000000000..a3216d4bf
Binary files /dev/null and b/Projects/space-game/step05/img/enemy-red-4.png differ
diff --git a/Projects/space-game/step05/img/enemy-red-5.png b/Projects/space-game/step05/img/enemy-red-5.png
new file mode 100644
index 000000000..645cdf3c8
Binary files /dev/null and b/Projects/space-game/step05/img/enemy-red-5.png differ
diff --git a/Projects/space-game/step05/img/laser-blue-1.png b/Projects/space-game/step05/img/laser-blue-1.png
new file mode 100644
index 000000000..b76aaf7a0
Binary files /dev/null and b/Projects/space-game/step05/img/laser-blue-1.png differ
diff --git a/Projects/space-game/step05/img/laser-blue-10.png b/Projects/space-game/step05/img/laser-blue-10.png
new file mode 100644
index 000000000..dd6b766a4
Binary files /dev/null and b/Projects/space-game/step05/img/laser-blue-10.png differ
diff --git a/Projects/space-game/step05/img/laser-blue-11.png b/Projects/space-game/step05/img/laser-blue-11.png
new file mode 100644
index 000000000..c06234958
Binary files /dev/null and b/Projects/space-game/step05/img/laser-blue-11.png differ
diff --git a/Projects/space-game/step05/img/laser-blue-12.png b/Projects/space-game/step05/img/laser-blue-12.png
new file mode 100644
index 000000000..48b6103e1
Binary files /dev/null and b/Projects/space-game/step05/img/laser-blue-12.png differ
diff --git a/Projects/space-game/step05/img/laser-blue-13.png b/Projects/space-game/step05/img/laser-blue-13.png
new file mode 100644
index 000000000..c5ec6a329
Binary files /dev/null and b/Projects/space-game/step05/img/laser-blue-13.png differ
diff --git a/Projects/space-game/step05/img/laser-blue-14.png b/Projects/space-game/step05/img/laser-blue-14.png
new file mode 100644
index 000000000..254601e5f
Binary files /dev/null and b/Projects/space-game/step05/img/laser-blue-14.png differ
diff --git a/Projects/space-game/step05/img/laser-blue-15.png b/Projects/space-game/step05/img/laser-blue-15.png
new file mode 100644
index 000000000..1ea1966d5
Binary files /dev/null and b/Projects/space-game/step05/img/laser-blue-15.png differ
diff --git a/Projects/space-game/step05/img/laser-blue-16.png b/Projects/space-game/step05/img/laser-blue-16.png
new file mode 100644
index 000000000..1def98fb6
Binary files /dev/null and b/Projects/space-game/step05/img/laser-blue-16.png differ
diff --git a/Projects/space-game/step05/img/laser-blue-2.png b/Projects/space-game/step05/img/laser-blue-2.png
new file mode 100644
index 000000000..3f923a394
Binary files /dev/null and b/Projects/space-game/step05/img/laser-blue-2.png differ
diff --git a/Projects/space-game/step05/img/laser-blue-3.png b/Projects/space-game/step05/img/laser-blue-3.png
new file mode 100644
index 000000000..a16e9a82e
Binary files /dev/null and b/Projects/space-game/step05/img/laser-blue-3.png differ
diff --git a/Projects/space-game/step05/img/laser-blue-4.png b/Projects/space-game/step05/img/laser-blue-4.png
new file mode 100644
index 000000000..6f3b9103a
Binary files /dev/null and b/Projects/space-game/step05/img/laser-blue-4.png differ
diff --git a/Projects/space-game/step05/img/laser-blue-5.png b/Projects/space-game/step05/img/laser-blue-5.png
new file mode 100644
index 000000000..85cff7d5d
Binary files /dev/null and b/Projects/space-game/step05/img/laser-blue-5.png differ
diff --git a/Projects/space-game/step05/img/laser-blue-6.png b/Projects/space-game/step05/img/laser-blue-6.png
new file mode 100644
index 000000000..a621875c5
Binary files /dev/null and b/Projects/space-game/step05/img/laser-blue-6.png differ
diff --git a/Projects/space-game/step05/img/laser-blue-7.png b/Projects/space-game/step05/img/laser-blue-7.png
new file mode 100644
index 000000000..e1848bfc3
Binary files /dev/null and b/Projects/space-game/step05/img/laser-blue-7.png differ
diff --git a/Projects/space-game/step05/img/laser-blue-8.png b/Projects/space-game/step05/img/laser-blue-8.png
new file mode 100644
index 000000000..7a463965c
Binary files /dev/null and b/Projects/space-game/step05/img/laser-blue-8.png differ
diff --git a/Projects/space-game/step05/img/laser-blue-9.png b/Projects/space-game/step05/img/laser-blue-9.png
new file mode 100644
index 000000000..35624e649
Binary files /dev/null and b/Projects/space-game/step05/img/laser-blue-9.png differ
diff --git a/Projects/space-game/step05/img/laser-green-1.png b/Projects/space-game/step05/img/laser-green-1.png
new file mode 100644
index 000000000..c9982b1ed
Binary files /dev/null and b/Projects/space-game/step05/img/laser-green-1.png differ
diff --git a/Projects/space-game/step05/img/laser-green-10.png b/Projects/space-game/step05/img/laser-green-10.png
new file mode 100644
index 000000000..9c7974c69
Binary files /dev/null and b/Projects/space-game/step05/img/laser-green-10.png differ
diff --git a/Projects/space-game/step05/img/laser-green-11.png b/Projects/space-game/step05/img/laser-green-11.png
new file mode 100644
index 000000000..100cddbd4
Binary files /dev/null and b/Projects/space-game/step05/img/laser-green-11.png differ
diff --git a/Projects/space-game/step05/img/laser-green-12.png b/Projects/space-game/step05/img/laser-green-12.png
new file mode 100644
index 000000000..b05a72fa6
Binary files /dev/null and b/Projects/space-game/step05/img/laser-green-12.png differ
diff --git a/Projects/space-game/step05/img/laser-green-13.png b/Projects/space-game/step05/img/laser-green-13.png
new file mode 100644
index 000000000..92cc35334
Binary files /dev/null and b/Projects/space-game/step05/img/laser-green-13.png differ
diff --git a/Projects/space-game/step05/img/laser-green-14.png b/Projects/space-game/step05/img/laser-green-14.png
new file mode 100644
index 000000000..7abd3b29b
Binary files /dev/null and b/Projects/space-game/step05/img/laser-green-14.png differ
diff --git a/Projects/space-game/step05/img/laser-green-15.png b/Projects/space-game/step05/img/laser-green-15.png
new file mode 100644
index 000000000..97a44051d
Binary files /dev/null and b/Projects/space-game/step05/img/laser-green-15.png differ
diff --git a/Projects/space-game/step05/img/laser-green-16.png b/Projects/space-game/step05/img/laser-green-16.png
new file mode 100644
index 000000000..b73c12fb9
Binary files /dev/null and b/Projects/space-game/step05/img/laser-green-16.png differ
diff --git a/Projects/space-game/step05/img/laser-green-2.png b/Projects/space-game/step05/img/laser-green-2.png
new file mode 100644
index 000000000..5cd78303e
Binary files /dev/null and b/Projects/space-game/step05/img/laser-green-2.png differ
diff --git a/Projects/space-game/step05/img/laser-green-3.png b/Projects/space-game/step05/img/laser-green-3.png
new file mode 100644
index 000000000..d658547bc
Binary files /dev/null and b/Projects/space-game/step05/img/laser-green-3.png differ
diff --git a/Projects/space-game/step05/img/laser-green-4.png b/Projects/space-game/step05/img/laser-green-4.png
new file mode 100644
index 000000000..61b04fb71
Binary files /dev/null and b/Projects/space-game/step05/img/laser-green-4.png differ
diff --git a/Projects/space-game/step05/img/laser-green-5.png b/Projects/space-game/step05/img/laser-green-5.png
new file mode 100644
index 000000000..98ae6bee2
Binary files /dev/null and b/Projects/space-game/step05/img/laser-green-5.png differ
diff --git a/Projects/space-game/step05/img/laser-green-6.png b/Projects/space-game/step05/img/laser-green-6.png
new file mode 100644
index 000000000..36dd94d46
Binary files /dev/null and b/Projects/space-game/step05/img/laser-green-6.png differ
diff --git a/Projects/space-game/step05/img/laser-green-7.png b/Projects/space-game/step05/img/laser-green-7.png
new file mode 100644
index 000000000..0ae7c2d0c
Binary files /dev/null and b/Projects/space-game/step05/img/laser-green-7.png differ
diff --git a/Projects/space-game/step05/img/laser-green-8.png b/Projects/space-game/step05/img/laser-green-8.png
new file mode 100644
index 000000000..0ff1d80f9
Binary files /dev/null and b/Projects/space-game/step05/img/laser-green-8.png differ
diff --git a/Projects/space-game/step05/img/laser-green-9.png b/Projects/space-game/step05/img/laser-green-9.png
new file mode 100644
index 000000000..932056b9f
Binary files /dev/null and b/Projects/space-game/step05/img/laser-green-9.png differ
diff --git a/Projects/space-game/step05/img/laser-red-1.png b/Projects/space-game/step05/img/laser-red-1.png
new file mode 100644
index 000000000..5e467b65b
Binary files /dev/null and b/Projects/space-game/step05/img/laser-red-1.png differ
diff --git a/Projects/space-game/step05/img/laser-red-10.png b/Projects/space-game/step05/img/laser-red-10.png
new file mode 100644
index 000000000..0f85ba1b0
Binary files /dev/null and b/Projects/space-game/step05/img/laser-red-10.png differ
diff --git a/Projects/space-game/step05/img/laser-red-11.png b/Projects/space-game/step05/img/laser-red-11.png
new file mode 100644
index 000000000..95e9c0a14
Binary files /dev/null and b/Projects/space-game/step05/img/laser-red-11.png differ
diff --git a/Projects/space-game/step05/img/laser-red-12.png b/Projects/space-game/step05/img/laser-red-12.png
new file mode 100644
index 000000000..9f56da0ce
Binary files /dev/null and b/Projects/space-game/step05/img/laser-red-12.png differ
diff --git a/Projects/space-game/step05/img/laser-red-13.png b/Projects/space-game/step05/img/laser-red-13.png
new file mode 100644
index 000000000..292bcc5d5
Binary files /dev/null and b/Projects/space-game/step05/img/laser-red-13.png differ
diff --git a/Projects/space-game/step05/img/laser-red-14.png b/Projects/space-game/step05/img/laser-red-14.png
new file mode 100644
index 000000000..eaf8346de
Binary files /dev/null and b/Projects/space-game/step05/img/laser-red-14.png differ
diff --git a/Projects/space-game/step05/img/laser-red-15.png b/Projects/space-game/step05/img/laser-red-15.png
new file mode 100644
index 000000000..7d27c2a94
Binary files /dev/null and b/Projects/space-game/step05/img/laser-red-15.png differ
diff --git a/Projects/space-game/step05/img/laser-red-16.png b/Projects/space-game/step05/img/laser-red-16.png
new file mode 100644
index 000000000..b12fcd5d4
Binary files /dev/null and b/Projects/space-game/step05/img/laser-red-16.png differ
diff --git a/Projects/space-game/step05/img/laser-red-2.png b/Projects/space-game/step05/img/laser-red-2.png
new file mode 100644
index 000000000..1127fffb6
Binary files /dev/null and b/Projects/space-game/step05/img/laser-red-2.png differ
diff --git a/Projects/space-game/step05/img/laser-red-3.png b/Projects/space-game/step05/img/laser-red-3.png
new file mode 100644
index 000000000..bc1bb8730
Binary files /dev/null and b/Projects/space-game/step05/img/laser-red-3.png differ
diff --git a/Projects/space-game/step05/img/laser-red-4.png b/Projects/space-game/step05/img/laser-red-4.png
new file mode 100644
index 000000000..fc3655b0f
Binary files /dev/null and b/Projects/space-game/step05/img/laser-red-4.png differ
diff --git a/Projects/space-game/step05/img/laser-red-5.png b/Projects/space-game/step05/img/laser-red-5.png
new file mode 100644
index 000000000..46db2d77f
Binary files /dev/null and b/Projects/space-game/step05/img/laser-red-5.png differ
diff --git a/Projects/space-game/step05/img/laser-red-6.png b/Projects/space-game/step05/img/laser-red-6.png
new file mode 100644
index 000000000..33614ae1a
Binary files /dev/null and b/Projects/space-game/step05/img/laser-red-6.png differ
diff --git a/Projects/space-game/step05/img/laser-red-7.png b/Projects/space-game/step05/img/laser-red-7.png
new file mode 100644
index 000000000..23bab346f
Binary files /dev/null and b/Projects/space-game/step05/img/laser-red-7.png differ
diff --git a/Projects/space-game/step05/img/laser-red-8.png b/Projects/space-game/step05/img/laser-red-8.png
new file mode 100644
index 000000000..5a2cce30e
Binary files /dev/null and b/Projects/space-game/step05/img/laser-red-8.png differ
diff --git a/Projects/space-game/step05/img/laser-red-9.png b/Projects/space-game/step05/img/laser-red-9.png
new file mode 100644
index 000000000..7dc31dcc2
Binary files /dev/null and b/Projects/space-game/step05/img/laser-red-9.png differ
diff --git a/Projects/space-game/step05/img/player-blue-1.png b/Projects/space-game/step05/img/player-blue-1.png
new file mode 100644
index 000000000..cecbbed97
Binary files /dev/null and b/Projects/space-game/step05/img/player-blue-1.png differ
diff --git a/Projects/space-game/step05/img/player-blue-2.png b/Projects/space-game/step05/img/player-blue-2.png
new file mode 100644
index 000000000..e277114fd
Binary files /dev/null and b/Projects/space-game/step05/img/player-blue-2.png differ
diff --git a/Projects/space-game/step05/img/player-blue-3.png b/Projects/space-game/step05/img/player-blue-3.png
new file mode 100644
index 000000000..f34faf066
Binary files /dev/null and b/Projects/space-game/step05/img/player-blue-3.png differ
diff --git a/Projects/space-game/step05/img/player-green-1.png b/Projects/space-game/step05/img/player-green-1.png
new file mode 100644
index 000000000..2eb6f9c06
Binary files /dev/null and b/Projects/space-game/step05/img/player-green-1.png differ
diff --git a/Projects/space-game/step05/img/player-green-2.png b/Projects/space-game/step05/img/player-green-2.png
new file mode 100644
index 000000000..72e18c7ff
Binary files /dev/null and b/Projects/space-game/step05/img/player-green-2.png differ
diff --git a/Projects/space-game/step05/img/player-green-3.png b/Projects/space-game/step05/img/player-green-3.png
new file mode 100644
index 000000000..b853be42a
Binary files /dev/null and b/Projects/space-game/step05/img/player-green-3.png differ
diff --git a/Projects/space-game/step05/img/player-orange-1.png b/Projects/space-game/step05/img/player-orange-1.png
new file mode 100644
index 000000000..3902283d4
Binary files /dev/null and b/Projects/space-game/step05/img/player-orange-1.png differ
diff --git a/Projects/space-game/step05/img/player-orange-2.png b/Projects/space-game/step05/img/player-orange-2.png
new file mode 100644
index 000000000..82ddc8068
Binary files /dev/null and b/Projects/space-game/step05/img/player-orange-2.png differ
diff --git a/Projects/space-game/step05/img/player-orange-3.png b/Projects/space-game/step05/img/player-orange-3.png
new file mode 100644
index 000000000..0b6b7ec68
Binary files /dev/null and b/Projects/space-game/step05/img/player-orange-3.png differ
diff --git a/Projects/space-game/step05/img/player-red-1.png b/Projects/space-game/step05/img/player-red-1.png
new file mode 100644
index 000000000..3695e09e2
Binary files /dev/null and b/Projects/space-game/step05/img/player-red-1.png differ
diff --git a/Projects/space-game/step05/img/player-red-2.png b/Projects/space-game/step05/img/player-red-2.png
new file mode 100644
index 000000000..8213e978d
Binary files /dev/null and b/Projects/space-game/step05/img/player-red-2.png differ
diff --git a/Projects/space-game/step05/img/player-red-3.png b/Projects/space-game/step05/img/player-red-3.png
new file mode 100644
index 000000000..796e81d71
Binary files /dev/null and b/Projects/space-game/step05/img/player-red-3.png differ
diff --git a/Projects/space-game/step05/index.html b/Projects/space-game/step05/index.html
new file mode 100644
index 000000000..1ebb1e695
--- /dev/null
+++ b/Projects/space-game/step05/index.html
@@ -0,0 +1,32 @@
+
+
+
+
+
+
+ Space Game
+
+
+
+
+
+ Space Game
+
+
+
+
Congratulations!
+
You won the game
+
+
+
+
GAME OVER
+
You lost the game
+
+
+
+
+
+
+
+
+
diff --git a/Projects/space-game/step05/js/game.js b/Projects/space-game/step05/js/game.js
new file mode 100644
index 000000000..a5e8bdb25
--- /dev/null
+++ b/Projects/space-game/step05/js/game.js
@@ -0,0 +1,146 @@
+const KEY_CODE_LEFT = 37;
+const KEY_CODE_RIGHT = 39;
+const KEY_CODE_SPACE = 32;
+
+const GAME_WIDTH = 800;
+const GAME_HEIGHT = 600;
+
+const PLAYER_WIDTH = 20;
+const PLAYER_MAX_SPEED = 600.0;
+const LASER_MAX_SPEED = 300.0;
+const LASER_COOLDOWN = 0.5;
+
+const GAME_STATE = {
+ lastTime: Date.now(),
+ leftPressed: false,
+ rightPressed: false,
+ spacePressed: false,
+ playerX: 0,
+ playerY: 0,
+ playerCooldown: 0,
+ lasers: [],
+};
+
+function setPosition(el, x, y) {
+ el.style.transform = `translate(${x}px, ${y}px)`;
+}
+
+function clamp(v, min, max) {
+ if (v < min) {
+ return min;
+ } else if (v > max) {
+ return max;
+ } else {
+ return v;
+ }
+}
+
+function createPlayer(container, x, y) {
+ GAME_STATE.playerX = GAME_WIDTH / 2;
+ GAME_STATE.playerY = GAME_HEIGHT - 50;
+ const player = document.createElement("img");
+ player.src = "img/player-blue-1.png";
+ player.className = "player";
+ container.appendChild(player);
+ setPosition(player, GAME_STATE.playerX, GAME_STATE.playerY);
+}
+
+function updatePlayer(dt, container) {
+ if (GAME_STATE.leftPressed) {
+ GAME_STATE.playerX -= dt * PLAYER_MAX_SPEED;
+ }
+ if (GAME_STATE.rightPressed) {
+ GAME_STATE.playerX += dt * PLAYER_MAX_SPEED;
+ }
+
+ GAME_STATE.playerX = clamp(
+ GAME_STATE.playerX,
+ PLAYER_WIDTH,
+ GAME_WIDTH - PLAYER_WIDTH
+ );
+
+ if (GAME_STATE.spacePressed && GAME_STATE.playerCooldown <= 0) {
+ createLaser(container, GAME_STATE.playerX, GAME_STATE.playerY);
+ GAME_STATE.playerCooldown = LASER_COOLDOWN;
+ }
+ if (GAME_STATE.playerCooldown > 0) {
+ GAME_STATE.playerCooldown -= dt;
+ }
+
+ const player = document.querySelector(".player");
+ setPosition(player, GAME_STATE.playerX, GAME_STATE.playerY);
+}
+
+function createLaser(container, x, y) {
+ const element = document.createElement("img");
+ element.src = "img/laser-blue-1.png";
+ element.className = "laser";
+ container.appendChild(element);
+ const laser = { x, y, element };
+ GAME_STATE.lasers.push(laser);
+ const audio = new Audio("sound/sfx-laser1.ogg");
+ audio.play();
+ setPosition(element, x, y);
+}
+
+function updateLasers(dt, container) {
+ const lasers = GAME_STATE.lasers;
+ for (let i = 0; i < lasers.length; i++) {
+ const laser = lasers[i];
+ laser.y -= dt * LASER_MAX_SPEED;
+ if (laser.y < 0) {
+ destroyLaser(container, laser);
+ }
+ setPosition(laser.element, laser.x, laser.y);
+ }
+ GAME_STATE.lasers = GAME_STATE.lasers.filter(e => !e.isDead);
+}
+
+function destroyLaser(container, laser) {
+ container.removeChild(laser.element);
+ laser.isDead = true;
+}
+
+function init() {
+ const container = document.querySelector(".game");
+ GAME_STATE.playerX = GAME_WIDTH / 2;
+ GAME_STATE.playerY = GAME_HEIGHT - 50;
+ createPlayer(container);
+}
+
+function update(e) {
+ const currentTime = Date.now();
+ const dt = (currentTime - GAME_STATE.lastTime) / 1000.0;
+
+ const container = document.querySelector(".game");
+ updatePlayer(dt, container);
+ updateLasers(dt, container);
+
+ GAME_STATE.lastTime = currentTime;
+ window.requestAnimationFrame(update);
+}
+
+function onKeyDown(e) {
+ if (e.keyCode === KEY_CODE_LEFT) {
+ GAME_STATE.leftPressed = true;
+ } else if (e.keyCode === KEY_CODE_RIGHT) {
+ GAME_STATE.rightPressed = true;
+ } else if (e.keyCode === KEY_CODE_SPACE) {
+ GAME_STATE.spacePressed = true;
+ }
+}
+
+function onKeyUp(e) {
+ if (e.keyCode === KEY_CODE_LEFT) {
+ GAME_STATE.leftPressed = false;
+ } else if (e.keyCode === KEY_CODE_RIGHT) {
+ GAME_STATE.rightPressed = false;
+ } else if (e.keyCode === KEY_CODE_SPACE) {
+ GAME_STATE.spacePressed = false;
+ }
+}
+
+init();
+window.addEventListener("keydown", onKeyDown);
+window.addEventListener("keyup", onKeyUp);
+window.requestAnimationFrame(update);
diff --git a/Projects/space-game/step05/sound/sfx-laser1.ogg b/Projects/space-game/step05/sound/sfx-laser1.ogg
new file mode 100644
index 000000000..7a9a4d2f2
Binary files /dev/null and b/Projects/space-game/step05/sound/sfx-laser1.ogg differ
diff --git a/Projects/space-game/step05/sound/sfx-lose.ogg b/Projects/space-game/step05/sound/sfx-lose.ogg
new file mode 100644
index 000000000..496968f8d
Binary files /dev/null and b/Projects/space-game/step05/sound/sfx-lose.ogg differ
diff --git a/Projects/space-game/step06/README.md b/Projects/space-game/step06/README.md
new file mode 100644
index 000000000..52edadaf2
--- /dev/null
+++ b/Projects/space-game/step06/README.md
@@ -0,0 +1,17 @@
+# Step 6 - Creating the enemies
+
+[Play this version](https://rawgit.com/HackYourFutureBelgium/JavaScript2/master/Projects/space-game/step06/index.html)
+
+We create a grid of enemies. The amount of enemies per row is fixed, so we calculate the spacing between the enemies as such:
+
+```
+const enemySpacing = (GAME_WIDTH - ENEMY_HORIZONTAL_PADDING * 2) / (ENEMIES_PER_ROW - 1);
+```
+
+We divide the space of the GAME_WIDTH (minus the padding on both sides) evenly over all enemies. Because we want to calculate the spacing *between* the enemies, we take the amount of enemies - 1.
+
+Just like we have a `updatePlayer` and `updateLasers` method, we create a `updateEnemies` function.
+
+To have the enemies rotate, we use a sine/cosine function. This rotates them around a circle, based on the current time.
+
+Note that our lasers have no effect: whenever they hit an enemy, nothing happens. We will change this in step 7.
diff --git a/Projects/space-game/step06/css/main.css b/Projects/space-game/step06/css/main.css
new file mode 100644
index 000000000..112ed105b
--- /dev/null
+++ b/Projects/space-game/step06/css/main.css
@@ -0,0 +1,135 @@
+html,
+body {
+ height: 100%;
+ overflow: hidden;
+}
+
+body {
+ margin: 0;
+ font: 16px sans-serif;
+}
+
+.wrap {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+}
+
+header {
+ text-align: center;
+ background: black;
+ color: #fff;
+ padding: 10px;
+}
+
+footer {
+ padding: 10px;
+ text-align: center;
+ font-size: 11px;
+ background: black;
+ color: white;
+}
+
+.game-wrapper {
+ flex: 1;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background: #222;
+}
+.game {
+ width: 800px;
+ height: 600px;
+ background: url(../img/background-blue.png);
+ animation: scroll-background 5s linear infinite;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+ position: relative;
+}
+
+@keyframes scroll-background {
+ from {
+ background-position-y: 0px;
+ }
+ to {
+ background-position-y: 256px;
+ }
+}
+
+.game .enemy {
+ position: absolute;
+ margin-left: -20px;
+ margin-top: -18px;
+ width: 40px;
+}
+
+.game .player {
+ position: absolute;
+ margin-left: -20px;
+ width: 40px;
+}
+
+.game .laser {
+ position: absolute;
+ margin-left: -2.5px;
+ height: 30px;
+}
+
+.game .enemy-laser {
+ position: absolute;
+ margin-left: -2.5px;
+ height: 30px;
+}
+
+.congratulations {
+ display: none;
+ position: absolute;
+ background: #c7a526;
+ color: white;
+ padding: 20px 50px;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+ border-radius: 10px;
+ text-align: center;
+ animation: pop-in 1s;
+}
+
+.game-over {
+ display: none;
+ position: absolute;
+ background: #6b1818;
+ color: white;
+ padding: 20px 50px;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+ border-radius: 10px;
+ text-align: center;
+ animation: pop-in 1s;
+}
+
+.btn {
+ border: 2px solid #36bbf5;
+ border-radius: 3px;
+ box-shadow: 0 2px rgba(0, 0, 0, 0.15);
+ background: linear-gradient(
+ to bottom,
+ #fff 0%,
+ #fff 49%,
+ #f5f5f5 50%,
+ #eee 100%
+ );
+ padding: 10px 40px;
+ font: 14px sans-serif;
+}
+@keyframes pop-in {
+ 0% {
+ opacity: 0;
+ transform: translate(0, -100px);
+ }
+ 10% {
+ opacity: 1;
+ }
+ 50% {
+ transform: translate(0, 30px);
+ }
+ 100% {
+ transform: translate(0, 0);
+ }
+}
diff --git a/Projects/space-game/step06/img/background-black.png b/Projects/space-game/step06/img/background-black.png
new file mode 100644
index 000000000..82ddab992
Binary files /dev/null and b/Projects/space-game/step06/img/background-black.png differ
diff --git a/Projects/space-game/step06/img/background-blue.png b/Projects/space-game/step06/img/background-blue.png
new file mode 100644
index 000000000..47642cd5d
Binary files /dev/null and b/Projects/space-game/step06/img/background-blue.png differ
diff --git a/Projects/space-game/step06/img/background-dark-purple.png b/Projects/space-game/step06/img/background-dark-purple.png
new file mode 100644
index 000000000..d9c3fd42d
Binary files /dev/null and b/Projects/space-game/step06/img/background-dark-purple.png differ
diff --git a/Projects/space-game/step06/img/background-purple.png b/Projects/space-game/step06/img/background-purple.png
new file mode 100644
index 000000000..5e8617769
Binary files /dev/null and b/Projects/space-game/step06/img/background-purple.png differ
diff --git a/Projects/space-game/step06/img/enemy-black-1.png b/Projects/space-game/step06/img/enemy-black-1.png
new file mode 100644
index 000000000..bc2fa4c1c
Binary files /dev/null and b/Projects/space-game/step06/img/enemy-black-1.png differ
diff --git a/Projects/space-game/step06/img/enemy-black-2.png b/Projects/space-game/step06/img/enemy-black-2.png
new file mode 100644
index 000000000..0e6b91c56
Binary files /dev/null and b/Projects/space-game/step06/img/enemy-black-2.png differ
diff --git a/Projects/space-game/step06/img/enemy-black-3.png b/Projects/space-game/step06/img/enemy-black-3.png
new file mode 100644
index 000000000..dafec1b16
Binary files /dev/null and b/Projects/space-game/step06/img/enemy-black-3.png differ
diff --git a/Projects/space-game/step06/img/enemy-black-4.png b/Projects/space-game/step06/img/enemy-black-4.png
new file mode 100644
index 000000000..a575c9d49
Binary files /dev/null and b/Projects/space-game/step06/img/enemy-black-4.png differ
diff --git a/Projects/space-game/step06/img/enemy-black-5.png b/Projects/space-game/step06/img/enemy-black-5.png
new file mode 100644
index 000000000..739dcf0fe
Binary files /dev/null and b/Projects/space-game/step06/img/enemy-black-5.png differ
diff --git a/Projects/space-game/step06/img/enemy-blue-1.png b/Projects/space-game/step06/img/enemy-blue-1.png
new file mode 100644
index 000000000..cedc0730d
Binary files /dev/null and b/Projects/space-game/step06/img/enemy-blue-1.png differ
diff --git a/Projects/space-game/step06/img/enemy-blue-2.png b/Projects/space-game/step06/img/enemy-blue-2.png
new file mode 100644
index 000000000..bf3bd0c9f
Binary files /dev/null and b/Projects/space-game/step06/img/enemy-blue-2.png differ
diff --git a/Projects/space-game/step06/img/enemy-blue-3.png b/Projects/space-game/step06/img/enemy-blue-3.png
new file mode 100644
index 000000000..9a63d03b0
Binary files /dev/null and b/Projects/space-game/step06/img/enemy-blue-3.png differ
diff --git a/Projects/space-game/step06/img/enemy-blue-4.png b/Projects/space-game/step06/img/enemy-blue-4.png
new file mode 100644
index 000000000..d5670a3a5
Binary files /dev/null and b/Projects/space-game/step06/img/enemy-blue-4.png differ
diff --git a/Projects/space-game/step06/img/enemy-blue-5.png b/Projects/space-game/step06/img/enemy-blue-5.png
new file mode 100644
index 000000000..e740509f7
Binary files /dev/null and b/Projects/space-game/step06/img/enemy-blue-5.png differ
diff --git a/Projects/space-game/step06/img/enemy-green-1.png b/Projects/space-game/step06/img/enemy-green-1.png
new file mode 100644
index 000000000..064e29037
Binary files /dev/null and b/Projects/space-game/step06/img/enemy-green-1.png differ
diff --git a/Projects/space-game/step06/img/enemy-green-2.png b/Projects/space-game/step06/img/enemy-green-2.png
new file mode 100644
index 000000000..5189d2459
Binary files /dev/null and b/Projects/space-game/step06/img/enemy-green-2.png differ
diff --git a/Projects/space-game/step06/img/enemy-green-3.png b/Projects/space-game/step06/img/enemy-green-3.png
new file mode 100644
index 000000000..74e2bca68
Binary files /dev/null and b/Projects/space-game/step06/img/enemy-green-3.png differ
diff --git a/Projects/space-game/step06/img/enemy-green-4.png b/Projects/space-game/step06/img/enemy-green-4.png
new file mode 100644
index 000000000..112e299f8
Binary files /dev/null and b/Projects/space-game/step06/img/enemy-green-4.png differ
diff --git a/Projects/space-game/step06/img/enemy-green-5.png b/Projects/space-game/step06/img/enemy-green-5.png
new file mode 100644
index 000000000..59382705b
Binary files /dev/null and b/Projects/space-game/step06/img/enemy-green-5.png differ
diff --git a/Projects/space-game/step06/img/enemy-red-1.png b/Projects/space-game/step06/img/enemy-red-1.png
new file mode 100644
index 000000000..fb0c0a2ca
Binary files /dev/null and b/Projects/space-game/step06/img/enemy-red-1.png differ
diff --git a/Projects/space-game/step06/img/enemy-red-2.png b/Projects/space-game/step06/img/enemy-red-2.png
new file mode 100644
index 000000000..3ee96c571
Binary files /dev/null and b/Projects/space-game/step06/img/enemy-red-2.png differ
diff --git a/Projects/space-game/step06/img/enemy-red-3.png b/Projects/space-game/step06/img/enemy-red-3.png
new file mode 100644
index 000000000..bc8eacd99
Binary files /dev/null and b/Projects/space-game/step06/img/enemy-red-3.png differ
diff --git a/Projects/space-game/step06/img/enemy-red-4.png b/Projects/space-game/step06/img/enemy-red-4.png
new file mode 100644
index 000000000..a3216d4bf
Binary files /dev/null and b/Projects/space-game/step06/img/enemy-red-4.png differ
diff --git a/Projects/space-game/step06/img/enemy-red-5.png b/Projects/space-game/step06/img/enemy-red-5.png
new file mode 100644
index 000000000..645cdf3c8
Binary files /dev/null and b/Projects/space-game/step06/img/enemy-red-5.png differ
diff --git a/Projects/space-game/step06/img/laser-blue-1.png b/Projects/space-game/step06/img/laser-blue-1.png
new file mode 100644
index 000000000..b76aaf7a0
Binary files /dev/null and b/Projects/space-game/step06/img/laser-blue-1.png differ
diff --git a/Projects/space-game/step06/img/laser-blue-10.png b/Projects/space-game/step06/img/laser-blue-10.png
new file mode 100644
index 000000000..dd6b766a4
Binary files /dev/null and b/Projects/space-game/step06/img/laser-blue-10.png differ
diff --git a/Projects/space-game/step06/img/laser-blue-11.png b/Projects/space-game/step06/img/laser-blue-11.png
new file mode 100644
index 000000000..c06234958
Binary files /dev/null and b/Projects/space-game/step06/img/laser-blue-11.png differ
diff --git a/Projects/space-game/step06/img/laser-blue-12.png b/Projects/space-game/step06/img/laser-blue-12.png
new file mode 100644
index 000000000..48b6103e1
Binary files /dev/null and b/Projects/space-game/step06/img/laser-blue-12.png differ
diff --git a/Projects/space-game/step06/img/laser-blue-13.png b/Projects/space-game/step06/img/laser-blue-13.png
new file mode 100644
index 000000000..c5ec6a329
Binary files /dev/null and b/Projects/space-game/step06/img/laser-blue-13.png differ
diff --git a/Projects/space-game/step06/img/laser-blue-14.png b/Projects/space-game/step06/img/laser-blue-14.png
new file mode 100644
index 000000000..254601e5f
Binary files /dev/null and b/Projects/space-game/step06/img/laser-blue-14.png differ
diff --git a/Projects/space-game/step06/img/laser-blue-15.png b/Projects/space-game/step06/img/laser-blue-15.png
new file mode 100644
index 000000000..1ea1966d5
Binary files /dev/null and b/Projects/space-game/step06/img/laser-blue-15.png differ
diff --git a/Projects/space-game/step06/img/laser-blue-16.png b/Projects/space-game/step06/img/laser-blue-16.png
new file mode 100644
index 000000000..1def98fb6
Binary files /dev/null and b/Projects/space-game/step06/img/laser-blue-16.png differ
diff --git a/Projects/space-game/step06/img/laser-blue-2.png b/Projects/space-game/step06/img/laser-blue-2.png
new file mode 100644
index 000000000..3f923a394
Binary files /dev/null and b/Projects/space-game/step06/img/laser-blue-2.png differ
diff --git a/Projects/space-game/step06/img/laser-blue-3.png b/Projects/space-game/step06/img/laser-blue-3.png
new file mode 100644
index 000000000..a16e9a82e
Binary files /dev/null and b/Projects/space-game/step06/img/laser-blue-3.png differ
diff --git a/Projects/space-game/step06/img/laser-blue-4.png b/Projects/space-game/step06/img/laser-blue-4.png
new file mode 100644
index 000000000..6f3b9103a
Binary files /dev/null and b/Projects/space-game/step06/img/laser-blue-4.png differ
diff --git a/Projects/space-game/step06/img/laser-blue-5.png b/Projects/space-game/step06/img/laser-blue-5.png
new file mode 100644
index 000000000..85cff7d5d
Binary files /dev/null and b/Projects/space-game/step06/img/laser-blue-5.png differ
diff --git a/Projects/space-game/step06/img/laser-blue-6.png b/Projects/space-game/step06/img/laser-blue-6.png
new file mode 100644
index 000000000..a621875c5
Binary files /dev/null and b/Projects/space-game/step06/img/laser-blue-6.png differ
diff --git a/Projects/space-game/step06/img/laser-blue-7.png b/Projects/space-game/step06/img/laser-blue-7.png
new file mode 100644
index 000000000..e1848bfc3
Binary files /dev/null and b/Projects/space-game/step06/img/laser-blue-7.png differ
diff --git a/Projects/space-game/step06/img/laser-blue-8.png b/Projects/space-game/step06/img/laser-blue-8.png
new file mode 100644
index 000000000..7a463965c
Binary files /dev/null and b/Projects/space-game/step06/img/laser-blue-8.png differ
diff --git a/Projects/space-game/step06/img/laser-blue-9.png b/Projects/space-game/step06/img/laser-blue-9.png
new file mode 100644
index 000000000..35624e649
Binary files /dev/null and b/Projects/space-game/step06/img/laser-blue-9.png differ
diff --git a/Projects/space-game/step06/img/laser-green-1.png b/Projects/space-game/step06/img/laser-green-1.png
new file mode 100644
index 000000000..c9982b1ed
Binary files /dev/null and b/Projects/space-game/step06/img/laser-green-1.png differ
diff --git a/Projects/space-game/step06/img/laser-green-10.png b/Projects/space-game/step06/img/laser-green-10.png
new file mode 100644
index 000000000..9c7974c69
Binary files /dev/null and b/Projects/space-game/step06/img/laser-green-10.png differ
diff --git a/Projects/space-game/step06/img/laser-green-11.png b/Projects/space-game/step06/img/laser-green-11.png
new file mode 100644
index 000000000..100cddbd4
Binary files /dev/null and b/Projects/space-game/step06/img/laser-green-11.png differ
diff --git a/Projects/space-game/step06/img/laser-green-12.png b/Projects/space-game/step06/img/laser-green-12.png
new file mode 100644
index 000000000..b05a72fa6
Binary files /dev/null and b/Projects/space-game/step06/img/laser-green-12.png differ
diff --git a/Projects/space-game/step06/img/laser-green-13.png b/Projects/space-game/step06/img/laser-green-13.png
new file mode 100644
index 000000000..92cc35334
Binary files /dev/null and b/Projects/space-game/step06/img/laser-green-13.png differ
diff --git a/Projects/space-game/step06/img/laser-green-14.png b/Projects/space-game/step06/img/laser-green-14.png
new file mode 100644
index 000000000..7abd3b29b
Binary files /dev/null and b/Projects/space-game/step06/img/laser-green-14.png differ
diff --git a/Projects/space-game/step06/img/laser-green-15.png b/Projects/space-game/step06/img/laser-green-15.png
new file mode 100644
index 000000000..97a44051d
Binary files /dev/null and b/Projects/space-game/step06/img/laser-green-15.png differ
diff --git a/Projects/space-game/step06/img/laser-green-16.png b/Projects/space-game/step06/img/laser-green-16.png
new file mode 100644
index 000000000..b73c12fb9
Binary files /dev/null and b/Projects/space-game/step06/img/laser-green-16.png differ
diff --git a/Projects/space-game/step06/img/laser-green-2.png b/Projects/space-game/step06/img/laser-green-2.png
new file mode 100644
index 000000000..5cd78303e
Binary files /dev/null and b/Projects/space-game/step06/img/laser-green-2.png differ
diff --git a/Projects/space-game/step06/img/laser-green-3.png b/Projects/space-game/step06/img/laser-green-3.png
new file mode 100644
index 000000000..d658547bc
Binary files /dev/null and b/Projects/space-game/step06/img/laser-green-3.png differ
diff --git a/Projects/space-game/step06/img/laser-green-4.png b/Projects/space-game/step06/img/laser-green-4.png
new file mode 100644
index 000000000..61b04fb71
Binary files /dev/null and b/Projects/space-game/step06/img/laser-green-4.png differ
diff --git a/Projects/space-game/step06/img/laser-green-5.png b/Projects/space-game/step06/img/laser-green-5.png
new file mode 100644
index 000000000..98ae6bee2
Binary files /dev/null and b/Projects/space-game/step06/img/laser-green-5.png differ
diff --git a/Projects/space-game/step06/img/laser-green-6.png b/Projects/space-game/step06/img/laser-green-6.png
new file mode 100644
index 000000000..36dd94d46
Binary files /dev/null and b/Projects/space-game/step06/img/laser-green-6.png differ
diff --git a/Projects/space-game/step06/img/laser-green-7.png b/Projects/space-game/step06/img/laser-green-7.png
new file mode 100644
index 000000000..0ae7c2d0c
Binary files /dev/null and b/Projects/space-game/step06/img/laser-green-7.png differ
diff --git a/Projects/space-game/step06/img/laser-green-8.png b/Projects/space-game/step06/img/laser-green-8.png
new file mode 100644
index 000000000..0ff1d80f9
Binary files /dev/null and b/Projects/space-game/step06/img/laser-green-8.png differ
diff --git a/Projects/space-game/step06/img/laser-green-9.png b/Projects/space-game/step06/img/laser-green-9.png
new file mode 100644
index 000000000..932056b9f
Binary files /dev/null and b/Projects/space-game/step06/img/laser-green-9.png differ
diff --git a/Projects/space-game/step06/img/laser-red-1.png b/Projects/space-game/step06/img/laser-red-1.png
new file mode 100644
index 000000000..5e467b65b
Binary files /dev/null and b/Projects/space-game/step06/img/laser-red-1.png differ
diff --git a/Projects/space-game/step06/img/laser-red-10.png b/Projects/space-game/step06/img/laser-red-10.png
new file mode 100644
index 000000000..0f85ba1b0
Binary files /dev/null and b/Projects/space-game/step06/img/laser-red-10.png differ
diff --git a/Projects/space-game/step06/img/laser-red-11.png b/Projects/space-game/step06/img/laser-red-11.png
new file mode 100644
index 000000000..95e9c0a14
Binary files /dev/null and b/Projects/space-game/step06/img/laser-red-11.png differ
diff --git a/Projects/space-game/step06/img/laser-red-12.png b/Projects/space-game/step06/img/laser-red-12.png
new file mode 100644
index 000000000..9f56da0ce
Binary files /dev/null and b/Projects/space-game/step06/img/laser-red-12.png differ
diff --git a/Projects/space-game/step06/img/laser-red-13.png b/Projects/space-game/step06/img/laser-red-13.png
new file mode 100644
index 000000000..292bcc5d5
Binary files /dev/null and b/Projects/space-game/step06/img/laser-red-13.png differ
diff --git a/Projects/space-game/step06/img/laser-red-14.png b/Projects/space-game/step06/img/laser-red-14.png
new file mode 100644
index 000000000..eaf8346de
Binary files /dev/null and b/Projects/space-game/step06/img/laser-red-14.png differ
diff --git a/Projects/space-game/step06/img/laser-red-15.png b/Projects/space-game/step06/img/laser-red-15.png
new file mode 100644
index 000000000..7d27c2a94
Binary files /dev/null and b/Projects/space-game/step06/img/laser-red-15.png differ
diff --git a/Projects/space-game/step06/img/laser-red-16.png b/Projects/space-game/step06/img/laser-red-16.png
new file mode 100644
index 000000000..b12fcd5d4
Binary files /dev/null and b/Projects/space-game/step06/img/laser-red-16.png differ
diff --git a/Projects/space-game/step06/img/laser-red-2.png b/Projects/space-game/step06/img/laser-red-2.png
new file mode 100644
index 000000000..1127fffb6
Binary files /dev/null and b/Projects/space-game/step06/img/laser-red-2.png differ
diff --git a/Projects/space-game/step06/img/laser-red-3.png b/Projects/space-game/step06/img/laser-red-3.png
new file mode 100644
index 000000000..bc1bb8730
Binary files /dev/null and b/Projects/space-game/step06/img/laser-red-3.png differ
diff --git a/Projects/space-game/step06/img/laser-red-4.png b/Projects/space-game/step06/img/laser-red-4.png
new file mode 100644
index 000000000..fc3655b0f
Binary files /dev/null and b/Projects/space-game/step06/img/laser-red-4.png differ
diff --git a/Projects/space-game/step06/img/laser-red-5.png b/Projects/space-game/step06/img/laser-red-5.png
new file mode 100644
index 000000000..46db2d77f
Binary files /dev/null and b/Projects/space-game/step06/img/laser-red-5.png differ
diff --git a/Projects/space-game/step06/img/laser-red-6.png b/Projects/space-game/step06/img/laser-red-6.png
new file mode 100644
index 000000000..33614ae1a
Binary files /dev/null and b/Projects/space-game/step06/img/laser-red-6.png differ
diff --git a/Projects/space-game/step06/img/laser-red-7.png b/Projects/space-game/step06/img/laser-red-7.png
new file mode 100644
index 000000000..23bab346f
Binary files /dev/null and b/Projects/space-game/step06/img/laser-red-7.png differ
diff --git a/Projects/space-game/step06/img/laser-red-8.png b/Projects/space-game/step06/img/laser-red-8.png
new file mode 100644
index 000000000..5a2cce30e
Binary files /dev/null and b/Projects/space-game/step06/img/laser-red-8.png differ
diff --git a/Projects/space-game/step06/img/laser-red-9.png b/Projects/space-game/step06/img/laser-red-9.png
new file mode 100644
index 000000000..7dc31dcc2
Binary files /dev/null and b/Projects/space-game/step06/img/laser-red-9.png differ
diff --git a/Projects/space-game/step06/img/player-blue-1.png b/Projects/space-game/step06/img/player-blue-1.png
new file mode 100644
index 000000000..cecbbed97
Binary files /dev/null and b/Projects/space-game/step06/img/player-blue-1.png differ
diff --git a/Projects/space-game/step06/img/player-blue-2.png b/Projects/space-game/step06/img/player-blue-2.png
new file mode 100644
index 000000000..e277114fd
Binary files /dev/null and b/Projects/space-game/step06/img/player-blue-2.png differ
diff --git a/Projects/space-game/step06/img/player-blue-3.png b/Projects/space-game/step06/img/player-blue-3.png
new file mode 100644
index 000000000..f34faf066
Binary files /dev/null and b/Projects/space-game/step06/img/player-blue-3.png differ
diff --git a/Projects/space-game/step06/img/player-green-1.png b/Projects/space-game/step06/img/player-green-1.png
new file mode 100644
index 000000000..2eb6f9c06
Binary files /dev/null and b/Projects/space-game/step06/img/player-green-1.png differ
diff --git a/Projects/space-game/step06/img/player-green-2.png b/Projects/space-game/step06/img/player-green-2.png
new file mode 100644
index 000000000..72e18c7ff
Binary files /dev/null and b/Projects/space-game/step06/img/player-green-2.png differ
diff --git a/Projects/space-game/step06/img/player-green-3.png b/Projects/space-game/step06/img/player-green-3.png
new file mode 100644
index 000000000..b853be42a
Binary files /dev/null and b/Projects/space-game/step06/img/player-green-3.png differ
diff --git a/Projects/space-game/step06/img/player-orange-1.png b/Projects/space-game/step06/img/player-orange-1.png
new file mode 100644
index 000000000..3902283d4
Binary files /dev/null and b/Projects/space-game/step06/img/player-orange-1.png differ
diff --git a/Projects/space-game/step06/img/player-orange-2.png b/Projects/space-game/step06/img/player-orange-2.png
new file mode 100644
index 000000000..82ddc8068
Binary files /dev/null and b/Projects/space-game/step06/img/player-orange-2.png differ
diff --git a/Projects/space-game/step06/img/player-orange-3.png b/Projects/space-game/step06/img/player-orange-3.png
new file mode 100644
index 000000000..0b6b7ec68
Binary files /dev/null and b/Projects/space-game/step06/img/player-orange-3.png differ
diff --git a/Projects/space-game/step06/img/player-red-1.png b/Projects/space-game/step06/img/player-red-1.png
new file mode 100644
index 000000000..3695e09e2
Binary files /dev/null and b/Projects/space-game/step06/img/player-red-1.png differ
diff --git a/Projects/space-game/step06/img/player-red-2.png b/Projects/space-game/step06/img/player-red-2.png
new file mode 100644
index 000000000..8213e978d
Binary files /dev/null and b/Projects/space-game/step06/img/player-red-2.png differ
diff --git a/Projects/space-game/step06/img/player-red-3.png b/Projects/space-game/step06/img/player-red-3.png
new file mode 100644
index 000000000..796e81d71
Binary files /dev/null and b/Projects/space-game/step06/img/player-red-3.png differ
diff --git a/Projects/space-game/step06/index.html b/Projects/space-game/step06/index.html
new file mode 100644
index 000000000..1ebb1e695
--- /dev/null
+++ b/Projects/space-game/step06/index.html
@@ -0,0 +1,32 @@
+
+
+
+
+
+
+ Space Game
+
+
+
+
+
+ Space Game
+
+
+
+
Congratulations!
+
You won the game
+
+
+
+
GAME OVER
+
You lost the game
+
+
+
+
+
+
+
+
+
diff --git a/Projects/space-game/step06/js/game.js b/Projects/space-game/step06/js/game.js
new file mode 100644
index 000000000..d7ff12cb5
--- /dev/null
+++ b/Projects/space-game/step06/js/game.js
@@ -0,0 +1,187 @@
+const KEY_CODE_LEFT = 37;
+const KEY_CODE_RIGHT = 39;
+const KEY_CODE_SPACE = 32;
+
+const GAME_WIDTH = 800;
+const GAME_HEIGHT = 600;
+
+const PLAYER_WIDTH = 20;
+const PLAYER_MAX_SPEED = 600.0;
+const LASER_MAX_SPEED = 300.0;
+const LASER_COOLDOWN = 0.5;
+
+const ENEMIES_PER_ROW = 10;
+const ENEMY_HORIZONTAL_PADDING = 80;
+const ENEMY_VERTICAL_PADDING = 70;
+const ENEMY_VERTICAL_SPACING = 80;
+
+const GAME_STATE = {
+ lastTime: Date.now(),
+ leftPressed: false,
+ rightPressed: false,
+ spacePressed: false,
+ playerX: 0,
+ playerY: 0,
+ playerCooldown: 0,
+ lasers: [],
+ enemies: [],
+};
+
+function setPosition(el, x, y) {
+ el.style.transform = `translate(${x}px, ${y}px)`;
+}
+
+function clamp(v, min, max) {
+ if (v < min) {
+ return min;
+ } else if (v > max) {
+ return max;
+ } else {
+ return v;
+ }
+}
+
+function createPlayer(container) {
+ GAME_STATE.playerX = GAME_WIDTH / 2;
+ GAME_STATE.playerY = GAME_HEIGHT - 50;
+ const player = document.createElement("img");
+ player.src = "img/player-blue-1.png";
+ player.className = "player";
+ container.appendChild(player);
+ setPosition(player, GAME_STATE.playerX, GAME_STATE.playerY);
+}
+
+function updatePlayer(dt, container) {
+ if (GAME_STATE.leftPressed) {
+ GAME_STATE.playerX -= dt * PLAYER_MAX_SPEED;
+ }
+ if (GAME_STATE.rightPressed) {
+ GAME_STATE.playerX += dt * PLAYER_MAX_SPEED;
+ }
+
+ GAME_STATE.playerX = clamp(
+ GAME_STATE.playerX,
+ PLAYER_WIDTH,
+ GAME_WIDTH - PLAYER_WIDTH
+ );
+
+ if (GAME_STATE.spacePressed && GAME_STATE.playerCooldown <= 0) {
+ createLaser(container, GAME_STATE.playerX, GAME_STATE.playerY);
+ GAME_STATE.playerCooldown = LASER_COOLDOWN;
+ }
+ if (GAME_STATE.playerCooldown > 0) {
+ GAME_STATE.playerCooldown -= dt;
+ }
+
+ const player = document.querySelector(".player");
+ setPosition(player, GAME_STATE.playerX, GAME_STATE.playerY);
+}
+
+function createLaser(container, x, y) {
+ const element = document.createElement("img");
+ element.src = "img/laser-blue-1.png";
+ element.className = "laser";
+ container.appendChild(element);
+ const laser = { x, y, element };
+ GAME_STATE.lasers.push(laser);
+ const audio = new Audio("sound/sfx-laser1.ogg");
+ audio.play();
+ setPosition(element, x, y);
+}
+
+function updateLasers(dt, container) {
+ const lasers = GAME_STATE.lasers;
+ for (let i = 0; i < lasers.length; i++) {
+ const laser = lasers[i];
+ laser.y -= dt * LASER_MAX_SPEED;
+ if (laser.y < 0) {
+ destroyLaser(container, laser);
+ }
+ setPosition(laser.element, laser.x, laser.y);
+ }
+ GAME_STATE.lasers = GAME_STATE.lasers.filter(e => !e.isDead);
+}
+
+function destroyLaser(container, laser) {
+ container.removeChild(laser.element);
+ laser.isDead = true;
+}
+
+function createEnemy(container, x, y) {
+ const element = document.createElement("img");
+ element.src = "img/enemy-blue-1.png";
+ element.className = "enemy";
+ container.appendChild(element);
+ const enemy = {
+ x,
+ y,
+ element
+ };
+ GAME_STATE.enemies.push(enemy);
+ setPosition(element, x, y);
+}
+
+function updateEnemies(dt, container) {
+ const dx = Math.sin(GAME_STATE.lastTime / 1000.0) * 50;
+ const dy = Math.cos(GAME_STATE.lastTime / 1000.0) * 10;
+
+ const enemies = GAME_STATE.enemies;
+ for (let i = 0; i < enemies.length; i++) {
+ const enemy = enemies[i];
+ const x = enemy.x + dx;
+ const y = enemy.y + dy;
+ setPosition(enemy.element, x, y);
+ }
+}
+
+function init() {
+ const container = document.querySelector(".game");
+ createPlayer(container);
+
+ const enemySpacing = (GAME_WIDTH - ENEMY_HORIZONTAL_PADDING * 2) / (ENEMIES_PER_ROW - 1);
+ for (let j = 0; j < 3; j++) {
+ const y = ENEMY_VERTICAL_PADDING + j * ENEMY_VERTICAL_SPACING;
+ for (let i = 0; i < ENEMIES_PER_ROW; i++) {
+ const x = i * enemySpacing + ENEMY_HORIZONTAL_PADDING;
+ createEnemy(container, x, y);
+ }
+ }
+}
+
+function update(e) {
+ const currentTime = Date.now();
+ const dt = (currentTime - GAME_STATE.lastTime) / 1000.0;
+
+ const container = document.querySelector(".game");
+ updatePlayer(dt, container);
+ updateLasers(dt, container);
+ updateEnemies(dt, container);
+
+ GAME_STATE.lastTime = currentTime;
+ window.requestAnimationFrame(update);
+}
+
+function onKeyDown(e) {
+ if (e.keyCode === KEY_CODE_LEFT) {
+ GAME_STATE.leftPressed = true;
+ } else if (e.keyCode === KEY_CODE_RIGHT) {
+ GAME_STATE.rightPressed = true;
+ } else if (e.keyCode === KEY_CODE_SPACE) {
+ GAME_STATE.spacePressed = true;
+ }
+}
+
+function onKeyUp(e) {
+ if (e.keyCode === KEY_CODE_LEFT) {
+ GAME_STATE.leftPressed = false;
+ } else if (e.keyCode === KEY_CODE_RIGHT) {
+ GAME_STATE.rightPressed = false;
+ } else if (e.keyCode === KEY_CODE_SPACE) {
+ GAME_STATE.spacePressed = false;
+ }
+}
+
+init();
+window.addEventListener("keydown", onKeyDown);
+window.addEventListener("keyup", onKeyUp);
+window.requestAnimationFrame(update);
diff --git a/Projects/space-game/step06/sound/sfx-laser1.ogg b/Projects/space-game/step06/sound/sfx-laser1.ogg
new file mode 100644
index 000000000..7a9a4d2f2
Binary files /dev/null and b/Projects/space-game/step06/sound/sfx-laser1.ogg differ
diff --git a/Projects/space-game/step06/sound/sfx-lose.ogg b/Projects/space-game/step06/sound/sfx-lose.ogg
new file mode 100644
index 000000000..496968f8d
Binary files /dev/null and b/Projects/space-game/step06/sound/sfx-lose.ogg differ
diff --git a/Projects/space-game/step07/README.md b/Projects/space-game/step07/README.md
new file mode 100644
index 000000000..ce1400d29
--- /dev/null
+++ b/Projects/space-game/step07/README.md
@@ -0,0 +1,32 @@
+# Step 7 - Hit detection
+
+[Play this version](https://rawgit.com/HackYourFutureBelgium/JavaScript2/master/Projects/space-game/step07/index.html)
+
+In our `updateLasers` function we add code to check if the laser hits an enemy. We use [`getBoundingClientRect`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect) to find the position of the laser and the enemy on screen, and we check if they intersect.
+
+For this we write a double loop:
+
+- For every laser,
+ - Get the bounding client rect of the laser.
+ - For every enemy,
+ - Get the bounding client rect of the enemy.
+ - Check if the two rectangles intersect.
+ - If they do, destroy both the enemy **and** the laser.
+ - Break out of the loop (since the laser can't hit another enemy).
+
+Just like with the lasers, we use a `Array.filter` to remove the destroyed enemies.
+
+The `rectsIntersect` function checks if two rectangles overlap eachother anywhere. Both rectangle objects have `left`, `right`, `top`, and `bottom` parameters. We check if they do overlap, then take the negative:
+
+```js
+function rectsIntersect(r1, r2) {
+ return !(
+ r2.left > r1.right ||
+ r2.right < r1.left ||
+ r2.top > r1.bottom ||
+ r2.bottom < r1.top
+ );
+}
+```
+
+This way the game is not very challenging since the enemies don't fire back. Let's fix that!
diff --git a/Projects/space-game/step07/css/main.css b/Projects/space-game/step07/css/main.css
new file mode 100644
index 000000000..112ed105b
--- /dev/null
+++ b/Projects/space-game/step07/css/main.css
@@ -0,0 +1,135 @@
+html,
+body {
+ height: 100%;
+ overflow: hidden;
+}
+
+body {
+ margin: 0;
+ font: 16px sans-serif;
+}
+
+.wrap {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+}
+
+header {
+ text-align: center;
+ background: black;
+ color: #fff;
+ padding: 10px;
+}
+
+footer {
+ padding: 10px;
+ text-align: center;
+ font-size: 11px;
+ background: black;
+ color: white;
+}
+
+.game-wrapper {
+ flex: 1;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background: #222;
+}
+.game {
+ width: 800px;
+ height: 600px;
+ background: url(../img/background-blue.png);
+ animation: scroll-background 5s linear infinite;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+ position: relative;
+}
+
+@keyframes scroll-background {
+ from {
+ background-position-y: 0px;
+ }
+ to {
+ background-position-y: 256px;
+ }
+}
+
+.game .enemy {
+ position: absolute;
+ margin-left: -20px;
+ margin-top: -18px;
+ width: 40px;
+}
+
+.game .player {
+ position: absolute;
+ margin-left: -20px;
+ width: 40px;
+}
+
+.game .laser {
+ position: absolute;
+ margin-left: -2.5px;
+ height: 30px;
+}
+
+.game .enemy-laser {
+ position: absolute;
+ margin-left: -2.5px;
+ height: 30px;
+}
+
+.congratulations {
+ display: none;
+ position: absolute;
+ background: #c7a526;
+ color: white;
+ padding: 20px 50px;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+ border-radius: 10px;
+ text-align: center;
+ animation: pop-in 1s;
+}
+
+.game-over {
+ display: none;
+ position: absolute;
+ background: #6b1818;
+ color: white;
+ padding: 20px 50px;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+ border-radius: 10px;
+ text-align: center;
+ animation: pop-in 1s;
+}
+
+.btn {
+ border: 2px solid #36bbf5;
+ border-radius: 3px;
+ box-shadow: 0 2px rgba(0, 0, 0, 0.15);
+ background: linear-gradient(
+ to bottom,
+ #fff 0%,
+ #fff 49%,
+ #f5f5f5 50%,
+ #eee 100%
+ );
+ padding: 10px 40px;
+ font: 14px sans-serif;
+}
+@keyframes pop-in {
+ 0% {
+ opacity: 0;
+ transform: translate(0, -100px);
+ }
+ 10% {
+ opacity: 1;
+ }
+ 50% {
+ transform: translate(0, 30px);
+ }
+ 100% {
+ transform: translate(0, 0);
+ }
+}
diff --git a/Projects/space-game/step07/img/background-black.png b/Projects/space-game/step07/img/background-black.png
new file mode 100644
index 000000000..82ddab992
Binary files /dev/null and b/Projects/space-game/step07/img/background-black.png differ
diff --git a/Projects/space-game/step07/img/background-blue.png b/Projects/space-game/step07/img/background-blue.png
new file mode 100644
index 000000000..47642cd5d
Binary files /dev/null and b/Projects/space-game/step07/img/background-blue.png differ
diff --git a/Projects/space-game/step07/img/background-dark-purple.png b/Projects/space-game/step07/img/background-dark-purple.png
new file mode 100644
index 000000000..d9c3fd42d
Binary files /dev/null and b/Projects/space-game/step07/img/background-dark-purple.png differ
diff --git a/Projects/space-game/step07/img/background-purple.png b/Projects/space-game/step07/img/background-purple.png
new file mode 100644
index 000000000..5e8617769
Binary files /dev/null and b/Projects/space-game/step07/img/background-purple.png differ
diff --git a/Projects/space-game/step07/img/enemy-black-1.png b/Projects/space-game/step07/img/enemy-black-1.png
new file mode 100644
index 000000000..bc2fa4c1c
Binary files /dev/null and b/Projects/space-game/step07/img/enemy-black-1.png differ
diff --git a/Projects/space-game/step07/img/enemy-black-2.png b/Projects/space-game/step07/img/enemy-black-2.png
new file mode 100644
index 000000000..0e6b91c56
Binary files /dev/null and b/Projects/space-game/step07/img/enemy-black-2.png differ
diff --git a/Projects/space-game/step07/img/enemy-black-3.png b/Projects/space-game/step07/img/enemy-black-3.png
new file mode 100644
index 000000000..dafec1b16
Binary files /dev/null and b/Projects/space-game/step07/img/enemy-black-3.png differ
diff --git a/Projects/space-game/step07/img/enemy-black-4.png b/Projects/space-game/step07/img/enemy-black-4.png
new file mode 100644
index 000000000..a575c9d49
Binary files /dev/null and b/Projects/space-game/step07/img/enemy-black-4.png differ
diff --git a/Projects/space-game/step07/img/enemy-black-5.png b/Projects/space-game/step07/img/enemy-black-5.png
new file mode 100644
index 000000000..739dcf0fe
Binary files /dev/null and b/Projects/space-game/step07/img/enemy-black-5.png differ
diff --git a/Projects/space-game/step07/img/enemy-blue-1.png b/Projects/space-game/step07/img/enemy-blue-1.png
new file mode 100644
index 000000000..cedc0730d
Binary files /dev/null and b/Projects/space-game/step07/img/enemy-blue-1.png differ
diff --git a/Projects/space-game/step07/img/enemy-blue-2.png b/Projects/space-game/step07/img/enemy-blue-2.png
new file mode 100644
index 000000000..bf3bd0c9f
Binary files /dev/null and b/Projects/space-game/step07/img/enemy-blue-2.png differ
diff --git a/Projects/space-game/step07/img/enemy-blue-3.png b/Projects/space-game/step07/img/enemy-blue-3.png
new file mode 100644
index 000000000..9a63d03b0
Binary files /dev/null and b/Projects/space-game/step07/img/enemy-blue-3.png differ
diff --git a/Projects/space-game/step07/img/enemy-blue-4.png b/Projects/space-game/step07/img/enemy-blue-4.png
new file mode 100644
index 000000000..d5670a3a5
Binary files /dev/null and b/Projects/space-game/step07/img/enemy-blue-4.png differ
diff --git a/Projects/space-game/step07/img/enemy-blue-5.png b/Projects/space-game/step07/img/enemy-blue-5.png
new file mode 100644
index 000000000..e740509f7
Binary files /dev/null and b/Projects/space-game/step07/img/enemy-blue-5.png differ
diff --git a/Projects/space-game/step07/img/enemy-green-1.png b/Projects/space-game/step07/img/enemy-green-1.png
new file mode 100644
index 000000000..064e29037
Binary files /dev/null and b/Projects/space-game/step07/img/enemy-green-1.png differ
diff --git a/Projects/space-game/step07/img/enemy-green-2.png b/Projects/space-game/step07/img/enemy-green-2.png
new file mode 100644
index 000000000..5189d2459
Binary files /dev/null and b/Projects/space-game/step07/img/enemy-green-2.png differ
diff --git a/Projects/space-game/step07/img/enemy-green-3.png b/Projects/space-game/step07/img/enemy-green-3.png
new file mode 100644
index 000000000..74e2bca68
Binary files /dev/null and b/Projects/space-game/step07/img/enemy-green-3.png differ
diff --git a/Projects/space-game/step07/img/enemy-green-4.png b/Projects/space-game/step07/img/enemy-green-4.png
new file mode 100644
index 000000000..112e299f8
Binary files /dev/null and b/Projects/space-game/step07/img/enemy-green-4.png differ
diff --git a/Projects/space-game/step07/img/enemy-green-5.png b/Projects/space-game/step07/img/enemy-green-5.png
new file mode 100644
index 000000000..59382705b
Binary files /dev/null and b/Projects/space-game/step07/img/enemy-green-5.png differ
diff --git a/Projects/space-game/step07/img/enemy-red-1.png b/Projects/space-game/step07/img/enemy-red-1.png
new file mode 100644
index 000000000..fb0c0a2ca
Binary files /dev/null and b/Projects/space-game/step07/img/enemy-red-1.png differ
diff --git a/Projects/space-game/step07/img/enemy-red-2.png b/Projects/space-game/step07/img/enemy-red-2.png
new file mode 100644
index 000000000..3ee96c571
Binary files /dev/null and b/Projects/space-game/step07/img/enemy-red-2.png differ
diff --git a/Projects/space-game/step07/img/enemy-red-3.png b/Projects/space-game/step07/img/enemy-red-3.png
new file mode 100644
index 000000000..bc8eacd99
Binary files /dev/null and b/Projects/space-game/step07/img/enemy-red-3.png differ
diff --git a/Projects/space-game/step07/img/enemy-red-4.png b/Projects/space-game/step07/img/enemy-red-4.png
new file mode 100644
index 000000000..a3216d4bf
Binary files /dev/null and b/Projects/space-game/step07/img/enemy-red-4.png differ
diff --git a/Projects/space-game/step07/img/enemy-red-5.png b/Projects/space-game/step07/img/enemy-red-5.png
new file mode 100644
index 000000000..645cdf3c8
Binary files /dev/null and b/Projects/space-game/step07/img/enemy-red-5.png differ
diff --git a/Projects/space-game/step07/img/laser-blue-1.png b/Projects/space-game/step07/img/laser-blue-1.png
new file mode 100644
index 000000000..b76aaf7a0
Binary files /dev/null and b/Projects/space-game/step07/img/laser-blue-1.png differ
diff --git a/Projects/space-game/step07/img/laser-blue-10.png b/Projects/space-game/step07/img/laser-blue-10.png
new file mode 100644
index 000000000..dd6b766a4
Binary files /dev/null and b/Projects/space-game/step07/img/laser-blue-10.png differ
diff --git a/Projects/space-game/step07/img/laser-blue-11.png b/Projects/space-game/step07/img/laser-blue-11.png
new file mode 100644
index 000000000..c06234958
Binary files /dev/null and b/Projects/space-game/step07/img/laser-blue-11.png differ
diff --git a/Projects/space-game/step07/img/laser-blue-12.png b/Projects/space-game/step07/img/laser-blue-12.png
new file mode 100644
index 000000000..48b6103e1
Binary files /dev/null and b/Projects/space-game/step07/img/laser-blue-12.png differ
diff --git a/Projects/space-game/step07/img/laser-blue-13.png b/Projects/space-game/step07/img/laser-blue-13.png
new file mode 100644
index 000000000..c5ec6a329
Binary files /dev/null and b/Projects/space-game/step07/img/laser-blue-13.png differ
diff --git a/Projects/space-game/step07/img/laser-blue-14.png b/Projects/space-game/step07/img/laser-blue-14.png
new file mode 100644
index 000000000..254601e5f
Binary files /dev/null and b/Projects/space-game/step07/img/laser-blue-14.png differ
diff --git a/Projects/space-game/step07/img/laser-blue-15.png b/Projects/space-game/step07/img/laser-blue-15.png
new file mode 100644
index 000000000..1ea1966d5
Binary files /dev/null and b/Projects/space-game/step07/img/laser-blue-15.png differ
diff --git a/Projects/space-game/step07/img/laser-blue-16.png b/Projects/space-game/step07/img/laser-blue-16.png
new file mode 100644
index 000000000..1def98fb6
Binary files /dev/null and b/Projects/space-game/step07/img/laser-blue-16.png differ
diff --git a/Projects/space-game/step07/img/laser-blue-2.png b/Projects/space-game/step07/img/laser-blue-2.png
new file mode 100644
index 000000000..3f923a394
Binary files /dev/null and b/Projects/space-game/step07/img/laser-blue-2.png differ
diff --git a/Projects/space-game/step07/img/laser-blue-3.png b/Projects/space-game/step07/img/laser-blue-3.png
new file mode 100644
index 000000000..a16e9a82e
Binary files /dev/null and b/Projects/space-game/step07/img/laser-blue-3.png differ
diff --git a/Projects/space-game/step07/img/laser-blue-4.png b/Projects/space-game/step07/img/laser-blue-4.png
new file mode 100644
index 000000000..6f3b9103a
Binary files /dev/null and b/Projects/space-game/step07/img/laser-blue-4.png differ
diff --git a/Projects/space-game/step07/img/laser-blue-5.png b/Projects/space-game/step07/img/laser-blue-5.png
new file mode 100644
index 000000000..85cff7d5d
Binary files /dev/null and b/Projects/space-game/step07/img/laser-blue-5.png differ
diff --git a/Projects/space-game/step07/img/laser-blue-6.png b/Projects/space-game/step07/img/laser-blue-6.png
new file mode 100644
index 000000000..a621875c5
Binary files /dev/null and b/Projects/space-game/step07/img/laser-blue-6.png differ
diff --git a/Projects/space-game/step07/img/laser-blue-7.png b/Projects/space-game/step07/img/laser-blue-7.png
new file mode 100644
index 000000000..e1848bfc3
Binary files /dev/null and b/Projects/space-game/step07/img/laser-blue-7.png differ
diff --git a/Projects/space-game/step07/img/laser-blue-8.png b/Projects/space-game/step07/img/laser-blue-8.png
new file mode 100644
index 000000000..7a463965c
Binary files /dev/null and b/Projects/space-game/step07/img/laser-blue-8.png differ
diff --git a/Projects/space-game/step07/img/laser-blue-9.png b/Projects/space-game/step07/img/laser-blue-9.png
new file mode 100644
index 000000000..35624e649
Binary files /dev/null and b/Projects/space-game/step07/img/laser-blue-9.png differ
diff --git a/Projects/space-game/step07/img/laser-green-1.png b/Projects/space-game/step07/img/laser-green-1.png
new file mode 100644
index 000000000..c9982b1ed
Binary files /dev/null and b/Projects/space-game/step07/img/laser-green-1.png differ
diff --git a/Projects/space-game/step07/img/laser-green-10.png b/Projects/space-game/step07/img/laser-green-10.png
new file mode 100644
index 000000000..9c7974c69
Binary files /dev/null and b/Projects/space-game/step07/img/laser-green-10.png differ
diff --git a/Projects/space-game/step07/img/laser-green-11.png b/Projects/space-game/step07/img/laser-green-11.png
new file mode 100644
index 000000000..100cddbd4
Binary files /dev/null and b/Projects/space-game/step07/img/laser-green-11.png differ
diff --git a/Projects/space-game/step07/img/laser-green-12.png b/Projects/space-game/step07/img/laser-green-12.png
new file mode 100644
index 000000000..b05a72fa6
Binary files /dev/null and b/Projects/space-game/step07/img/laser-green-12.png differ
diff --git a/Projects/space-game/step07/img/laser-green-13.png b/Projects/space-game/step07/img/laser-green-13.png
new file mode 100644
index 000000000..92cc35334
Binary files /dev/null and b/Projects/space-game/step07/img/laser-green-13.png differ
diff --git a/Projects/space-game/step07/img/laser-green-14.png b/Projects/space-game/step07/img/laser-green-14.png
new file mode 100644
index 000000000..7abd3b29b
Binary files /dev/null and b/Projects/space-game/step07/img/laser-green-14.png differ
diff --git a/Projects/space-game/step07/img/laser-green-15.png b/Projects/space-game/step07/img/laser-green-15.png
new file mode 100644
index 000000000..97a44051d
Binary files /dev/null and b/Projects/space-game/step07/img/laser-green-15.png differ
diff --git a/Projects/space-game/step07/img/laser-green-16.png b/Projects/space-game/step07/img/laser-green-16.png
new file mode 100644
index 000000000..b73c12fb9
Binary files /dev/null and b/Projects/space-game/step07/img/laser-green-16.png differ
diff --git a/Projects/space-game/step07/img/laser-green-2.png b/Projects/space-game/step07/img/laser-green-2.png
new file mode 100644
index 000000000..5cd78303e
Binary files /dev/null and b/Projects/space-game/step07/img/laser-green-2.png differ
diff --git a/Projects/space-game/step07/img/laser-green-3.png b/Projects/space-game/step07/img/laser-green-3.png
new file mode 100644
index 000000000..d658547bc
Binary files /dev/null and b/Projects/space-game/step07/img/laser-green-3.png differ
diff --git a/Projects/space-game/step07/img/laser-green-4.png b/Projects/space-game/step07/img/laser-green-4.png
new file mode 100644
index 000000000..61b04fb71
Binary files /dev/null and b/Projects/space-game/step07/img/laser-green-4.png differ
diff --git a/Projects/space-game/step07/img/laser-green-5.png b/Projects/space-game/step07/img/laser-green-5.png
new file mode 100644
index 000000000..98ae6bee2
Binary files /dev/null and b/Projects/space-game/step07/img/laser-green-5.png differ
diff --git a/Projects/space-game/step07/img/laser-green-6.png b/Projects/space-game/step07/img/laser-green-6.png
new file mode 100644
index 000000000..36dd94d46
Binary files /dev/null and b/Projects/space-game/step07/img/laser-green-6.png differ
diff --git a/Projects/space-game/step07/img/laser-green-7.png b/Projects/space-game/step07/img/laser-green-7.png
new file mode 100644
index 000000000..0ae7c2d0c
Binary files /dev/null and b/Projects/space-game/step07/img/laser-green-7.png differ
diff --git a/Projects/space-game/step07/img/laser-green-8.png b/Projects/space-game/step07/img/laser-green-8.png
new file mode 100644
index 000000000..0ff1d80f9
Binary files /dev/null and b/Projects/space-game/step07/img/laser-green-8.png differ
diff --git a/Projects/space-game/step07/img/laser-green-9.png b/Projects/space-game/step07/img/laser-green-9.png
new file mode 100644
index 000000000..932056b9f
Binary files /dev/null and b/Projects/space-game/step07/img/laser-green-9.png differ
diff --git a/Projects/space-game/step07/img/laser-red-1.png b/Projects/space-game/step07/img/laser-red-1.png
new file mode 100644
index 000000000..5e467b65b
Binary files /dev/null and b/Projects/space-game/step07/img/laser-red-1.png differ
diff --git a/Projects/space-game/step07/img/laser-red-10.png b/Projects/space-game/step07/img/laser-red-10.png
new file mode 100644
index 000000000..0f85ba1b0
Binary files /dev/null and b/Projects/space-game/step07/img/laser-red-10.png differ
diff --git a/Projects/space-game/step07/img/laser-red-11.png b/Projects/space-game/step07/img/laser-red-11.png
new file mode 100644
index 000000000..95e9c0a14
Binary files /dev/null and b/Projects/space-game/step07/img/laser-red-11.png differ
diff --git a/Projects/space-game/step07/img/laser-red-12.png b/Projects/space-game/step07/img/laser-red-12.png
new file mode 100644
index 000000000..9f56da0ce
Binary files /dev/null and b/Projects/space-game/step07/img/laser-red-12.png differ
diff --git a/Projects/space-game/step07/img/laser-red-13.png b/Projects/space-game/step07/img/laser-red-13.png
new file mode 100644
index 000000000..292bcc5d5
Binary files /dev/null and b/Projects/space-game/step07/img/laser-red-13.png differ
diff --git a/Projects/space-game/step07/img/laser-red-14.png b/Projects/space-game/step07/img/laser-red-14.png
new file mode 100644
index 000000000..eaf8346de
Binary files /dev/null and b/Projects/space-game/step07/img/laser-red-14.png differ
diff --git a/Projects/space-game/step07/img/laser-red-15.png b/Projects/space-game/step07/img/laser-red-15.png
new file mode 100644
index 000000000..7d27c2a94
Binary files /dev/null and b/Projects/space-game/step07/img/laser-red-15.png differ
diff --git a/Projects/space-game/step07/img/laser-red-16.png b/Projects/space-game/step07/img/laser-red-16.png
new file mode 100644
index 000000000..b12fcd5d4
Binary files /dev/null and b/Projects/space-game/step07/img/laser-red-16.png differ
diff --git a/Projects/space-game/step07/img/laser-red-2.png b/Projects/space-game/step07/img/laser-red-2.png
new file mode 100644
index 000000000..1127fffb6
Binary files /dev/null and b/Projects/space-game/step07/img/laser-red-2.png differ
diff --git a/Projects/space-game/step07/img/laser-red-3.png b/Projects/space-game/step07/img/laser-red-3.png
new file mode 100644
index 000000000..bc1bb8730
Binary files /dev/null and b/Projects/space-game/step07/img/laser-red-3.png differ
diff --git a/Projects/space-game/step07/img/laser-red-4.png b/Projects/space-game/step07/img/laser-red-4.png
new file mode 100644
index 000000000..fc3655b0f
Binary files /dev/null and b/Projects/space-game/step07/img/laser-red-4.png differ
diff --git a/Projects/space-game/step07/img/laser-red-5.png b/Projects/space-game/step07/img/laser-red-5.png
new file mode 100644
index 000000000..46db2d77f
Binary files /dev/null and b/Projects/space-game/step07/img/laser-red-5.png differ
diff --git a/Projects/space-game/step07/img/laser-red-6.png b/Projects/space-game/step07/img/laser-red-6.png
new file mode 100644
index 000000000..33614ae1a
Binary files /dev/null and b/Projects/space-game/step07/img/laser-red-6.png differ
diff --git a/Projects/space-game/step07/img/laser-red-7.png b/Projects/space-game/step07/img/laser-red-7.png
new file mode 100644
index 000000000..23bab346f
Binary files /dev/null and b/Projects/space-game/step07/img/laser-red-7.png differ
diff --git a/Projects/space-game/step07/img/laser-red-8.png b/Projects/space-game/step07/img/laser-red-8.png
new file mode 100644
index 000000000..5a2cce30e
Binary files /dev/null and b/Projects/space-game/step07/img/laser-red-8.png differ
diff --git a/Projects/space-game/step07/img/laser-red-9.png b/Projects/space-game/step07/img/laser-red-9.png
new file mode 100644
index 000000000..7dc31dcc2
Binary files /dev/null and b/Projects/space-game/step07/img/laser-red-9.png differ
diff --git a/Projects/space-game/step07/img/player-blue-1.png b/Projects/space-game/step07/img/player-blue-1.png
new file mode 100644
index 000000000..cecbbed97
Binary files /dev/null and b/Projects/space-game/step07/img/player-blue-1.png differ
diff --git a/Projects/space-game/step07/img/player-blue-2.png b/Projects/space-game/step07/img/player-blue-2.png
new file mode 100644
index 000000000..e277114fd
Binary files /dev/null and b/Projects/space-game/step07/img/player-blue-2.png differ
diff --git a/Projects/space-game/step07/img/player-blue-3.png b/Projects/space-game/step07/img/player-blue-3.png
new file mode 100644
index 000000000..f34faf066
Binary files /dev/null and b/Projects/space-game/step07/img/player-blue-3.png differ
diff --git a/Projects/space-game/step07/img/player-green-1.png b/Projects/space-game/step07/img/player-green-1.png
new file mode 100644
index 000000000..2eb6f9c06
Binary files /dev/null and b/Projects/space-game/step07/img/player-green-1.png differ
diff --git a/Projects/space-game/step07/img/player-green-2.png b/Projects/space-game/step07/img/player-green-2.png
new file mode 100644
index 000000000..72e18c7ff
Binary files /dev/null and b/Projects/space-game/step07/img/player-green-2.png differ
diff --git a/Projects/space-game/step07/img/player-green-3.png b/Projects/space-game/step07/img/player-green-3.png
new file mode 100644
index 000000000..b853be42a
Binary files /dev/null and b/Projects/space-game/step07/img/player-green-3.png differ
diff --git a/Projects/space-game/step07/img/player-orange-1.png b/Projects/space-game/step07/img/player-orange-1.png
new file mode 100644
index 000000000..3902283d4
Binary files /dev/null and b/Projects/space-game/step07/img/player-orange-1.png differ
diff --git a/Projects/space-game/step07/img/player-orange-2.png b/Projects/space-game/step07/img/player-orange-2.png
new file mode 100644
index 000000000..82ddc8068
Binary files /dev/null and b/Projects/space-game/step07/img/player-orange-2.png differ
diff --git a/Projects/space-game/step07/img/player-orange-3.png b/Projects/space-game/step07/img/player-orange-3.png
new file mode 100644
index 000000000..0b6b7ec68
Binary files /dev/null and b/Projects/space-game/step07/img/player-orange-3.png differ
diff --git a/Projects/space-game/step07/img/player-red-1.png b/Projects/space-game/step07/img/player-red-1.png
new file mode 100644
index 000000000..3695e09e2
Binary files /dev/null and b/Projects/space-game/step07/img/player-red-1.png differ
diff --git a/Projects/space-game/step07/img/player-red-2.png b/Projects/space-game/step07/img/player-red-2.png
new file mode 100644
index 000000000..8213e978d
Binary files /dev/null and b/Projects/space-game/step07/img/player-red-2.png differ
diff --git a/Projects/space-game/step07/img/player-red-3.png b/Projects/space-game/step07/img/player-red-3.png
new file mode 100644
index 000000000..796e81d71
Binary files /dev/null and b/Projects/space-game/step07/img/player-red-3.png differ
diff --git a/Projects/space-game/step07/index.html b/Projects/space-game/step07/index.html
new file mode 100644
index 000000000..1ebb1e695
--- /dev/null
+++ b/Projects/space-game/step07/index.html
@@ -0,0 +1,32 @@
+
+
+
+
+
+
+ Space Game
+
+
+
+
+
+ Space Game
+
+
+
+
Congratulations!
+
You won the game
+
+
+
+
GAME OVER
+
You lost the game
+
+
+
+
+
+
+
+
+
diff --git a/Projects/space-game/step07/js/game.js b/Projects/space-game/step07/js/game.js
new file mode 100644
index 000000000..cdf09d620
--- /dev/null
+++ b/Projects/space-game/step07/js/game.js
@@ -0,0 +1,215 @@
+const KEY_CODE_LEFT = 37;
+const KEY_CODE_RIGHT = 39;
+const KEY_CODE_SPACE = 32;
+
+const GAME_WIDTH = 800;
+const GAME_HEIGHT = 600;
+
+const PLAYER_WIDTH = 20;
+const PLAYER_MAX_SPEED = 600.0;
+const LASER_MAX_SPEED = 300.0;
+const LASER_COOLDOWN = 0.5;
+
+const ENEMIES_PER_ROW = 10;
+const ENEMY_HORIZONTAL_PADDING = 80;
+const ENEMY_VERTICAL_PADDING = 70;
+const ENEMY_VERTICAL_SPACING = 80;
+
+const GAME_STATE = {
+ lastTime: Date.now(),
+ leftPressed: false,
+ rightPressed: false,
+ spacePressed: false,
+ playerX: 0,
+ playerY: 0,
+ playerCooldown: 0,
+ lasers: [],
+ enemies: [],
+};
+
+function rectsIntersect(r1, r2) {
+ return !(
+ r2.left > r1.right ||
+ r2.right < r1.left ||
+ r2.top > r1.bottom ||
+ r2.bottom < r1.top
+ );
+}
+
+function setPosition(el, x, y) {
+ el.style.transform = `translate(${x}px, ${y}px)`;
+}
+
+function clamp(v, min, max) {
+ if (v < min) {
+ return min;
+ } else if (v > max) {
+ return max;
+ } else {
+ return v;
+ }
+}
+
+function createPlayer(container) {
+ GAME_STATE.playerX = GAME_WIDTH / 2;
+ GAME_STATE.playerY = GAME_HEIGHT - 50;
+ const player = document.createElement("img");
+ player.src = "img/player-blue-1.png";
+ player.className = "player";
+ container.appendChild(player);
+ setPosition(player, GAME_STATE.playerX, GAME_STATE.playerY);
+}
+
+function updatePlayer(dt, container) {
+ if (GAME_STATE.leftPressed) {
+ GAME_STATE.playerX -= dt * PLAYER_MAX_SPEED;
+ }
+ if (GAME_STATE.rightPressed) {
+ GAME_STATE.playerX += dt * PLAYER_MAX_SPEED;
+ }
+
+ GAME_STATE.playerX = clamp(
+ GAME_STATE.playerX,
+ PLAYER_WIDTH,
+ GAME_WIDTH - PLAYER_WIDTH
+ );
+
+ if (GAME_STATE.spacePressed && GAME_STATE.playerCooldown <= 0) {
+ createLaser(container, GAME_STATE.playerX, GAME_STATE.playerY);
+ GAME_STATE.playerCooldown = LASER_COOLDOWN;
+ }
+ if (GAME_STATE.playerCooldown > 0) {
+ GAME_STATE.playerCooldown -= dt;
+ }
+
+ const player = document.querySelector(".player");
+ setPosition(player, GAME_STATE.playerX, GAME_STATE.playerY);
+}
+
+function createLaser(container, x, y) {
+ const element = document.createElement("img");
+ element.src = "img/laser-blue-1.png";
+ element.className = "laser";
+ container.appendChild(element);
+ const laser = { x, y, element };
+ GAME_STATE.lasers.push(laser);
+ const audio = new Audio("sound/sfx-laser1.ogg");
+ audio.play();
+ setPosition(element, x, y);
+}
+
+function updateLasers(dt, container) {
+ const lasers = GAME_STATE.lasers;
+ for (let i = 0; i < lasers.length; i++) {
+ const laser = lasers[i];
+ laser.y -= dt * LASER_MAX_SPEED;
+ if (laser.y < 0) {
+ destroyLaser(container, laser);
+ }
+ setPosition(laser.element, laser.x, laser.y);
+ const r1 = laser.element.getBoundingClientRect();
+ const enemies = GAME_STATE.enemies;
+ for (let j = 0; j < enemies.length; j++) {
+ const enemy = enemies[j];
+ if (enemy.isDead) continue;
+ const r2 = enemy.element.getBoundingClientRect();
+ if (rectsIntersect(r1, r2)) {
+ // Enemy was hit
+ destroyEnemy(container, enemy);
+ destroyLaser(container, laser);
+ break;
+ }
+ }
+ }
+ GAME_STATE.lasers = GAME_STATE.lasers.filter(e => !e.isDead);
+}
+
+function destroyLaser(container, laser) {
+ container.removeChild(laser.element);
+ laser.isDead = true;
+}
+
+function createEnemy(container, x, y) {
+ const element = document.createElement("img");
+ element.src = "img/enemy-blue-1.png";
+ element.className = "enemy";
+ container.appendChild(element);
+ const enemy = {
+ x,
+ y,
+ element
+ };
+ GAME_STATE.enemies.push(enemy);
+ setPosition(element, x, y);
+}
+
+function updateEnemies(dt, container) {
+ const dx = Math.sin(GAME_STATE.lastTime / 1000.0) * 50;
+ const dy = Math.cos(GAME_STATE.lastTime / 1000.0) * 10;
+
+ const enemies = GAME_STATE.enemies;
+ for (let i = 0; i < enemies.length; i++) {
+ const enemy = enemies[i];
+ const x = enemy.x + dx;
+ const y = enemy.y + dy;
+ setPosition(enemy.element, x, y);
+ }
+ GAME_STATE.enemies = GAME_STATE.enemies.filter(e => !e.isDead);
+}
+
+function destroyEnemy(container, enemy) {
+ container.removeChild(enemy.element);
+ enemy.isDead = true;
+}
+
+function init() {
+ const container = document.querySelector(".game");
+ createPlayer(container);
+
+ const enemySpacing = (GAME_WIDTH - ENEMY_HORIZONTAL_PADDING * 2) / (ENEMIES_PER_ROW - 1);
+ for (let j = 0; j < 3; j++) {
+ const y = ENEMY_VERTICAL_PADDING + j * ENEMY_VERTICAL_SPACING;
+ for (let i = 0; i < ENEMIES_PER_ROW; i++) {
+ const x = i * enemySpacing + ENEMY_HORIZONTAL_PADDING;
+ createEnemy(container, x, y);
+ }
+ }
+}
+
+function update(e) {
+ const currentTime = Date.now();
+ const dt = (currentTime - GAME_STATE.lastTime) / 1000.0;
+
+ const container = document.querySelector(".game");
+ updatePlayer(dt, container);
+ updateLasers(dt, container);
+ updateEnemies(dt, container);
+
+ GAME_STATE.lastTime = currentTime;
+ window.requestAnimationFrame(update);
+}
+
+function onKeyDown(e) {
+ if (e.keyCode === KEY_CODE_LEFT) {
+ GAME_STATE.leftPressed = true;
+ } else if (e.keyCode === KEY_CODE_RIGHT) {
+ GAME_STATE.rightPressed = true;
+ } else if (e.keyCode === KEY_CODE_SPACE) {
+ GAME_STATE.spacePressed = true;
+ }
+}
+
+function onKeyUp(e) {
+ if (e.keyCode === KEY_CODE_LEFT) {
+ GAME_STATE.leftPressed = false;
+ } else if (e.keyCode === KEY_CODE_RIGHT) {
+ GAME_STATE.rightPressed = false;
+ } else if (e.keyCode === KEY_CODE_SPACE) {
+ GAME_STATE.spacePressed = false;
+ }
+}
+
+init();
+window.addEventListener("keydown", onKeyDown);
+window.addEventListener("keyup", onKeyUp);
+window.requestAnimationFrame(update);
diff --git a/Projects/space-game/step07/sound/sfx-laser1.ogg b/Projects/space-game/step07/sound/sfx-laser1.ogg
new file mode 100644
index 000000000..7a9a4d2f2
Binary files /dev/null and b/Projects/space-game/step07/sound/sfx-laser1.ogg differ
diff --git a/Projects/space-game/step07/sound/sfx-lose.ogg b/Projects/space-game/step07/sound/sfx-lose.ogg
new file mode 100644
index 000000000..496968f8d
Binary files /dev/null and b/Projects/space-game/step07/sound/sfx-lose.ogg differ
diff --git a/Projects/space-game/step08/README.md b/Projects/space-game/step08/README.md
new file mode 100644
index 000000000..b1aa122da
--- /dev/null
+++ b/Projects/space-game/step08/README.md
@@ -0,0 +1,9 @@
+# Step 8 - Enemy lasers
+
+[Play this version](https://rawgit.com/HackYourFutureBelgium/JavaScript2/master/Projects/space-game/step08/index.html)
+
+Just like our player can fire lasers, we now let our enemies fire lasers as well. The code is very similar.
+
+The main difference is that the cooldown is now set *per enemy*. This implies that every enemy could fire at a different time, but that's currently not the case. In the next step, we'll introduce randomness.
+
+(Also, our lasers don't actually destroy the player -- that will have to wait for a bit later still.)
diff --git a/Projects/space-game/step08/css/main.css b/Projects/space-game/step08/css/main.css
new file mode 100644
index 000000000..112ed105b
--- /dev/null
+++ b/Projects/space-game/step08/css/main.css
@@ -0,0 +1,135 @@
+html,
+body {
+ height: 100%;
+ overflow: hidden;
+}
+
+body {
+ margin: 0;
+ font: 16px sans-serif;
+}
+
+.wrap {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+}
+
+header {
+ text-align: center;
+ background: black;
+ color: #fff;
+ padding: 10px;
+}
+
+footer {
+ padding: 10px;
+ text-align: center;
+ font-size: 11px;
+ background: black;
+ color: white;
+}
+
+.game-wrapper {
+ flex: 1;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background: #222;
+}
+.game {
+ width: 800px;
+ height: 600px;
+ background: url(../img/background-blue.png);
+ animation: scroll-background 5s linear infinite;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+ position: relative;
+}
+
+@keyframes scroll-background {
+ from {
+ background-position-y: 0px;
+ }
+ to {
+ background-position-y: 256px;
+ }
+}
+
+.game .enemy {
+ position: absolute;
+ margin-left: -20px;
+ margin-top: -18px;
+ width: 40px;
+}
+
+.game .player {
+ position: absolute;
+ margin-left: -20px;
+ width: 40px;
+}
+
+.game .laser {
+ position: absolute;
+ margin-left: -2.5px;
+ height: 30px;
+}
+
+.game .enemy-laser {
+ position: absolute;
+ margin-left: -2.5px;
+ height: 30px;
+}
+
+.congratulations {
+ display: none;
+ position: absolute;
+ background: #c7a526;
+ color: white;
+ padding: 20px 50px;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+ border-radius: 10px;
+ text-align: center;
+ animation: pop-in 1s;
+}
+
+.game-over {
+ display: none;
+ position: absolute;
+ background: #6b1818;
+ color: white;
+ padding: 20px 50px;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+ border-radius: 10px;
+ text-align: center;
+ animation: pop-in 1s;
+}
+
+.btn {
+ border: 2px solid #36bbf5;
+ border-radius: 3px;
+ box-shadow: 0 2px rgba(0, 0, 0, 0.15);
+ background: linear-gradient(
+ to bottom,
+ #fff 0%,
+ #fff 49%,
+ #f5f5f5 50%,
+ #eee 100%
+ );
+ padding: 10px 40px;
+ font: 14px sans-serif;
+}
+@keyframes pop-in {
+ 0% {
+ opacity: 0;
+ transform: translate(0, -100px);
+ }
+ 10% {
+ opacity: 1;
+ }
+ 50% {
+ transform: translate(0, 30px);
+ }
+ 100% {
+ transform: translate(0, 0);
+ }
+}
diff --git a/Projects/space-game/step08/img/background-black.png b/Projects/space-game/step08/img/background-black.png
new file mode 100644
index 000000000..82ddab992
Binary files /dev/null and b/Projects/space-game/step08/img/background-black.png differ
diff --git a/Projects/space-game/step08/img/background-blue.png b/Projects/space-game/step08/img/background-blue.png
new file mode 100644
index 000000000..47642cd5d
Binary files /dev/null and b/Projects/space-game/step08/img/background-blue.png differ
diff --git a/Projects/space-game/step08/img/background-dark-purple.png b/Projects/space-game/step08/img/background-dark-purple.png
new file mode 100644
index 000000000..d9c3fd42d
Binary files /dev/null and b/Projects/space-game/step08/img/background-dark-purple.png differ
diff --git a/Projects/space-game/step08/img/background-purple.png b/Projects/space-game/step08/img/background-purple.png
new file mode 100644
index 000000000..5e8617769
Binary files /dev/null and b/Projects/space-game/step08/img/background-purple.png differ
diff --git a/Projects/space-game/step08/img/enemy-black-1.png b/Projects/space-game/step08/img/enemy-black-1.png
new file mode 100644
index 000000000..bc2fa4c1c
Binary files /dev/null and b/Projects/space-game/step08/img/enemy-black-1.png differ
diff --git a/Projects/space-game/step08/img/enemy-black-2.png b/Projects/space-game/step08/img/enemy-black-2.png
new file mode 100644
index 000000000..0e6b91c56
Binary files /dev/null and b/Projects/space-game/step08/img/enemy-black-2.png differ
diff --git a/Projects/space-game/step08/img/enemy-black-3.png b/Projects/space-game/step08/img/enemy-black-3.png
new file mode 100644
index 000000000..dafec1b16
Binary files /dev/null and b/Projects/space-game/step08/img/enemy-black-3.png differ
diff --git a/Projects/space-game/step08/img/enemy-black-4.png b/Projects/space-game/step08/img/enemy-black-4.png
new file mode 100644
index 000000000..a575c9d49
Binary files /dev/null and b/Projects/space-game/step08/img/enemy-black-4.png differ
diff --git a/Projects/space-game/step08/img/enemy-black-5.png b/Projects/space-game/step08/img/enemy-black-5.png
new file mode 100644
index 000000000..739dcf0fe
Binary files /dev/null and b/Projects/space-game/step08/img/enemy-black-5.png differ
diff --git a/Projects/space-game/step08/img/enemy-blue-1.png b/Projects/space-game/step08/img/enemy-blue-1.png
new file mode 100644
index 000000000..cedc0730d
Binary files /dev/null and b/Projects/space-game/step08/img/enemy-blue-1.png differ
diff --git a/Projects/space-game/step08/img/enemy-blue-2.png b/Projects/space-game/step08/img/enemy-blue-2.png
new file mode 100644
index 000000000..bf3bd0c9f
Binary files /dev/null and b/Projects/space-game/step08/img/enemy-blue-2.png differ
diff --git a/Projects/space-game/step08/img/enemy-blue-3.png b/Projects/space-game/step08/img/enemy-blue-3.png
new file mode 100644
index 000000000..9a63d03b0
Binary files /dev/null and b/Projects/space-game/step08/img/enemy-blue-3.png differ
diff --git a/Projects/space-game/step08/img/enemy-blue-4.png b/Projects/space-game/step08/img/enemy-blue-4.png
new file mode 100644
index 000000000..d5670a3a5
Binary files /dev/null and b/Projects/space-game/step08/img/enemy-blue-4.png differ
diff --git a/Projects/space-game/step08/img/enemy-blue-5.png b/Projects/space-game/step08/img/enemy-blue-5.png
new file mode 100644
index 000000000..e740509f7
Binary files /dev/null and b/Projects/space-game/step08/img/enemy-blue-5.png differ
diff --git a/Projects/space-game/step08/img/enemy-green-1.png b/Projects/space-game/step08/img/enemy-green-1.png
new file mode 100644
index 000000000..064e29037
Binary files /dev/null and b/Projects/space-game/step08/img/enemy-green-1.png differ
diff --git a/Projects/space-game/step08/img/enemy-green-2.png b/Projects/space-game/step08/img/enemy-green-2.png
new file mode 100644
index 000000000..5189d2459
Binary files /dev/null and b/Projects/space-game/step08/img/enemy-green-2.png differ
diff --git a/Projects/space-game/step08/img/enemy-green-3.png b/Projects/space-game/step08/img/enemy-green-3.png
new file mode 100644
index 000000000..74e2bca68
Binary files /dev/null and b/Projects/space-game/step08/img/enemy-green-3.png differ
diff --git a/Projects/space-game/step08/img/enemy-green-4.png b/Projects/space-game/step08/img/enemy-green-4.png
new file mode 100644
index 000000000..112e299f8
Binary files /dev/null and b/Projects/space-game/step08/img/enemy-green-4.png differ
diff --git a/Projects/space-game/step08/img/enemy-green-5.png b/Projects/space-game/step08/img/enemy-green-5.png
new file mode 100644
index 000000000..59382705b
Binary files /dev/null and b/Projects/space-game/step08/img/enemy-green-5.png differ
diff --git a/Projects/space-game/step08/img/enemy-red-1.png b/Projects/space-game/step08/img/enemy-red-1.png
new file mode 100644
index 000000000..fb0c0a2ca
Binary files /dev/null and b/Projects/space-game/step08/img/enemy-red-1.png differ
diff --git a/Projects/space-game/step08/img/enemy-red-2.png b/Projects/space-game/step08/img/enemy-red-2.png
new file mode 100644
index 000000000..3ee96c571
Binary files /dev/null and b/Projects/space-game/step08/img/enemy-red-2.png differ
diff --git a/Projects/space-game/step08/img/enemy-red-3.png b/Projects/space-game/step08/img/enemy-red-3.png
new file mode 100644
index 000000000..bc8eacd99
Binary files /dev/null and b/Projects/space-game/step08/img/enemy-red-3.png differ
diff --git a/Projects/space-game/step08/img/enemy-red-4.png b/Projects/space-game/step08/img/enemy-red-4.png
new file mode 100644
index 000000000..a3216d4bf
Binary files /dev/null and b/Projects/space-game/step08/img/enemy-red-4.png differ
diff --git a/Projects/space-game/step08/img/enemy-red-5.png b/Projects/space-game/step08/img/enemy-red-5.png
new file mode 100644
index 000000000..645cdf3c8
Binary files /dev/null and b/Projects/space-game/step08/img/enemy-red-5.png differ
diff --git a/Projects/space-game/step08/img/laser-blue-1.png b/Projects/space-game/step08/img/laser-blue-1.png
new file mode 100644
index 000000000..b76aaf7a0
Binary files /dev/null and b/Projects/space-game/step08/img/laser-blue-1.png differ
diff --git a/Projects/space-game/step08/img/laser-blue-10.png b/Projects/space-game/step08/img/laser-blue-10.png
new file mode 100644
index 000000000..dd6b766a4
Binary files /dev/null and b/Projects/space-game/step08/img/laser-blue-10.png differ
diff --git a/Projects/space-game/step08/img/laser-blue-11.png b/Projects/space-game/step08/img/laser-blue-11.png
new file mode 100644
index 000000000..c06234958
Binary files /dev/null and b/Projects/space-game/step08/img/laser-blue-11.png differ
diff --git a/Projects/space-game/step08/img/laser-blue-12.png b/Projects/space-game/step08/img/laser-blue-12.png
new file mode 100644
index 000000000..48b6103e1
Binary files /dev/null and b/Projects/space-game/step08/img/laser-blue-12.png differ
diff --git a/Projects/space-game/step08/img/laser-blue-13.png b/Projects/space-game/step08/img/laser-blue-13.png
new file mode 100644
index 000000000..c5ec6a329
Binary files /dev/null and b/Projects/space-game/step08/img/laser-blue-13.png differ
diff --git a/Projects/space-game/step08/img/laser-blue-14.png b/Projects/space-game/step08/img/laser-blue-14.png
new file mode 100644
index 000000000..254601e5f
Binary files /dev/null and b/Projects/space-game/step08/img/laser-blue-14.png differ
diff --git a/Projects/space-game/step08/img/laser-blue-15.png b/Projects/space-game/step08/img/laser-blue-15.png
new file mode 100644
index 000000000..1ea1966d5
Binary files /dev/null and b/Projects/space-game/step08/img/laser-blue-15.png differ
diff --git a/Projects/space-game/step08/img/laser-blue-16.png b/Projects/space-game/step08/img/laser-blue-16.png
new file mode 100644
index 000000000..1def98fb6
Binary files /dev/null and b/Projects/space-game/step08/img/laser-blue-16.png differ
diff --git a/Projects/space-game/step08/img/laser-blue-2.png b/Projects/space-game/step08/img/laser-blue-2.png
new file mode 100644
index 000000000..3f923a394
Binary files /dev/null and b/Projects/space-game/step08/img/laser-blue-2.png differ
diff --git a/Projects/space-game/step08/img/laser-blue-3.png b/Projects/space-game/step08/img/laser-blue-3.png
new file mode 100644
index 000000000..a16e9a82e
Binary files /dev/null and b/Projects/space-game/step08/img/laser-blue-3.png differ
diff --git a/Projects/space-game/step08/img/laser-blue-4.png b/Projects/space-game/step08/img/laser-blue-4.png
new file mode 100644
index 000000000..6f3b9103a
Binary files /dev/null and b/Projects/space-game/step08/img/laser-blue-4.png differ
diff --git a/Projects/space-game/step08/img/laser-blue-5.png b/Projects/space-game/step08/img/laser-blue-5.png
new file mode 100644
index 000000000..85cff7d5d
Binary files /dev/null and b/Projects/space-game/step08/img/laser-blue-5.png differ
diff --git a/Projects/space-game/step08/img/laser-blue-6.png b/Projects/space-game/step08/img/laser-blue-6.png
new file mode 100644
index 000000000..a621875c5
Binary files /dev/null and b/Projects/space-game/step08/img/laser-blue-6.png differ
diff --git a/Projects/space-game/step08/img/laser-blue-7.png b/Projects/space-game/step08/img/laser-blue-7.png
new file mode 100644
index 000000000..e1848bfc3
Binary files /dev/null and b/Projects/space-game/step08/img/laser-blue-7.png differ
diff --git a/Projects/space-game/step08/img/laser-blue-8.png b/Projects/space-game/step08/img/laser-blue-8.png
new file mode 100644
index 000000000..7a463965c
Binary files /dev/null and b/Projects/space-game/step08/img/laser-blue-8.png differ
diff --git a/Projects/space-game/step08/img/laser-blue-9.png b/Projects/space-game/step08/img/laser-blue-9.png
new file mode 100644
index 000000000..35624e649
Binary files /dev/null and b/Projects/space-game/step08/img/laser-blue-9.png differ
diff --git a/Projects/space-game/step08/img/laser-green-1.png b/Projects/space-game/step08/img/laser-green-1.png
new file mode 100644
index 000000000..c9982b1ed
Binary files /dev/null and b/Projects/space-game/step08/img/laser-green-1.png differ
diff --git a/Projects/space-game/step08/img/laser-green-10.png b/Projects/space-game/step08/img/laser-green-10.png
new file mode 100644
index 000000000..9c7974c69
Binary files /dev/null and b/Projects/space-game/step08/img/laser-green-10.png differ
diff --git a/Projects/space-game/step08/img/laser-green-11.png b/Projects/space-game/step08/img/laser-green-11.png
new file mode 100644
index 000000000..100cddbd4
Binary files /dev/null and b/Projects/space-game/step08/img/laser-green-11.png differ
diff --git a/Projects/space-game/step08/img/laser-green-12.png b/Projects/space-game/step08/img/laser-green-12.png
new file mode 100644
index 000000000..b05a72fa6
Binary files /dev/null and b/Projects/space-game/step08/img/laser-green-12.png differ
diff --git a/Projects/space-game/step08/img/laser-green-13.png b/Projects/space-game/step08/img/laser-green-13.png
new file mode 100644
index 000000000..92cc35334
Binary files /dev/null and b/Projects/space-game/step08/img/laser-green-13.png differ
diff --git a/Projects/space-game/step08/img/laser-green-14.png b/Projects/space-game/step08/img/laser-green-14.png
new file mode 100644
index 000000000..7abd3b29b
Binary files /dev/null and b/Projects/space-game/step08/img/laser-green-14.png differ
diff --git a/Projects/space-game/step08/img/laser-green-15.png b/Projects/space-game/step08/img/laser-green-15.png
new file mode 100644
index 000000000..97a44051d
Binary files /dev/null and b/Projects/space-game/step08/img/laser-green-15.png differ
diff --git a/Projects/space-game/step08/img/laser-green-16.png b/Projects/space-game/step08/img/laser-green-16.png
new file mode 100644
index 000000000..b73c12fb9
Binary files /dev/null and b/Projects/space-game/step08/img/laser-green-16.png differ
diff --git a/Projects/space-game/step08/img/laser-green-2.png b/Projects/space-game/step08/img/laser-green-2.png
new file mode 100644
index 000000000..5cd78303e
Binary files /dev/null and b/Projects/space-game/step08/img/laser-green-2.png differ
diff --git a/Projects/space-game/step08/img/laser-green-3.png b/Projects/space-game/step08/img/laser-green-3.png
new file mode 100644
index 000000000..d658547bc
Binary files /dev/null and b/Projects/space-game/step08/img/laser-green-3.png differ
diff --git a/Projects/space-game/step08/img/laser-green-4.png b/Projects/space-game/step08/img/laser-green-4.png
new file mode 100644
index 000000000..61b04fb71
Binary files /dev/null and b/Projects/space-game/step08/img/laser-green-4.png differ
diff --git a/Projects/space-game/step08/img/laser-green-5.png b/Projects/space-game/step08/img/laser-green-5.png
new file mode 100644
index 000000000..98ae6bee2
Binary files /dev/null and b/Projects/space-game/step08/img/laser-green-5.png differ
diff --git a/Projects/space-game/step08/img/laser-green-6.png b/Projects/space-game/step08/img/laser-green-6.png
new file mode 100644
index 000000000..36dd94d46
Binary files /dev/null and b/Projects/space-game/step08/img/laser-green-6.png differ
diff --git a/Projects/space-game/step08/img/laser-green-7.png b/Projects/space-game/step08/img/laser-green-7.png
new file mode 100644
index 000000000..0ae7c2d0c
Binary files /dev/null and b/Projects/space-game/step08/img/laser-green-7.png differ
diff --git a/Projects/space-game/step08/img/laser-green-8.png b/Projects/space-game/step08/img/laser-green-8.png
new file mode 100644
index 000000000..0ff1d80f9
Binary files /dev/null and b/Projects/space-game/step08/img/laser-green-8.png differ
diff --git a/Projects/space-game/step08/img/laser-green-9.png b/Projects/space-game/step08/img/laser-green-9.png
new file mode 100644
index 000000000..932056b9f
Binary files /dev/null and b/Projects/space-game/step08/img/laser-green-9.png differ
diff --git a/Projects/space-game/step08/img/laser-red-1.png b/Projects/space-game/step08/img/laser-red-1.png
new file mode 100644
index 000000000..5e467b65b
Binary files /dev/null and b/Projects/space-game/step08/img/laser-red-1.png differ
diff --git a/Projects/space-game/step08/img/laser-red-10.png b/Projects/space-game/step08/img/laser-red-10.png
new file mode 100644
index 000000000..0f85ba1b0
Binary files /dev/null and b/Projects/space-game/step08/img/laser-red-10.png differ
diff --git a/Projects/space-game/step08/img/laser-red-11.png b/Projects/space-game/step08/img/laser-red-11.png
new file mode 100644
index 000000000..95e9c0a14
Binary files /dev/null and b/Projects/space-game/step08/img/laser-red-11.png differ
diff --git a/Projects/space-game/step08/img/laser-red-12.png b/Projects/space-game/step08/img/laser-red-12.png
new file mode 100644
index 000000000..9f56da0ce
Binary files /dev/null and b/Projects/space-game/step08/img/laser-red-12.png differ
diff --git a/Projects/space-game/step08/img/laser-red-13.png b/Projects/space-game/step08/img/laser-red-13.png
new file mode 100644
index 000000000..292bcc5d5
Binary files /dev/null and b/Projects/space-game/step08/img/laser-red-13.png differ
diff --git a/Projects/space-game/step08/img/laser-red-14.png b/Projects/space-game/step08/img/laser-red-14.png
new file mode 100644
index 000000000..eaf8346de
Binary files /dev/null and b/Projects/space-game/step08/img/laser-red-14.png differ
diff --git a/Projects/space-game/step08/img/laser-red-15.png b/Projects/space-game/step08/img/laser-red-15.png
new file mode 100644
index 000000000..7d27c2a94
Binary files /dev/null and b/Projects/space-game/step08/img/laser-red-15.png differ
diff --git a/Projects/space-game/step08/img/laser-red-16.png b/Projects/space-game/step08/img/laser-red-16.png
new file mode 100644
index 000000000..b12fcd5d4
Binary files /dev/null and b/Projects/space-game/step08/img/laser-red-16.png differ
diff --git a/Projects/space-game/step08/img/laser-red-2.png b/Projects/space-game/step08/img/laser-red-2.png
new file mode 100644
index 000000000..1127fffb6
Binary files /dev/null and b/Projects/space-game/step08/img/laser-red-2.png differ
diff --git a/Projects/space-game/step08/img/laser-red-3.png b/Projects/space-game/step08/img/laser-red-3.png
new file mode 100644
index 000000000..bc1bb8730
Binary files /dev/null and b/Projects/space-game/step08/img/laser-red-3.png differ
diff --git a/Projects/space-game/step08/img/laser-red-4.png b/Projects/space-game/step08/img/laser-red-4.png
new file mode 100644
index 000000000..fc3655b0f
Binary files /dev/null and b/Projects/space-game/step08/img/laser-red-4.png differ
diff --git a/Projects/space-game/step08/img/laser-red-5.png b/Projects/space-game/step08/img/laser-red-5.png
new file mode 100644
index 000000000..46db2d77f
Binary files /dev/null and b/Projects/space-game/step08/img/laser-red-5.png differ
diff --git a/Projects/space-game/step08/img/laser-red-6.png b/Projects/space-game/step08/img/laser-red-6.png
new file mode 100644
index 000000000..33614ae1a
Binary files /dev/null and b/Projects/space-game/step08/img/laser-red-6.png differ
diff --git a/Projects/space-game/step08/img/laser-red-7.png b/Projects/space-game/step08/img/laser-red-7.png
new file mode 100644
index 000000000..23bab346f
Binary files /dev/null and b/Projects/space-game/step08/img/laser-red-7.png differ
diff --git a/Projects/space-game/step08/img/laser-red-8.png b/Projects/space-game/step08/img/laser-red-8.png
new file mode 100644
index 000000000..5a2cce30e
Binary files /dev/null and b/Projects/space-game/step08/img/laser-red-8.png differ
diff --git a/Projects/space-game/step08/img/laser-red-9.png b/Projects/space-game/step08/img/laser-red-9.png
new file mode 100644
index 000000000..7dc31dcc2
Binary files /dev/null and b/Projects/space-game/step08/img/laser-red-9.png differ
diff --git a/Projects/space-game/step08/img/player-blue-1.png b/Projects/space-game/step08/img/player-blue-1.png
new file mode 100644
index 000000000..cecbbed97
Binary files /dev/null and b/Projects/space-game/step08/img/player-blue-1.png differ
diff --git a/Projects/space-game/step08/img/player-blue-2.png b/Projects/space-game/step08/img/player-blue-2.png
new file mode 100644
index 000000000..e277114fd
Binary files /dev/null and b/Projects/space-game/step08/img/player-blue-2.png differ
diff --git a/Projects/space-game/step08/img/player-blue-3.png b/Projects/space-game/step08/img/player-blue-3.png
new file mode 100644
index 000000000..f34faf066
Binary files /dev/null and b/Projects/space-game/step08/img/player-blue-3.png differ
diff --git a/Projects/space-game/step08/img/player-green-1.png b/Projects/space-game/step08/img/player-green-1.png
new file mode 100644
index 000000000..2eb6f9c06
Binary files /dev/null and b/Projects/space-game/step08/img/player-green-1.png differ
diff --git a/Projects/space-game/step08/img/player-green-2.png b/Projects/space-game/step08/img/player-green-2.png
new file mode 100644
index 000000000..72e18c7ff
Binary files /dev/null and b/Projects/space-game/step08/img/player-green-2.png differ
diff --git a/Projects/space-game/step08/img/player-green-3.png b/Projects/space-game/step08/img/player-green-3.png
new file mode 100644
index 000000000..b853be42a
Binary files /dev/null and b/Projects/space-game/step08/img/player-green-3.png differ
diff --git a/Projects/space-game/step08/img/player-orange-1.png b/Projects/space-game/step08/img/player-orange-1.png
new file mode 100644
index 000000000..3902283d4
Binary files /dev/null and b/Projects/space-game/step08/img/player-orange-1.png differ
diff --git a/Projects/space-game/step08/img/player-orange-2.png b/Projects/space-game/step08/img/player-orange-2.png
new file mode 100644
index 000000000..82ddc8068
Binary files /dev/null and b/Projects/space-game/step08/img/player-orange-2.png differ
diff --git a/Projects/space-game/step08/img/player-orange-3.png b/Projects/space-game/step08/img/player-orange-3.png
new file mode 100644
index 000000000..0b6b7ec68
Binary files /dev/null and b/Projects/space-game/step08/img/player-orange-3.png differ
diff --git a/Projects/space-game/step08/img/player-red-1.png b/Projects/space-game/step08/img/player-red-1.png
new file mode 100644
index 000000000..3695e09e2
Binary files /dev/null and b/Projects/space-game/step08/img/player-red-1.png differ
diff --git a/Projects/space-game/step08/img/player-red-2.png b/Projects/space-game/step08/img/player-red-2.png
new file mode 100644
index 000000000..8213e978d
Binary files /dev/null and b/Projects/space-game/step08/img/player-red-2.png differ
diff --git a/Projects/space-game/step08/img/player-red-3.png b/Projects/space-game/step08/img/player-red-3.png
new file mode 100644
index 000000000..796e81d71
Binary files /dev/null and b/Projects/space-game/step08/img/player-red-3.png differ
diff --git a/Projects/space-game/step08/index.html b/Projects/space-game/step08/index.html
new file mode 100644
index 000000000..1ebb1e695
--- /dev/null
+++ b/Projects/space-game/step08/index.html
@@ -0,0 +1,32 @@
+
+
+
+
+
+
+ Space Game
+
+
+
+
+
+ Space Game
+
+
+
+
Congratulations!
+
You won the game
+
+
+
+
GAME OVER
+
You lost the game
+
+
+
+
+
+
+
+
+
diff --git a/Projects/space-game/step08/js/game.js b/Projects/space-game/step08/js/game.js
new file mode 100644
index 000000000..138edc988
--- /dev/null
+++ b/Projects/space-game/step08/js/game.js
@@ -0,0 +1,248 @@
+const KEY_CODE_LEFT = 37;
+const KEY_CODE_RIGHT = 39;
+const KEY_CODE_SPACE = 32;
+
+const GAME_WIDTH = 800;
+const GAME_HEIGHT = 600;
+
+const PLAYER_WIDTH = 20;
+const PLAYER_MAX_SPEED = 600.0;
+const LASER_MAX_SPEED = 300.0;
+const LASER_COOLDOWN = 0.5;
+
+const ENEMIES_PER_ROW = 10;
+const ENEMY_HORIZONTAL_PADDING = 80;
+const ENEMY_VERTICAL_PADDING = 70;
+const ENEMY_VERTICAL_SPACING = 80;
+const ENEMY_COOLDOWN = 2.0;
+
+const GAME_STATE = {
+ lastTime: Date.now(),
+ leftPressed: false,
+ rightPressed: false,
+ spacePressed: false,
+ playerX: 0,
+ playerY: 0,
+ playerCooldown: 0,
+ lasers: [],
+ enemies: [],
+ enemyLasers: [],
+};
+
+function rectsIntersect(r1, r2) {
+ return !(
+ r2.left > r1.right ||
+ r2.right < r1.left ||
+ r2.top > r1.bottom ||
+ r2.bottom < r1.top
+ );
+}
+
+function setPosition(el, x, y) {
+ el.style.transform = `translate(${x}px, ${y}px)`;
+}
+
+function clamp(v, min, max) {
+ if (v < min) {
+ return min;
+ } else if (v > max) {
+ return max;
+ } else {
+ return v;
+ }
+}
+
+function createPlayer(container) {
+ GAME_STATE.playerX = GAME_WIDTH / 2;
+ GAME_STATE.playerY = GAME_HEIGHT - 50;
+ const player = document.createElement("img");
+ player.src = "img/player-blue-1.png";
+ player.className = "player";
+ container.appendChild(player);
+ setPosition(player, GAME_STATE.playerX, GAME_STATE.playerY);
+}
+
+function updatePlayer(dt, container) {
+ if (GAME_STATE.leftPressed) {
+ GAME_STATE.playerX -= dt * PLAYER_MAX_SPEED;
+ }
+ if (GAME_STATE.rightPressed) {
+ GAME_STATE.playerX += dt * PLAYER_MAX_SPEED;
+ }
+
+ GAME_STATE.playerX = clamp(
+ GAME_STATE.playerX,
+ PLAYER_WIDTH,
+ GAME_WIDTH - PLAYER_WIDTH
+ );
+
+ if (GAME_STATE.spacePressed && GAME_STATE.playerCooldown <= 0) {
+ createLaser(container, GAME_STATE.playerX, GAME_STATE.playerY);
+ GAME_STATE.playerCooldown = LASER_COOLDOWN;
+ }
+ if (GAME_STATE.playerCooldown > 0) {
+ GAME_STATE.playerCooldown -= dt;
+ }
+
+ const player = document.querySelector(".player");
+ setPosition(player, GAME_STATE.playerX, GAME_STATE.playerY);
+}
+
+function createLaser(container, x, y) {
+ const element = document.createElement("img");
+ element.src = "img/laser-blue-1.png";
+ element.className = "laser";
+ container.appendChild(element);
+ const laser = { x, y, element };
+ GAME_STATE.lasers.push(laser);
+ const audio = new Audio("sound/sfx-laser1.ogg");
+ audio.play();
+ setPosition(element, x, y);
+}
+
+function updateLasers(dt, container) {
+ const lasers = GAME_STATE.lasers;
+ for (let i = 0; i < lasers.length; i++) {
+ const laser = lasers[i];
+ laser.y -= dt * LASER_MAX_SPEED;
+ if (laser.y < 0) {
+ destroyLaser(container, laser);
+ }
+ setPosition(laser.element, laser.x, laser.y);
+ const r1 = laser.element.getBoundingClientRect();
+ const enemies = GAME_STATE.enemies;
+ for (let j = 0; j < enemies.length; j++) {
+ const enemy = enemies[j];
+ if (enemy.isDead) continue;
+ const r2 = enemy.element.getBoundingClientRect();
+ if (rectsIntersect(r1, r2)) {
+ // Enemy was hit
+ destroyEnemy(container, enemy);
+ destroyLaser(container, laser);
+ break;
+ }
+ }
+ }
+ GAME_STATE.lasers = GAME_STATE.lasers.filter(e => !e.isDead);
+}
+
+function destroyLaser(container, laser) {
+ container.removeChild(laser.element);
+ laser.isDead = true;
+}
+
+function createEnemy(container, x, y) {
+ const element = document.createElement("img");
+ element.src = "img/enemy-blue-1.png";
+ element.className = "enemy";
+ container.appendChild(element);
+ const enemy = {
+ x,
+ y,
+ cooldown: ENEMY_COOLDOWN,
+ element
+ };
+ GAME_STATE.enemies.push(enemy);
+ setPosition(element, x, y);
+}
+
+function updateEnemies(dt, container) {
+ const dx = Math.sin(GAME_STATE.lastTime / 1000.0) * 50;
+ const dy = Math.cos(GAME_STATE.lastTime / 1000.0) * 10;
+
+ const enemies = GAME_STATE.enemies;
+ for (let i = 0; i < enemies.length; i++) {
+ const enemy = enemies[i];
+ const x = enemy.x + dx;
+ const y = enemy.y + dy;
+ setPosition(enemy.element, x, y);
+ enemy.cooldown -= dt;
+ if (enemy.cooldown <= 0) {
+ createEnemyLaser(container, x, y);
+ enemy.cooldown = ENEMY_COOLDOWN;
+ }
+ }
+ GAME_STATE.enemies = GAME_STATE.enemies.filter(e => !e.isDead);
+}
+
+function destroyEnemy(container, enemy) {
+ container.removeChild(enemy.element);
+ enemy.isDead = true;
+}
+
+function createEnemyLaser(container, x, y) {
+ const element = document.createElement("img");
+ element.src = "img/laser-red-5.png";
+ element.className = "enemy-laser";
+ container.appendChild(element);
+ const laser = { x, y, element };
+ GAME_STATE.enemyLasers.push(laser);
+ setPosition(element, x, y);
+}
+
+function updateEnemyLasers(dt, container) {
+ const lasers = GAME_STATE.enemyLasers;
+ for (let i = 0; i < lasers.length; i++) {
+ const laser = lasers[i];
+ laser.y += dt * LASER_MAX_SPEED;
+ if (laser.y > GAME_HEIGHT) {
+ destroyLaser(container, laser);
+ }
+ setPosition(laser.element, laser.x, laser.y);
+ }
+ GAME_STATE.enemyLasers = GAME_STATE.enemyLasers.filter(e => !e.isDead);
+}
+
+
+function init() {
+ const container = document.querySelector(".game");
+ createPlayer(container);
+
+ const enemySpacing = (GAME_WIDTH - ENEMY_HORIZONTAL_PADDING * 2) / (ENEMIES_PER_ROW - 1);
+ for (let j = 0; j < 3; j++) {
+ const y = ENEMY_VERTICAL_PADDING + j * ENEMY_VERTICAL_SPACING;
+ for (let i = 0; i < ENEMIES_PER_ROW; i++) {
+ const x = i * enemySpacing + ENEMY_HORIZONTAL_PADDING;
+ createEnemy(container, x, y);
+ }
+ }
+}
+
+function update(e) {
+ const currentTime = Date.now();
+ const dt = (currentTime - GAME_STATE.lastTime) / 1000.0;
+
+ const container = document.querySelector(".game");
+ updatePlayer(dt, container);
+ updateLasers(dt, container);
+ updateEnemies(dt, container);
+ updateEnemyLasers(dt, container);
+
+ GAME_STATE.lastTime = currentTime;
+ window.requestAnimationFrame(update);
+}
+
+function onKeyDown(e) {
+ if (e.keyCode === KEY_CODE_LEFT) {
+ GAME_STATE.leftPressed = true;
+ } else if (e.keyCode === KEY_CODE_RIGHT) {
+ GAME_STATE.rightPressed = true;
+ } else if (e.keyCode === KEY_CODE_SPACE) {
+ GAME_STATE.spacePressed = true;
+ }
+}
+
+function onKeyUp(e) {
+ if (e.keyCode === KEY_CODE_LEFT) {
+ GAME_STATE.leftPressed = false;
+ } else if (e.keyCode === KEY_CODE_RIGHT) {
+ GAME_STATE.rightPressed = false;
+ } else if (e.keyCode === KEY_CODE_SPACE) {
+ GAME_STATE.spacePressed = false;
+ }
+}
+
+init();
+window.addEventListener("keydown", onKeyDown);
+window.addEventListener("keyup", onKeyUp);
+window.requestAnimationFrame(update);
diff --git a/Projects/space-game/step08/sound/sfx-laser1.ogg b/Projects/space-game/step08/sound/sfx-laser1.ogg
new file mode 100644
index 000000000..7a9a4d2f2
Binary files /dev/null and b/Projects/space-game/step08/sound/sfx-laser1.ogg differ
diff --git a/Projects/space-game/step08/sound/sfx-lose.ogg b/Projects/space-game/step08/sound/sfx-lose.ogg
new file mode 100644
index 000000000..496968f8d
Binary files /dev/null and b/Projects/space-game/step08/sound/sfx-lose.ogg differ
diff --git a/Projects/space-game/step09/README.md b/Projects/space-game/step09/README.md
new file mode 100644
index 000000000..86dbb9062
--- /dev/null
+++ b/Projects/space-game/step09/README.md
@@ -0,0 +1,27 @@
+# Step 9 - Random cooldown
+
+[Play this version](https://rawgit.com/HackYourFutureBelgium/JavaScript2/master/Projects/space-game/step09/index.html)
+
+This is not very much code but we need to explain our custom `rand` function. It returns a random value between `min` and `max`.
+
+Internally it uses [`Math.random`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random). That function only returns values between 0.0-1.0.
+
+Here's the code for our custom random function:
+
+```
+function rand(min, max) {
+ if (min === undefined) min = 0;
+ if (max === undefined) max = 1;
+ return min + Math.random() * (max - min);
+}
+```
+
+First it sets the default values for the function if we don't provide them. So if we use it just as `rand()`, it will use a minimum value of 0 and a maximum value of 1.
+
+The core line is the third line of our function, `return min + Math.random() * (max - min);`. This does a couple of things:
+
+- It calculates the *range* of the random values. So for example if min = 25 and max = 100, our range of possible values is 75 (100 - 25).
+- It uses `Math.random()` to generate a value between 0 and 1.
+- We multiply this random value with the range. Since the max is 1, the maximum we can have is the range (75 in our example).
+- We then add the minimum value again to *shift* the value up. So by adding 25 to our value between 0-75, it results in a random value between 25 and 100, which is what we want.
+
diff --git a/Projects/space-game/step09/css/main.css b/Projects/space-game/step09/css/main.css
new file mode 100644
index 000000000..112ed105b
--- /dev/null
+++ b/Projects/space-game/step09/css/main.css
@@ -0,0 +1,135 @@
+html,
+body {
+ height: 100%;
+ overflow: hidden;
+}
+
+body {
+ margin: 0;
+ font: 16px sans-serif;
+}
+
+.wrap {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+}
+
+header {
+ text-align: center;
+ background: black;
+ color: #fff;
+ padding: 10px;
+}
+
+footer {
+ padding: 10px;
+ text-align: center;
+ font-size: 11px;
+ background: black;
+ color: white;
+}
+
+.game-wrapper {
+ flex: 1;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background: #222;
+}
+.game {
+ width: 800px;
+ height: 600px;
+ background: url(../img/background-blue.png);
+ animation: scroll-background 5s linear infinite;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+ position: relative;
+}
+
+@keyframes scroll-background {
+ from {
+ background-position-y: 0px;
+ }
+ to {
+ background-position-y: 256px;
+ }
+}
+
+.game .enemy {
+ position: absolute;
+ margin-left: -20px;
+ margin-top: -18px;
+ width: 40px;
+}
+
+.game .player {
+ position: absolute;
+ margin-left: -20px;
+ width: 40px;
+}
+
+.game .laser {
+ position: absolute;
+ margin-left: -2.5px;
+ height: 30px;
+}
+
+.game .enemy-laser {
+ position: absolute;
+ margin-left: -2.5px;
+ height: 30px;
+}
+
+.congratulations {
+ display: none;
+ position: absolute;
+ background: #c7a526;
+ color: white;
+ padding: 20px 50px;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+ border-radius: 10px;
+ text-align: center;
+ animation: pop-in 1s;
+}
+
+.game-over {
+ display: none;
+ position: absolute;
+ background: #6b1818;
+ color: white;
+ padding: 20px 50px;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+ border-radius: 10px;
+ text-align: center;
+ animation: pop-in 1s;
+}
+
+.btn {
+ border: 2px solid #36bbf5;
+ border-radius: 3px;
+ box-shadow: 0 2px rgba(0, 0, 0, 0.15);
+ background: linear-gradient(
+ to bottom,
+ #fff 0%,
+ #fff 49%,
+ #f5f5f5 50%,
+ #eee 100%
+ );
+ padding: 10px 40px;
+ font: 14px sans-serif;
+}
+@keyframes pop-in {
+ 0% {
+ opacity: 0;
+ transform: translate(0, -100px);
+ }
+ 10% {
+ opacity: 1;
+ }
+ 50% {
+ transform: translate(0, 30px);
+ }
+ 100% {
+ transform: translate(0, 0);
+ }
+}
diff --git a/Projects/space-game/step09/img/background-black.png b/Projects/space-game/step09/img/background-black.png
new file mode 100644
index 000000000..82ddab992
Binary files /dev/null and b/Projects/space-game/step09/img/background-black.png differ
diff --git a/Projects/space-game/step09/img/background-blue.png b/Projects/space-game/step09/img/background-blue.png
new file mode 100644
index 000000000..47642cd5d
Binary files /dev/null and b/Projects/space-game/step09/img/background-blue.png differ
diff --git a/Projects/space-game/step09/img/background-dark-purple.png b/Projects/space-game/step09/img/background-dark-purple.png
new file mode 100644
index 000000000..d9c3fd42d
Binary files /dev/null and b/Projects/space-game/step09/img/background-dark-purple.png differ
diff --git a/Projects/space-game/step09/img/background-purple.png b/Projects/space-game/step09/img/background-purple.png
new file mode 100644
index 000000000..5e8617769
Binary files /dev/null and b/Projects/space-game/step09/img/background-purple.png differ
diff --git a/Projects/space-game/step09/img/enemy-black-1.png b/Projects/space-game/step09/img/enemy-black-1.png
new file mode 100644
index 000000000..bc2fa4c1c
Binary files /dev/null and b/Projects/space-game/step09/img/enemy-black-1.png differ
diff --git a/Projects/space-game/step09/img/enemy-black-2.png b/Projects/space-game/step09/img/enemy-black-2.png
new file mode 100644
index 000000000..0e6b91c56
Binary files /dev/null and b/Projects/space-game/step09/img/enemy-black-2.png differ
diff --git a/Projects/space-game/step09/img/enemy-black-3.png b/Projects/space-game/step09/img/enemy-black-3.png
new file mode 100644
index 000000000..dafec1b16
Binary files /dev/null and b/Projects/space-game/step09/img/enemy-black-3.png differ
diff --git a/Projects/space-game/step09/img/enemy-black-4.png b/Projects/space-game/step09/img/enemy-black-4.png
new file mode 100644
index 000000000..a575c9d49
Binary files /dev/null and b/Projects/space-game/step09/img/enemy-black-4.png differ
diff --git a/Projects/space-game/step09/img/enemy-black-5.png b/Projects/space-game/step09/img/enemy-black-5.png
new file mode 100644
index 000000000..739dcf0fe
Binary files /dev/null and b/Projects/space-game/step09/img/enemy-black-5.png differ
diff --git a/Projects/space-game/step09/img/enemy-blue-1.png b/Projects/space-game/step09/img/enemy-blue-1.png
new file mode 100644
index 000000000..cedc0730d
Binary files /dev/null and b/Projects/space-game/step09/img/enemy-blue-1.png differ
diff --git a/Projects/space-game/step09/img/enemy-blue-2.png b/Projects/space-game/step09/img/enemy-blue-2.png
new file mode 100644
index 000000000..bf3bd0c9f
Binary files /dev/null and b/Projects/space-game/step09/img/enemy-blue-2.png differ
diff --git a/Projects/space-game/step09/img/enemy-blue-3.png b/Projects/space-game/step09/img/enemy-blue-3.png
new file mode 100644
index 000000000..9a63d03b0
Binary files /dev/null and b/Projects/space-game/step09/img/enemy-blue-3.png differ
diff --git a/Projects/space-game/step09/img/enemy-blue-4.png b/Projects/space-game/step09/img/enemy-blue-4.png
new file mode 100644
index 000000000..d5670a3a5
Binary files /dev/null and b/Projects/space-game/step09/img/enemy-blue-4.png differ
diff --git a/Projects/space-game/step09/img/enemy-blue-5.png b/Projects/space-game/step09/img/enemy-blue-5.png
new file mode 100644
index 000000000..e740509f7
Binary files /dev/null and b/Projects/space-game/step09/img/enemy-blue-5.png differ
diff --git a/Projects/space-game/step09/img/enemy-green-1.png b/Projects/space-game/step09/img/enemy-green-1.png
new file mode 100644
index 000000000..064e29037
Binary files /dev/null and b/Projects/space-game/step09/img/enemy-green-1.png differ
diff --git a/Projects/space-game/step09/img/enemy-green-2.png b/Projects/space-game/step09/img/enemy-green-2.png
new file mode 100644
index 000000000..5189d2459
Binary files /dev/null and b/Projects/space-game/step09/img/enemy-green-2.png differ
diff --git a/Projects/space-game/step09/img/enemy-green-3.png b/Projects/space-game/step09/img/enemy-green-3.png
new file mode 100644
index 000000000..74e2bca68
Binary files /dev/null and b/Projects/space-game/step09/img/enemy-green-3.png differ
diff --git a/Projects/space-game/step09/img/enemy-green-4.png b/Projects/space-game/step09/img/enemy-green-4.png
new file mode 100644
index 000000000..112e299f8
Binary files /dev/null and b/Projects/space-game/step09/img/enemy-green-4.png differ
diff --git a/Projects/space-game/step09/img/enemy-green-5.png b/Projects/space-game/step09/img/enemy-green-5.png
new file mode 100644
index 000000000..59382705b
Binary files /dev/null and b/Projects/space-game/step09/img/enemy-green-5.png differ
diff --git a/Projects/space-game/step09/img/enemy-red-1.png b/Projects/space-game/step09/img/enemy-red-1.png
new file mode 100644
index 000000000..fb0c0a2ca
Binary files /dev/null and b/Projects/space-game/step09/img/enemy-red-1.png differ
diff --git a/Projects/space-game/step09/img/enemy-red-2.png b/Projects/space-game/step09/img/enemy-red-2.png
new file mode 100644
index 000000000..3ee96c571
Binary files /dev/null and b/Projects/space-game/step09/img/enemy-red-2.png differ
diff --git a/Projects/space-game/step09/img/enemy-red-3.png b/Projects/space-game/step09/img/enemy-red-3.png
new file mode 100644
index 000000000..bc8eacd99
Binary files /dev/null and b/Projects/space-game/step09/img/enemy-red-3.png differ
diff --git a/Projects/space-game/step09/img/enemy-red-4.png b/Projects/space-game/step09/img/enemy-red-4.png
new file mode 100644
index 000000000..a3216d4bf
Binary files /dev/null and b/Projects/space-game/step09/img/enemy-red-4.png differ
diff --git a/Projects/space-game/step09/img/enemy-red-5.png b/Projects/space-game/step09/img/enemy-red-5.png
new file mode 100644
index 000000000..645cdf3c8
Binary files /dev/null and b/Projects/space-game/step09/img/enemy-red-5.png differ
diff --git a/Projects/space-game/step09/img/laser-blue-1.png b/Projects/space-game/step09/img/laser-blue-1.png
new file mode 100644
index 000000000..b76aaf7a0
Binary files /dev/null and b/Projects/space-game/step09/img/laser-blue-1.png differ
diff --git a/Projects/space-game/step09/img/laser-blue-10.png b/Projects/space-game/step09/img/laser-blue-10.png
new file mode 100644
index 000000000..dd6b766a4
Binary files /dev/null and b/Projects/space-game/step09/img/laser-blue-10.png differ
diff --git a/Projects/space-game/step09/img/laser-blue-11.png b/Projects/space-game/step09/img/laser-blue-11.png
new file mode 100644
index 000000000..c06234958
Binary files /dev/null and b/Projects/space-game/step09/img/laser-blue-11.png differ
diff --git a/Projects/space-game/step09/img/laser-blue-12.png b/Projects/space-game/step09/img/laser-blue-12.png
new file mode 100644
index 000000000..48b6103e1
Binary files /dev/null and b/Projects/space-game/step09/img/laser-blue-12.png differ
diff --git a/Projects/space-game/step09/img/laser-blue-13.png b/Projects/space-game/step09/img/laser-blue-13.png
new file mode 100644
index 000000000..c5ec6a329
Binary files /dev/null and b/Projects/space-game/step09/img/laser-blue-13.png differ
diff --git a/Projects/space-game/step09/img/laser-blue-14.png b/Projects/space-game/step09/img/laser-blue-14.png
new file mode 100644
index 000000000..254601e5f
Binary files /dev/null and b/Projects/space-game/step09/img/laser-blue-14.png differ
diff --git a/Projects/space-game/step09/img/laser-blue-15.png b/Projects/space-game/step09/img/laser-blue-15.png
new file mode 100644
index 000000000..1ea1966d5
Binary files /dev/null and b/Projects/space-game/step09/img/laser-blue-15.png differ
diff --git a/Projects/space-game/step09/img/laser-blue-16.png b/Projects/space-game/step09/img/laser-blue-16.png
new file mode 100644
index 000000000..1def98fb6
Binary files /dev/null and b/Projects/space-game/step09/img/laser-blue-16.png differ
diff --git a/Projects/space-game/step09/img/laser-blue-2.png b/Projects/space-game/step09/img/laser-blue-2.png
new file mode 100644
index 000000000..3f923a394
Binary files /dev/null and b/Projects/space-game/step09/img/laser-blue-2.png differ
diff --git a/Projects/space-game/step09/img/laser-blue-3.png b/Projects/space-game/step09/img/laser-blue-3.png
new file mode 100644
index 000000000..a16e9a82e
Binary files /dev/null and b/Projects/space-game/step09/img/laser-blue-3.png differ
diff --git a/Projects/space-game/step09/img/laser-blue-4.png b/Projects/space-game/step09/img/laser-blue-4.png
new file mode 100644
index 000000000..6f3b9103a
Binary files /dev/null and b/Projects/space-game/step09/img/laser-blue-4.png differ
diff --git a/Projects/space-game/step09/img/laser-blue-5.png b/Projects/space-game/step09/img/laser-blue-5.png
new file mode 100644
index 000000000..85cff7d5d
Binary files /dev/null and b/Projects/space-game/step09/img/laser-blue-5.png differ
diff --git a/Projects/space-game/step09/img/laser-blue-6.png b/Projects/space-game/step09/img/laser-blue-6.png
new file mode 100644
index 000000000..a621875c5
Binary files /dev/null and b/Projects/space-game/step09/img/laser-blue-6.png differ
diff --git a/Projects/space-game/step09/img/laser-blue-7.png b/Projects/space-game/step09/img/laser-blue-7.png
new file mode 100644
index 000000000..e1848bfc3
Binary files /dev/null and b/Projects/space-game/step09/img/laser-blue-7.png differ
diff --git a/Projects/space-game/step09/img/laser-blue-8.png b/Projects/space-game/step09/img/laser-blue-8.png
new file mode 100644
index 000000000..7a463965c
Binary files /dev/null and b/Projects/space-game/step09/img/laser-blue-8.png differ
diff --git a/Projects/space-game/step09/img/laser-blue-9.png b/Projects/space-game/step09/img/laser-blue-9.png
new file mode 100644
index 000000000..35624e649
Binary files /dev/null and b/Projects/space-game/step09/img/laser-blue-9.png differ
diff --git a/Projects/space-game/step09/img/laser-green-1.png b/Projects/space-game/step09/img/laser-green-1.png
new file mode 100644
index 000000000..c9982b1ed
Binary files /dev/null and b/Projects/space-game/step09/img/laser-green-1.png differ
diff --git a/Projects/space-game/step09/img/laser-green-10.png b/Projects/space-game/step09/img/laser-green-10.png
new file mode 100644
index 000000000..9c7974c69
Binary files /dev/null and b/Projects/space-game/step09/img/laser-green-10.png differ
diff --git a/Projects/space-game/step09/img/laser-green-11.png b/Projects/space-game/step09/img/laser-green-11.png
new file mode 100644
index 000000000..100cddbd4
Binary files /dev/null and b/Projects/space-game/step09/img/laser-green-11.png differ
diff --git a/Projects/space-game/step09/img/laser-green-12.png b/Projects/space-game/step09/img/laser-green-12.png
new file mode 100644
index 000000000..b05a72fa6
Binary files /dev/null and b/Projects/space-game/step09/img/laser-green-12.png differ
diff --git a/Projects/space-game/step09/img/laser-green-13.png b/Projects/space-game/step09/img/laser-green-13.png
new file mode 100644
index 000000000..92cc35334
Binary files /dev/null and b/Projects/space-game/step09/img/laser-green-13.png differ
diff --git a/Projects/space-game/step09/img/laser-green-14.png b/Projects/space-game/step09/img/laser-green-14.png
new file mode 100644
index 000000000..7abd3b29b
Binary files /dev/null and b/Projects/space-game/step09/img/laser-green-14.png differ
diff --git a/Projects/space-game/step09/img/laser-green-15.png b/Projects/space-game/step09/img/laser-green-15.png
new file mode 100644
index 000000000..97a44051d
Binary files /dev/null and b/Projects/space-game/step09/img/laser-green-15.png differ
diff --git a/Projects/space-game/step09/img/laser-green-16.png b/Projects/space-game/step09/img/laser-green-16.png
new file mode 100644
index 000000000..b73c12fb9
Binary files /dev/null and b/Projects/space-game/step09/img/laser-green-16.png differ
diff --git a/Projects/space-game/step09/img/laser-green-2.png b/Projects/space-game/step09/img/laser-green-2.png
new file mode 100644
index 000000000..5cd78303e
Binary files /dev/null and b/Projects/space-game/step09/img/laser-green-2.png differ
diff --git a/Projects/space-game/step09/img/laser-green-3.png b/Projects/space-game/step09/img/laser-green-3.png
new file mode 100644
index 000000000..d658547bc
Binary files /dev/null and b/Projects/space-game/step09/img/laser-green-3.png differ
diff --git a/Projects/space-game/step09/img/laser-green-4.png b/Projects/space-game/step09/img/laser-green-4.png
new file mode 100644
index 000000000..61b04fb71
Binary files /dev/null and b/Projects/space-game/step09/img/laser-green-4.png differ
diff --git a/Projects/space-game/step09/img/laser-green-5.png b/Projects/space-game/step09/img/laser-green-5.png
new file mode 100644
index 000000000..98ae6bee2
Binary files /dev/null and b/Projects/space-game/step09/img/laser-green-5.png differ
diff --git a/Projects/space-game/step09/img/laser-green-6.png b/Projects/space-game/step09/img/laser-green-6.png
new file mode 100644
index 000000000..36dd94d46
Binary files /dev/null and b/Projects/space-game/step09/img/laser-green-6.png differ
diff --git a/Projects/space-game/step09/img/laser-green-7.png b/Projects/space-game/step09/img/laser-green-7.png
new file mode 100644
index 000000000..0ae7c2d0c
Binary files /dev/null and b/Projects/space-game/step09/img/laser-green-7.png differ
diff --git a/Projects/space-game/step09/img/laser-green-8.png b/Projects/space-game/step09/img/laser-green-8.png
new file mode 100644
index 000000000..0ff1d80f9
Binary files /dev/null and b/Projects/space-game/step09/img/laser-green-8.png differ
diff --git a/Projects/space-game/step09/img/laser-green-9.png b/Projects/space-game/step09/img/laser-green-9.png
new file mode 100644
index 000000000..932056b9f
Binary files /dev/null and b/Projects/space-game/step09/img/laser-green-9.png differ
diff --git a/Projects/space-game/step09/img/laser-red-1.png b/Projects/space-game/step09/img/laser-red-1.png
new file mode 100644
index 000000000..5e467b65b
Binary files /dev/null and b/Projects/space-game/step09/img/laser-red-1.png differ
diff --git a/Projects/space-game/step09/img/laser-red-10.png b/Projects/space-game/step09/img/laser-red-10.png
new file mode 100644
index 000000000..0f85ba1b0
Binary files /dev/null and b/Projects/space-game/step09/img/laser-red-10.png differ
diff --git a/Projects/space-game/step09/img/laser-red-11.png b/Projects/space-game/step09/img/laser-red-11.png
new file mode 100644
index 000000000..95e9c0a14
Binary files /dev/null and b/Projects/space-game/step09/img/laser-red-11.png differ
diff --git a/Projects/space-game/step09/img/laser-red-12.png b/Projects/space-game/step09/img/laser-red-12.png
new file mode 100644
index 000000000..9f56da0ce
Binary files /dev/null and b/Projects/space-game/step09/img/laser-red-12.png differ
diff --git a/Projects/space-game/step09/img/laser-red-13.png b/Projects/space-game/step09/img/laser-red-13.png
new file mode 100644
index 000000000..292bcc5d5
Binary files /dev/null and b/Projects/space-game/step09/img/laser-red-13.png differ
diff --git a/Projects/space-game/step09/img/laser-red-14.png b/Projects/space-game/step09/img/laser-red-14.png
new file mode 100644
index 000000000..eaf8346de
Binary files /dev/null and b/Projects/space-game/step09/img/laser-red-14.png differ
diff --git a/Projects/space-game/step09/img/laser-red-15.png b/Projects/space-game/step09/img/laser-red-15.png
new file mode 100644
index 000000000..7d27c2a94
Binary files /dev/null and b/Projects/space-game/step09/img/laser-red-15.png differ
diff --git a/Projects/space-game/step09/img/laser-red-16.png b/Projects/space-game/step09/img/laser-red-16.png
new file mode 100644
index 000000000..b12fcd5d4
Binary files /dev/null and b/Projects/space-game/step09/img/laser-red-16.png differ
diff --git a/Projects/space-game/step09/img/laser-red-2.png b/Projects/space-game/step09/img/laser-red-2.png
new file mode 100644
index 000000000..1127fffb6
Binary files /dev/null and b/Projects/space-game/step09/img/laser-red-2.png differ
diff --git a/Projects/space-game/step09/img/laser-red-3.png b/Projects/space-game/step09/img/laser-red-3.png
new file mode 100644
index 000000000..bc1bb8730
Binary files /dev/null and b/Projects/space-game/step09/img/laser-red-3.png differ
diff --git a/Projects/space-game/step09/img/laser-red-4.png b/Projects/space-game/step09/img/laser-red-4.png
new file mode 100644
index 000000000..fc3655b0f
Binary files /dev/null and b/Projects/space-game/step09/img/laser-red-4.png differ
diff --git a/Projects/space-game/step09/img/laser-red-5.png b/Projects/space-game/step09/img/laser-red-5.png
new file mode 100644
index 000000000..46db2d77f
Binary files /dev/null and b/Projects/space-game/step09/img/laser-red-5.png differ
diff --git a/Projects/space-game/step09/img/laser-red-6.png b/Projects/space-game/step09/img/laser-red-6.png
new file mode 100644
index 000000000..33614ae1a
Binary files /dev/null and b/Projects/space-game/step09/img/laser-red-6.png differ
diff --git a/Projects/space-game/step09/img/laser-red-7.png b/Projects/space-game/step09/img/laser-red-7.png
new file mode 100644
index 000000000..23bab346f
Binary files /dev/null and b/Projects/space-game/step09/img/laser-red-7.png differ
diff --git a/Projects/space-game/step09/img/laser-red-8.png b/Projects/space-game/step09/img/laser-red-8.png
new file mode 100644
index 000000000..5a2cce30e
Binary files /dev/null and b/Projects/space-game/step09/img/laser-red-8.png differ
diff --git a/Projects/space-game/step09/img/laser-red-9.png b/Projects/space-game/step09/img/laser-red-9.png
new file mode 100644
index 000000000..7dc31dcc2
Binary files /dev/null and b/Projects/space-game/step09/img/laser-red-9.png differ
diff --git a/Projects/space-game/step09/img/player-blue-1.png b/Projects/space-game/step09/img/player-blue-1.png
new file mode 100644
index 000000000..cecbbed97
Binary files /dev/null and b/Projects/space-game/step09/img/player-blue-1.png differ
diff --git a/Projects/space-game/step09/img/player-blue-2.png b/Projects/space-game/step09/img/player-blue-2.png
new file mode 100644
index 000000000..e277114fd
Binary files /dev/null and b/Projects/space-game/step09/img/player-blue-2.png differ
diff --git a/Projects/space-game/step09/img/player-blue-3.png b/Projects/space-game/step09/img/player-blue-3.png
new file mode 100644
index 000000000..f34faf066
Binary files /dev/null and b/Projects/space-game/step09/img/player-blue-3.png differ
diff --git a/Projects/space-game/step09/img/player-green-1.png b/Projects/space-game/step09/img/player-green-1.png
new file mode 100644
index 000000000..2eb6f9c06
Binary files /dev/null and b/Projects/space-game/step09/img/player-green-1.png differ
diff --git a/Projects/space-game/step09/img/player-green-2.png b/Projects/space-game/step09/img/player-green-2.png
new file mode 100644
index 000000000..72e18c7ff
Binary files /dev/null and b/Projects/space-game/step09/img/player-green-2.png differ
diff --git a/Projects/space-game/step09/img/player-green-3.png b/Projects/space-game/step09/img/player-green-3.png
new file mode 100644
index 000000000..b853be42a
Binary files /dev/null and b/Projects/space-game/step09/img/player-green-3.png differ
diff --git a/Projects/space-game/step09/img/player-orange-1.png b/Projects/space-game/step09/img/player-orange-1.png
new file mode 100644
index 000000000..3902283d4
Binary files /dev/null and b/Projects/space-game/step09/img/player-orange-1.png differ
diff --git a/Projects/space-game/step09/img/player-orange-2.png b/Projects/space-game/step09/img/player-orange-2.png
new file mode 100644
index 000000000..82ddc8068
Binary files /dev/null and b/Projects/space-game/step09/img/player-orange-2.png differ
diff --git a/Projects/space-game/step09/img/player-orange-3.png b/Projects/space-game/step09/img/player-orange-3.png
new file mode 100644
index 000000000..0b6b7ec68
Binary files /dev/null and b/Projects/space-game/step09/img/player-orange-3.png differ
diff --git a/Projects/space-game/step09/img/player-red-1.png b/Projects/space-game/step09/img/player-red-1.png
new file mode 100644
index 000000000..3695e09e2
Binary files /dev/null and b/Projects/space-game/step09/img/player-red-1.png differ
diff --git a/Projects/space-game/step09/img/player-red-2.png b/Projects/space-game/step09/img/player-red-2.png
new file mode 100644
index 000000000..8213e978d
Binary files /dev/null and b/Projects/space-game/step09/img/player-red-2.png differ
diff --git a/Projects/space-game/step09/img/player-red-3.png b/Projects/space-game/step09/img/player-red-3.png
new file mode 100644
index 000000000..796e81d71
Binary files /dev/null and b/Projects/space-game/step09/img/player-red-3.png differ
diff --git a/Projects/space-game/step09/index.html b/Projects/space-game/step09/index.html
new file mode 100644
index 000000000..1ebb1e695
--- /dev/null
+++ b/Projects/space-game/step09/index.html
@@ -0,0 +1,32 @@
+
+
+
+
+
+
+ Space Game
+
+
+
+
+
+ Space Game
+
+
+
+
Congratulations!
+
You won the game
+
+
+
+
GAME OVER
+
You lost the game
+
+
+
+
+
+
+
+
+
diff --git a/Projects/space-game/step09/js/game.js b/Projects/space-game/step09/js/game.js
new file mode 100644
index 000000000..67a04510e
--- /dev/null
+++ b/Projects/space-game/step09/js/game.js
@@ -0,0 +1,254 @@
+const KEY_CODE_LEFT = 37;
+const KEY_CODE_RIGHT = 39;
+const KEY_CODE_SPACE = 32;
+
+const GAME_WIDTH = 800;
+const GAME_HEIGHT = 600;
+
+const PLAYER_WIDTH = 20;
+const PLAYER_MAX_SPEED = 600.0;
+const LASER_MAX_SPEED = 300.0;
+const LASER_COOLDOWN = 0.5;
+
+const ENEMIES_PER_ROW = 10;
+const ENEMY_HORIZONTAL_PADDING = 80;
+const ENEMY_VERTICAL_PADDING = 70;
+const ENEMY_VERTICAL_SPACING = 80;
+const ENEMY_COOLDOWN = 2.0;
+
+const GAME_STATE = {
+ lastTime: Date.now(),
+ leftPressed: false,
+ rightPressed: false,
+ spacePressed: false,
+ playerX: 0,
+ playerY: 0,
+ playerCooldown: 0,
+ lasers: [],
+ enemies: [],
+ enemyLasers: [],
+};
+
+function rectsIntersect(r1, r2) {
+ return !(
+ r2.left > r1.right ||
+ r2.right < r1.left ||
+ r2.top > r1.bottom ||
+ r2.bottom < r1.top
+ );
+}
+
+function setPosition(el, x, y) {
+ el.style.transform = `translate(${x}px, ${y}px)`;
+}
+
+function clamp(v, min, max) {
+ if (v < min) {
+ return min;
+ } else if (v > max) {
+ return max;
+ } else {
+ return v;
+ }
+}
+
+function rand(min, max) {
+ if (min === undefined) min = 0;
+ if (max === undefined) max = 1;
+ return min + Math.random() * (max - min);
+}
+
+function createPlayer(container) {
+ GAME_STATE.playerX = GAME_WIDTH / 2;
+ GAME_STATE.playerY = GAME_HEIGHT - 50;
+ const player = document.createElement("img");
+ player.src = "img/player-blue-1.png";
+ player.className = "player";
+ container.appendChild(player);
+ setPosition(player, GAME_STATE.playerX, GAME_STATE.playerY);
+}
+
+function updatePlayer(dt, container) {
+ if (GAME_STATE.leftPressed) {
+ GAME_STATE.playerX -= dt * PLAYER_MAX_SPEED;
+ }
+ if (GAME_STATE.rightPressed) {
+ GAME_STATE.playerX += dt * PLAYER_MAX_SPEED;
+ }
+
+ GAME_STATE.playerX = clamp(
+ GAME_STATE.playerX,
+ PLAYER_WIDTH,
+ GAME_WIDTH - PLAYER_WIDTH
+ );
+
+ if (GAME_STATE.spacePressed && GAME_STATE.playerCooldown <= 0) {
+ createLaser(container, GAME_STATE.playerX, GAME_STATE.playerY);
+ GAME_STATE.playerCooldown = LASER_COOLDOWN;
+ }
+ if (GAME_STATE.playerCooldown > 0) {
+ GAME_STATE.playerCooldown -= dt;
+ }
+
+ const player = document.querySelector(".player");
+ setPosition(player, GAME_STATE.playerX, GAME_STATE.playerY);
+}
+
+function createLaser(container, x, y) {
+ const element = document.createElement("img");
+ element.src = "img/laser-blue-1.png";
+ element.className = "laser";
+ container.appendChild(element);
+ const laser = { x, y, element };
+ GAME_STATE.lasers.push(laser);
+ const audio = new Audio("sound/sfx-laser1.ogg");
+ audio.play();
+ setPosition(element, x, y);
+}
+
+function updateLasers(dt, container) {
+ const lasers = GAME_STATE.lasers;
+ for (let i = 0; i < lasers.length; i++) {
+ const laser = lasers[i];
+ laser.y -= dt * LASER_MAX_SPEED;
+ if (laser.y < 0) {
+ destroyLaser(container, laser);
+ }
+ setPosition(laser.element, laser.x, laser.y);
+ const r1 = laser.element.getBoundingClientRect();
+ const enemies = GAME_STATE.enemies;
+ for (let j = 0; j < enemies.length; j++) {
+ const enemy = enemies[j];
+ if (enemy.isDead) continue;
+ const r2 = enemy.element.getBoundingClientRect();
+ if (rectsIntersect(r1, r2)) {
+ // Enemy was hit
+ destroyEnemy(container, enemy);
+ destroyLaser(container, laser);
+ break;
+ }
+ }
+ }
+ GAME_STATE.lasers = GAME_STATE.lasers.filter(e => !e.isDead);
+}
+
+function destroyLaser(container, laser) {
+ container.removeChild(laser.element);
+ laser.isDead = true;
+}
+
+function createEnemy(container, x, y) {
+ const element = document.createElement("img");
+ element.src = "img/enemy-blue-1.png";
+ element.className = "enemy";
+ container.appendChild(element);
+ const enemy = {
+ x,
+ y,
+ cooldown: rand(0.5, ENEMY_COOLDOWN),
+ element
+ };
+ GAME_STATE.enemies.push(enemy);
+ setPosition(element, x, y);
+}
+
+function updateEnemies(dt, container) {
+ const dx = Math.sin(GAME_STATE.lastTime / 1000.0) * 50;
+ const dy = Math.cos(GAME_STATE.lastTime / 1000.0) * 10;
+
+ const enemies = GAME_STATE.enemies;
+ for (let i = 0; i < enemies.length; i++) {
+ const enemy = enemies[i];
+ const x = enemy.x + dx;
+ const y = enemy.y + dy;
+ setPosition(enemy.element, x, y);
+ enemy.cooldown -= dt;
+ if (enemy.cooldown <= 0) {
+ createEnemyLaser(container, x, y);
+ enemy.cooldown = ENEMY_COOLDOWN;
+ }
+ }
+ GAME_STATE.enemies = GAME_STATE.enemies.filter(e => !e.isDead);
+}
+
+function destroyEnemy(container, enemy) {
+ container.removeChild(enemy.element);
+ enemy.isDead = true;
+}
+
+function createEnemyLaser(container, x, y) {
+ const element = document.createElement("img");
+ element.src = "img/laser-red-5.png";
+ element.className = "enemy-laser";
+ container.appendChild(element);
+ const laser = { x, y, element };
+ GAME_STATE.enemyLasers.push(laser);
+ setPosition(element, x, y);
+}
+
+function updateEnemyLasers(dt, container) {
+ const lasers = GAME_STATE.enemyLasers;
+ for (let i = 0; i < lasers.length; i++) {
+ const laser = lasers[i];
+ laser.y += dt * LASER_MAX_SPEED;
+ if (laser.y > GAME_HEIGHT) {
+ destroyLaser(container, laser);
+ }
+ setPosition(laser.element, laser.x, laser.y);
+ }
+ GAME_STATE.enemyLasers = GAME_STATE.enemyLasers.filter(e => !e.isDead);
+}
+
+
+function init() {
+ const container = document.querySelector(".game");
+ createPlayer(container);
+
+ const enemySpacing = (GAME_WIDTH - ENEMY_HORIZONTAL_PADDING * 2) / (ENEMIES_PER_ROW - 1);
+ for (let j = 0; j < 3; j++) {
+ const y = ENEMY_VERTICAL_PADDING + j * ENEMY_VERTICAL_SPACING;
+ for (let i = 0; i < ENEMIES_PER_ROW; i++) {
+ const x = i * enemySpacing + ENEMY_HORIZONTAL_PADDING;
+ createEnemy(container, x, y);
+ }
+ }
+}
+
+function update(e) {
+ const currentTime = Date.now();
+ const dt = (currentTime - GAME_STATE.lastTime) / 1000.0;
+
+ const container = document.querySelector(".game");
+ updatePlayer(dt, container);
+ updateLasers(dt, container);
+ updateEnemies(dt, container);
+ updateEnemyLasers(dt, container);
+
+ GAME_STATE.lastTime = currentTime;
+ window.requestAnimationFrame(update);
+}
+
+function onKeyDown(e) {
+ if (e.keyCode === KEY_CODE_LEFT) {
+ GAME_STATE.leftPressed = true;
+ } else if (e.keyCode === KEY_CODE_RIGHT) {
+ GAME_STATE.rightPressed = true;
+ } else if (e.keyCode === KEY_CODE_SPACE) {
+ GAME_STATE.spacePressed = true;
+ }
+}
+
+function onKeyUp(e) {
+ if (e.keyCode === KEY_CODE_LEFT) {
+ GAME_STATE.leftPressed = false;
+ } else if (e.keyCode === KEY_CODE_RIGHT) {
+ GAME_STATE.rightPressed = false;
+ } else if (e.keyCode === KEY_CODE_SPACE) {
+ GAME_STATE.spacePressed = false;
+ }
+}
+
+init();
+window.addEventListener("keydown", onKeyDown);
+window.addEventListener("keyup", onKeyUp);
+window.requestAnimationFrame(update);
diff --git a/Projects/space-game/step09/sound/sfx-laser1.ogg b/Projects/space-game/step09/sound/sfx-laser1.ogg
new file mode 100644
index 000000000..7a9a4d2f2
Binary files /dev/null and b/Projects/space-game/step09/sound/sfx-laser1.ogg differ
diff --git a/Projects/space-game/step09/sound/sfx-lose.ogg b/Projects/space-game/step09/sound/sfx-lose.ogg
new file mode 100644
index 000000000..496968f8d
Binary files /dev/null and b/Projects/space-game/step09/sound/sfx-lose.ogg differ
diff --git a/Projects/space-game/step10/README.md b/Projects/space-game/step10/README.md
new file mode 100644
index 000000000..9832729bb
--- /dev/null
+++ b/Projects/space-game/step10/README.md
@@ -0,0 +1,11 @@
+# Step 10 - Losing the game
+
+[Play this version](https://rawgit.com/HackYourFutureBelgium/JavaScript2/master/Projects/space-game/step10/index.html)
+
+To lose the game we need to get hit by an enemy laser. In `updateEnemyLasers` we check for each laser if their bounding client rect hits with the player's bounding client rect. If they do, we call the `destroyPlayer` function.
+
+In `destroyPlayer` we set `GAME_STATE.gameOver` to `true`. This allows us to stop the game in our `update` function; otherwise using the arrow keys would move a nonexistent player! We can "early out" our update function by using the `return` keyword. Note that this doesn't call `requestAnimationFrame`, so our game effectively stops updating here.
+
+The "game over" screen is a simple `div` that we make visible in our `destroyPlayer` function. The button does something sneaky: it calls `window.location.reload`, which reloads the page for us, effectively resetting the game.
+
+Also, we increase the enemy cooldown to make the game a bit easier :-)
diff --git a/Projects/space-game/step10/css/main.css b/Projects/space-game/step10/css/main.css
new file mode 100644
index 000000000..112ed105b
--- /dev/null
+++ b/Projects/space-game/step10/css/main.css
@@ -0,0 +1,135 @@
+html,
+body {
+ height: 100%;
+ overflow: hidden;
+}
+
+body {
+ margin: 0;
+ font: 16px sans-serif;
+}
+
+.wrap {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+}
+
+header {
+ text-align: center;
+ background: black;
+ color: #fff;
+ padding: 10px;
+}
+
+footer {
+ padding: 10px;
+ text-align: center;
+ font-size: 11px;
+ background: black;
+ color: white;
+}
+
+.game-wrapper {
+ flex: 1;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background: #222;
+}
+.game {
+ width: 800px;
+ height: 600px;
+ background: url(../img/background-blue.png);
+ animation: scroll-background 5s linear infinite;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+ position: relative;
+}
+
+@keyframes scroll-background {
+ from {
+ background-position-y: 0px;
+ }
+ to {
+ background-position-y: 256px;
+ }
+}
+
+.game .enemy {
+ position: absolute;
+ margin-left: -20px;
+ margin-top: -18px;
+ width: 40px;
+}
+
+.game .player {
+ position: absolute;
+ margin-left: -20px;
+ width: 40px;
+}
+
+.game .laser {
+ position: absolute;
+ margin-left: -2.5px;
+ height: 30px;
+}
+
+.game .enemy-laser {
+ position: absolute;
+ margin-left: -2.5px;
+ height: 30px;
+}
+
+.congratulations {
+ display: none;
+ position: absolute;
+ background: #c7a526;
+ color: white;
+ padding: 20px 50px;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+ border-radius: 10px;
+ text-align: center;
+ animation: pop-in 1s;
+}
+
+.game-over {
+ display: none;
+ position: absolute;
+ background: #6b1818;
+ color: white;
+ padding: 20px 50px;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+ border-radius: 10px;
+ text-align: center;
+ animation: pop-in 1s;
+}
+
+.btn {
+ border: 2px solid #36bbf5;
+ border-radius: 3px;
+ box-shadow: 0 2px rgba(0, 0, 0, 0.15);
+ background: linear-gradient(
+ to bottom,
+ #fff 0%,
+ #fff 49%,
+ #f5f5f5 50%,
+ #eee 100%
+ );
+ padding: 10px 40px;
+ font: 14px sans-serif;
+}
+@keyframes pop-in {
+ 0% {
+ opacity: 0;
+ transform: translate(0, -100px);
+ }
+ 10% {
+ opacity: 1;
+ }
+ 50% {
+ transform: translate(0, 30px);
+ }
+ 100% {
+ transform: translate(0, 0);
+ }
+}
diff --git a/Projects/space-game/step10/img/background-black.png b/Projects/space-game/step10/img/background-black.png
new file mode 100644
index 000000000..82ddab992
Binary files /dev/null and b/Projects/space-game/step10/img/background-black.png differ
diff --git a/Projects/space-game/step10/img/background-blue.png b/Projects/space-game/step10/img/background-blue.png
new file mode 100644
index 000000000..47642cd5d
Binary files /dev/null and b/Projects/space-game/step10/img/background-blue.png differ
diff --git a/Projects/space-game/step10/img/background-dark-purple.png b/Projects/space-game/step10/img/background-dark-purple.png
new file mode 100644
index 000000000..d9c3fd42d
Binary files /dev/null and b/Projects/space-game/step10/img/background-dark-purple.png differ
diff --git a/Projects/space-game/step10/img/background-purple.png b/Projects/space-game/step10/img/background-purple.png
new file mode 100644
index 000000000..5e8617769
Binary files /dev/null and b/Projects/space-game/step10/img/background-purple.png differ
diff --git a/Projects/space-game/step10/img/enemy-black-1.png b/Projects/space-game/step10/img/enemy-black-1.png
new file mode 100644
index 000000000..bc2fa4c1c
Binary files /dev/null and b/Projects/space-game/step10/img/enemy-black-1.png differ
diff --git a/Projects/space-game/step10/img/enemy-black-2.png b/Projects/space-game/step10/img/enemy-black-2.png
new file mode 100644
index 000000000..0e6b91c56
Binary files /dev/null and b/Projects/space-game/step10/img/enemy-black-2.png differ
diff --git a/Projects/space-game/step10/img/enemy-black-3.png b/Projects/space-game/step10/img/enemy-black-3.png
new file mode 100644
index 000000000..dafec1b16
Binary files /dev/null and b/Projects/space-game/step10/img/enemy-black-3.png differ
diff --git a/Projects/space-game/step10/img/enemy-black-4.png b/Projects/space-game/step10/img/enemy-black-4.png
new file mode 100644
index 000000000..a575c9d49
Binary files /dev/null and b/Projects/space-game/step10/img/enemy-black-4.png differ
diff --git a/Projects/space-game/step10/img/enemy-black-5.png b/Projects/space-game/step10/img/enemy-black-5.png
new file mode 100644
index 000000000..739dcf0fe
Binary files /dev/null and b/Projects/space-game/step10/img/enemy-black-5.png differ
diff --git a/Projects/space-game/step10/img/enemy-blue-1.png b/Projects/space-game/step10/img/enemy-blue-1.png
new file mode 100644
index 000000000..cedc0730d
Binary files /dev/null and b/Projects/space-game/step10/img/enemy-blue-1.png differ
diff --git a/Projects/space-game/step10/img/enemy-blue-2.png b/Projects/space-game/step10/img/enemy-blue-2.png
new file mode 100644
index 000000000..bf3bd0c9f
Binary files /dev/null and b/Projects/space-game/step10/img/enemy-blue-2.png differ
diff --git a/Projects/space-game/step10/img/enemy-blue-3.png b/Projects/space-game/step10/img/enemy-blue-3.png
new file mode 100644
index 000000000..9a63d03b0
Binary files /dev/null and b/Projects/space-game/step10/img/enemy-blue-3.png differ
diff --git a/Projects/space-game/step10/img/enemy-blue-4.png b/Projects/space-game/step10/img/enemy-blue-4.png
new file mode 100644
index 000000000..d5670a3a5
Binary files /dev/null and b/Projects/space-game/step10/img/enemy-blue-4.png differ
diff --git a/Projects/space-game/step10/img/enemy-blue-5.png b/Projects/space-game/step10/img/enemy-blue-5.png
new file mode 100644
index 000000000..e740509f7
Binary files /dev/null and b/Projects/space-game/step10/img/enemy-blue-5.png differ
diff --git a/Projects/space-game/step10/img/enemy-green-1.png b/Projects/space-game/step10/img/enemy-green-1.png
new file mode 100644
index 000000000..064e29037
Binary files /dev/null and b/Projects/space-game/step10/img/enemy-green-1.png differ
diff --git a/Projects/space-game/step10/img/enemy-green-2.png b/Projects/space-game/step10/img/enemy-green-2.png
new file mode 100644
index 000000000..5189d2459
Binary files /dev/null and b/Projects/space-game/step10/img/enemy-green-2.png differ
diff --git a/Projects/space-game/step10/img/enemy-green-3.png b/Projects/space-game/step10/img/enemy-green-3.png
new file mode 100644
index 000000000..74e2bca68
Binary files /dev/null and b/Projects/space-game/step10/img/enemy-green-3.png differ
diff --git a/Projects/space-game/step10/img/enemy-green-4.png b/Projects/space-game/step10/img/enemy-green-4.png
new file mode 100644
index 000000000..112e299f8
Binary files /dev/null and b/Projects/space-game/step10/img/enemy-green-4.png differ
diff --git a/Projects/space-game/step10/img/enemy-green-5.png b/Projects/space-game/step10/img/enemy-green-5.png
new file mode 100644
index 000000000..59382705b
Binary files /dev/null and b/Projects/space-game/step10/img/enemy-green-5.png differ
diff --git a/Projects/space-game/step10/img/enemy-red-1.png b/Projects/space-game/step10/img/enemy-red-1.png
new file mode 100644
index 000000000..fb0c0a2ca
Binary files /dev/null and b/Projects/space-game/step10/img/enemy-red-1.png differ
diff --git a/Projects/space-game/step10/img/enemy-red-2.png b/Projects/space-game/step10/img/enemy-red-2.png
new file mode 100644
index 000000000..3ee96c571
Binary files /dev/null and b/Projects/space-game/step10/img/enemy-red-2.png differ
diff --git a/Projects/space-game/step10/img/enemy-red-3.png b/Projects/space-game/step10/img/enemy-red-3.png
new file mode 100644
index 000000000..bc8eacd99
Binary files /dev/null and b/Projects/space-game/step10/img/enemy-red-3.png differ
diff --git a/Projects/space-game/step10/img/enemy-red-4.png b/Projects/space-game/step10/img/enemy-red-4.png
new file mode 100644
index 000000000..a3216d4bf
Binary files /dev/null and b/Projects/space-game/step10/img/enemy-red-4.png differ
diff --git a/Projects/space-game/step10/img/enemy-red-5.png b/Projects/space-game/step10/img/enemy-red-5.png
new file mode 100644
index 000000000..645cdf3c8
Binary files /dev/null and b/Projects/space-game/step10/img/enemy-red-5.png differ
diff --git a/Projects/space-game/step10/img/laser-blue-1.png b/Projects/space-game/step10/img/laser-blue-1.png
new file mode 100644
index 000000000..b76aaf7a0
Binary files /dev/null and b/Projects/space-game/step10/img/laser-blue-1.png differ
diff --git a/Projects/space-game/step10/img/laser-blue-10.png b/Projects/space-game/step10/img/laser-blue-10.png
new file mode 100644
index 000000000..dd6b766a4
Binary files /dev/null and b/Projects/space-game/step10/img/laser-blue-10.png differ
diff --git a/Projects/space-game/step10/img/laser-blue-11.png b/Projects/space-game/step10/img/laser-blue-11.png
new file mode 100644
index 000000000..c06234958
Binary files /dev/null and b/Projects/space-game/step10/img/laser-blue-11.png differ
diff --git a/Projects/space-game/step10/img/laser-blue-12.png b/Projects/space-game/step10/img/laser-blue-12.png
new file mode 100644
index 000000000..48b6103e1
Binary files /dev/null and b/Projects/space-game/step10/img/laser-blue-12.png differ
diff --git a/Projects/space-game/step10/img/laser-blue-13.png b/Projects/space-game/step10/img/laser-blue-13.png
new file mode 100644
index 000000000..c5ec6a329
Binary files /dev/null and b/Projects/space-game/step10/img/laser-blue-13.png differ
diff --git a/Projects/space-game/step10/img/laser-blue-14.png b/Projects/space-game/step10/img/laser-blue-14.png
new file mode 100644
index 000000000..254601e5f
Binary files /dev/null and b/Projects/space-game/step10/img/laser-blue-14.png differ
diff --git a/Projects/space-game/step10/img/laser-blue-15.png b/Projects/space-game/step10/img/laser-blue-15.png
new file mode 100644
index 000000000..1ea1966d5
Binary files /dev/null and b/Projects/space-game/step10/img/laser-blue-15.png differ
diff --git a/Projects/space-game/step10/img/laser-blue-16.png b/Projects/space-game/step10/img/laser-blue-16.png
new file mode 100644
index 000000000..1def98fb6
Binary files /dev/null and b/Projects/space-game/step10/img/laser-blue-16.png differ
diff --git a/Projects/space-game/step10/img/laser-blue-2.png b/Projects/space-game/step10/img/laser-blue-2.png
new file mode 100644
index 000000000..3f923a394
Binary files /dev/null and b/Projects/space-game/step10/img/laser-blue-2.png differ
diff --git a/Projects/space-game/step10/img/laser-blue-3.png b/Projects/space-game/step10/img/laser-blue-3.png
new file mode 100644
index 000000000..a16e9a82e
Binary files /dev/null and b/Projects/space-game/step10/img/laser-blue-3.png differ
diff --git a/Projects/space-game/step10/img/laser-blue-4.png b/Projects/space-game/step10/img/laser-blue-4.png
new file mode 100644
index 000000000..6f3b9103a
Binary files /dev/null and b/Projects/space-game/step10/img/laser-blue-4.png differ
diff --git a/Projects/space-game/step10/img/laser-blue-5.png b/Projects/space-game/step10/img/laser-blue-5.png
new file mode 100644
index 000000000..85cff7d5d
Binary files /dev/null and b/Projects/space-game/step10/img/laser-blue-5.png differ
diff --git a/Projects/space-game/step10/img/laser-blue-6.png b/Projects/space-game/step10/img/laser-blue-6.png
new file mode 100644
index 000000000..a621875c5
Binary files /dev/null and b/Projects/space-game/step10/img/laser-blue-6.png differ
diff --git a/Projects/space-game/step10/img/laser-blue-7.png b/Projects/space-game/step10/img/laser-blue-7.png
new file mode 100644
index 000000000..e1848bfc3
Binary files /dev/null and b/Projects/space-game/step10/img/laser-blue-7.png differ
diff --git a/Projects/space-game/step10/img/laser-blue-8.png b/Projects/space-game/step10/img/laser-blue-8.png
new file mode 100644
index 000000000..7a463965c
Binary files /dev/null and b/Projects/space-game/step10/img/laser-blue-8.png differ
diff --git a/Projects/space-game/step10/img/laser-blue-9.png b/Projects/space-game/step10/img/laser-blue-9.png
new file mode 100644
index 000000000..35624e649
Binary files /dev/null and b/Projects/space-game/step10/img/laser-blue-9.png differ
diff --git a/Projects/space-game/step10/img/laser-green-1.png b/Projects/space-game/step10/img/laser-green-1.png
new file mode 100644
index 000000000..c9982b1ed
Binary files /dev/null and b/Projects/space-game/step10/img/laser-green-1.png differ
diff --git a/Projects/space-game/step10/img/laser-green-10.png b/Projects/space-game/step10/img/laser-green-10.png
new file mode 100644
index 000000000..9c7974c69
Binary files /dev/null and b/Projects/space-game/step10/img/laser-green-10.png differ
diff --git a/Projects/space-game/step10/img/laser-green-11.png b/Projects/space-game/step10/img/laser-green-11.png
new file mode 100644
index 000000000..100cddbd4
Binary files /dev/null and b/Projects/space-game/step10/img/laser-green-11.png differ
diff --git a/Projects/space-game/step10/img/laser-green-12.png b/Projects/space-game/step10/img/laser-green-12.png
new file mode 100644
index 000000000..b05a72fa6
Binary files /dev/null and b/Projects/space-game/step10/img/laser-green-12.png differ
diff --git a/Projects/space-game/step10/img/laser-green-13.png b/Projects/space-game/step10/img/laser-green-13.png
new file mode 100644
index 000000000..92cc35334
Binary files /dev/null and b/Projects/space-game/step10/img/laser-green-13.png differ
diff --git a/Projects/space-game/step10/img/laser-green-14.png b/Projects/space-game/step10/img/laser-green-14.png
new file mode 100644
index 000000000..7abd3b29b
Binary files /dev/null and b/Projects/space-game/step10/img/laser-green-14.png differ
diff --git a/Projects/space-game/step10/img/laser-green-15.png b/Projects/space-game/step10/img/laser-green-15.png
new file mode 100644
index 000000000..97a44051d
Binary files /dev/null and b/Projects/space-game/step10/img/laser-green-15.png differ
diff --git a/Projects/space-game/step10/img/laser-green-16.png b/Projects/space-game/step10/img/laser-green-16.png
new file mode 100644
index 000000000..b73c12fb9
Binary files /dev/null and b/Projects/space-game/step10/img/laser-green-16.png differ
diff --git a/Projects/space-game/step10/img/laser-green-2.png b/Projects/space-game/step10/img/laser-green-2.png
new file mode 100644
index 000000000..5cd78303e
Binary files /dev/null and b/Projects/space-game/step10/img/laser-green-2.png differ
diff --git a/Projects/space-game/step10/img/laser-green-3.png b/Projects/space-game/step10/img/laser-green-3.png
new file mode 100644
index 000000000..d658547bc
Binary files /dev/null and b/Projects/space-game/step10/img/laser-green-3.png differ
diff --git a/Projects/space-game/step10/img/laser-green-4.png b/Projects/space-game/step10/img/laser-green-4.png
new file mode 100644
index 000000000..61b04fb71
Binary files /dev/null and b/Projects/space-game/step10/img/laser-green-4.png differ
diff --git a/Projects/space-game/step10/img/laser-green-5.png b/Projects/space-game/step10/img/laser-green-5.png
new file mode 100644
index 000000000..98ae6bee2
Binary files /dev/null and b/Projects/space-game/step10/img/laser-green-5.png differ
diff --git a/Projects/space-game/step10/img/laser-green-6.png b/Projects/space-game/step10/img/laser-green-6.png
new file mode 100644
index 000000000..36dd94d46
Binary files /dev/null and b/Projects/space-game/step10/img/laser-green-6.png differ
diff --git a/Projects/space-game/step10/img/laser-green-7.png b/Projects/space-game/step10/img/laser-green-7.png
new file mode 100644
index 000000000..0ae7c2d0c
Binary files /dev/null and b/Projects/space-game/step10/img/laser-green-7.png differ
diff --git a/Projects/space-game/step10/img/laser-green-8.png b/Projects/space-game/step10/img/laser-green-8.png
new file mode 100644
index 000000000..0ff1d80f9
Binary files /dev/null and b/Projects/space-game/step10/img/laser-green-8.png differ
diff --git a/Projects/space-game/step10/img/laser-green-9.png b/Projects/space-game/step10/img/laser-green-9.png
new file mode 100644
index 000000000..932056b9f
Binary files /dev/null and b/Projects/space-game/step10/img/laser-green-9.png differ
diff --git a/Projects/space-game/step10/img/laser-red-1.png b/Projects/space-game/step10/img/laser-red-1.png
new file mode 100644
index 000000000..5e467b65b
Binary files /dev/null and b/Projects/space-game/step10/img/laser-red-1.png differ
diff --git a/Projects/space-game/step10/img/laser-red-10.png b/Projects/space-game/step10/img/laser-red-10.png
new file mode 100644
index 000000000..0f85ba1b0
Binary files /dev/null and b/Projects/space-game/step10/img/laser-red-10.png differ
diff --git a/Projects/space-game/step10/img/laser-red-11.png b/Projects/space-game/step10/img/laser-red-11.png
new file mode 100644
index 000000000..95e9c0a14
Binary files /dev/null and b/Projects/space-game/step10/img/laser-red-11.png differ
diff --git a/Projects/space-game/step10/img/laser-red-12.png b/Projects/space-game/step10/img/laser-red-12.png
new file mode 100644
index 000000000..9f56da0ce
Binary files /dev/null and b/Projects/space-game/step10/img/laser-red-12.png differ
diff --git a/Projects/space-game/step10/img/laser-red-13.png b/Projects/space-game/step10/img/laser-red-13.png
new file mode 100644
index 000000000..292bcc5d5
Binary files /dev/null and b/Projects/space-game/step10/img/laser-red-13.png differ
diff --git a/Projects/space-game/step10/img/laser-red-14.png b/Projects/space-game/step10/img/laser-red-14.png
new file mode 100644
index 000000000..eaf8346de
Binary files /dev/null and b/Projects/space-game/step10/img/laser-red-14.png differ
diff --git a/Projects/space-game/step10/img/laser-red-15.png b/Projects/space-game/step10/img/laser-red-15.png
new file mode 100644
index 000000000..7d27c2a94
Binary files /dev/null and b/Projects/space-game/step10/img/laser-red-15.png differ
diff --git a/Projects/space-game/step10/img/laser-red-16.png b/Projects/space-game/step10/img/laser-red-16.png
new file mode 100644
index 000000000..b12fcd5d4
Binary files /dev/null and b/Projects/space-game/step10/img/laser-red-16.png differ
diff --git a/Projects/space-game/step10/img/laser-red-2.png b/Projects/space-game/step10/img/laser-red-2.png
new file mode 100644
index 000000000..1127fffb6
Binary files /dev/null and b/Projects/space-game/step10/img/laser-red-2.png differ
diff --git a/Projects/space-game/step10/img/laser-red-3.png b/Projects/space-game/step10/img/laser-red-3.png
new file mode 100644
index 000000000..bc1bb8730
Binary files /dev/null and b/Projects/space-game/step10/img/laser-red-3.png differ
diff --git a/Projects/space-game/step10/img/laser-red-4.png b/Projects/space-game/step10/img/laser-red-4.png
new file mode 100644
index 000000000..fc3655b0f
Binary files /dev/null and b/Projects/space-game/step10/img/laser-red-4.png differ
diff --git a/Projects/space-game/step10/img/laser-red-5.png b/Projects/space-game/step10/img/laser-red-5.png
new file mode 100644
index 000000000..46db2d77f
Binary files /dev/null and b/Projects/space-game/step10/img/laser-red-5.png differ
diff --git a/Projects/space-game/step10/img/laser-red-6.png b/Projects/space-game/step10/img/laser-red-6.png
new file mode 100644
index 000000000..33614ae1a
Binary files /dev/null and b/Projects/space-game/step10/img/laser-red-6.png differ
diff --git a/Projects/space-game/step10/img/laser-red-7.png b/Projects/space-game/step10/img/laser-red-7.png
new file mode 100644
index 000000000..23bab346f
Binary files /dev/null and b/Projects/space-game/step10/img/laser-red-7.png differ
diff --git a/Projects/space-game/step10/img/laser-red-8.png b/Projects/space-game/step10/img/laser-red-8.png
new file mode 100644
index 000000000..5a2cce30e
Binary files /dev/null and b/Projects/space-game/step10/img/laser-red-8.png differ
diff --git a/Projects/space-game/step10/img/laser-red-9.png b/Projects/space-game/step10/img/laser-red-9.png
new file mode 100644
index 000000000..7dc31dcc2
Binary files /dev/null and b/Projects/space-game/step10/img/laser-red-9.png differ
diff --git a/Projects/space-game/step10/img/player-blue-1.png b/Projects/space-game/step10/img/player-blue-1.png
new file mode 100644
index 000000000..cecbbed97
Binary files /dev/null and b/Projects/space-game/step10/img/player-blue-1.png differ
diff --git a/Projects/space-game/step10/img/player-blue-2.png b/Projects/space-game/step10/img/player-blue-2.png
new file mode 100644
index 000000000..e277114fd
Binary files /dev/null and b/Projects/space-game/step10/img/player-blue-2.png differ
diff --git a/Projects/space-game/step10/img/player-blue-3.png b/Projects/space-game/step10/img/player-blue-3.png
new file mode 100644
index 000000000..f34faf066
Binary files /dev/null and b/Projects/space-game/step10/img/player-blue-3.png differ
diff --git a/Projects/space-game/step10/img/player-green-1.png b/Projects/space-game/step10/img/player-green-1.png
new file mode 100644
index 000000000..2eb6f9c06
Binary files /dev/null and b/Projects/space-game/step10/img/player-green-1.png differ
diff --git a/Projects/space-game/step10/img/player-green-2.png b/Projects/space-game/step10/img/player-green-2.png
new file mode 100644
index 000000000..72e18c7ff
Binary files /dev/null and b/Projects/space-game/step10/img/player-green-2.png differ
diff --git a/Projects/space-game/step10/img/player-green-3.png b/Projects/space-game/step10/img/player-green-3.png
new file mode 100644
index 000000000..b853be42a
Binary files /dev/null and b/Projects/space-game/step10/img/player-green-3.png differ
diff --git a/Projects/space-game/step10/img/player-orange-1.png b/Projects/space-game/step10/img/player-orange-1.png
new file mode 100644
index 000000000..3902283d4
Binary files /dev/null and b/Projects/space-game/step10/img/player-orange-1.png differ
diff --git a/Projects/space-game/step10/img/player-orange-2.png b/Projects/space-game/step10/img/player-orange-2.png
new file mode 100644
index 000000000..82ddc8068
Binary files /dev/null and b/Projects/space-game/step10/img/player-orange-2.png differ
diff --git a/Projects/space-game/step10/img/player-orange-3.png b/Projects/space-game/step10/img/player-orange-3.png
new file mode 100644
index 000000000..0b6b7ec68
Binary files /dev/null and b/Projects/space-game/step10/img/player-orange-3.png differ
diff --git a/Projects/space-game/step10/img/player-red-1.png b/Projects/space-game/step10/img/player-red-1.png
new file mode 100644
index 000000000..3695e09e2
Binary files /dev/null and b/Projects/space-game/step10/img/player-red-1.png differ
diff --git a/Projects/space-game/step10/img/player-red-2.png b/Projects/space-game/step10/img/player-red-2.png
new file mode 100644
index 000000000..8213e978d
Binary files /dev/null and b/Projects/space-game/step10/img/player-red-2.png differ
diff --git a/Projects/space-game/step10/img/player-red-3.png b/Projects/space-game/step10/img/player-red-3.png
new file mode 100644
index 000000000..796e81d71
Binary files /dev/null and b/Projects/space-game/step10/img/player-red-3.png differ
diff --git a/Projects/space-game/step10/index.html b/Projects/space-game/step10/index.html
new file mode 100644
index 000000000..1ebb1e695
--- /dev/null
+++ b/Projects/space-game/step10/index.html
@@ -0,0 +1,32 @@
+
+
+
+
+
+
+ Space Game
+
+
+
+
+
+ Space Game
+
+
+
+
Congratulations!
+
You won the game
+
+
+
+
GAME OVER
+
You lost the game
+
+
+
+
+
+
+
+
+
diff --git a/Projects/space-game/step10/js/game.js b/Projects/space-game/step10/js/game.js
new file mode 100644
index 000000000..04df48f04
--- /dev/null
+++ b/Projects/space-game/step10/js/game.js
@@ -0,0 +1,275 @@
+const KEY_CODE_LEFT = 37;
+const KEY_CODE_RIGHT = 39;
+const KEY_CODE_SPACE = 32;
+
+const GAME_WIDTH = 800;
+const GAME_HEIGHT = 600;
+
+const PLAYER_WIDTH = 20;
+const PLAYER_MAX_SPEED = 600.0;
+const LASER_MAX_SPEED = 300.0;
+const LASER_COOLDOWN = 0.5;
+
+const ENEMIES_PER_ROW = 10;
+const ENEMY_HORIZONTAL_PADDING = 80;
+const ENEMY_VERTICAL_PADDING = 70;
+const ENEMY_VERTICAL_SPACING = 80;
+const ENEMY_COOLDOWN = 5.0;
+
+const GAME_STATE = {
+ lastTime: Date.now(),
+ leftPressed: false,
+ rightPressed: false,
+ spacePressed: false,
+ playerX: 0,
+ playerY: 0,
+ playerCooldown: 0,
+ lasers: [],
+ enemies: [],
+ enemyLasers: [],
+ gameOver: false
+};
+
+function rectsIntersect(r1, r2) {
+ return !(
+ r2.left > r1.right ||
+ r2.right < r1.left ||
+ r2.top > r1.bottom ||
+ r2.bottom < r1.top
+ );
+}
+
+function setPosition(el, x, y) {
+ el.style.transform = `translate(${x}px, ${y}px)`;
+}
+
+function clamp(v, min, max) {
+ if (v < min) {
+ return min;
+ } else if (v > max) {
+ return max;
+ } else {
+ return v;
+ }
+}
+
+function rand(min, max) {
+ if (min === undefined) min = 0;
+ if (max === undefined) max = 1;
+ return min + Math.random() * (max - min);
+}
+
+function createPlayer(container) {
+ GAME_STATE.playerX = GAME_WIDTH / 2;
+ GAME_STATE.playerY = GAME_HEIGHT - 50;
+ const player = document.createElement("img");
+ player.src = "img/player-blue-1.png";
+ player.className = "player";
+ container.appendChild(player);
+ setPosition(player, GAME_STATE.playerX, GAME_STATE.playerY);
+}
+
+function destroyPlayer(container, player) {
+ container.removeChild(player);
+ GAME_STATE.gameOver = true;
+ const audio = new Audio("sound/sfx-lose.ogg");
+ audio.play();
+}
+
+function updatePlayer(dt, container) {
+ if (GAME_STATE.leftPressed) {
+ GAME_STATE.playerX -= dt * PLAYER_MAX_SPEED;
+ }
+ if (GAME_STATE.rightPressed) {
+ GAME_STATE.playerX += dt * PLAYER_MAX_SPEED;
+ }
+
+ GAME_STATE.playerX = clamp(
+ GAME_STATE.playerX,
+ PLAYER_WIDTH,
+ GAME_WIDTH - PLAYER_WIDTH
+ );
+
+ if (GAME_STATE.spacePressed && GAME_STATE.playerCooldown <= 0) {
+ createLaser(container, GAME_STATE.playerX, GAME_STATE.playerY);
+ GAME_STATE.playerCooldown = LASER_COOLDOWN;
+ }
+ if (GAME_STATE.playerCooldown > 0) {
+ GAME_STATE.playerCooldown -= dt;
+ }
+
+ const player = document.querySelector(".player");
+ setPosition(player, GAME_STATE.playerX, GAME_STATE.playerY);
+}
+
+function createLaser(container, x, y) {
+ const element = document.createElement("img");
+ element.src = "img/laser-blue-1.png";
+ element.className = "laser";
+ container.appendChild(element);
+ const laser = { x, y, element };
+ GAME_STATE.lasers.push(laser);
+ const audio = new Audio("sound/sfx-laser1.ogg");
+ audio.play();
+ setPosition(element, x, y);
+}
+
+function updateLasers(dt, container) {
+ const lasers = GAME_STATE.lasers;
+ for (let i = 0; i < lasers.length; i++) {
+ const laser = lasers[i];
+ laser.y -= dt * LASER_MAX_SPEED;
+ if (laser.y < 0) {
+ destroyLaser(container, laser);
+ }
+ setPosition(laser.element, laser.x, laser.y);
+ const r1 = laser.element.getBoundingClientRect();
+ const enemies = GAME_STATE.enemies;
+ for (let j = 0; j < enemies.length; j++) {
+ const enemy = enemies[j];
+ if (enemy.isDead) continue;
+ const r2 = enemy.element.getBoundingClientRect();
+ if (rectsIntersect(r1, r2)) {
+ // Enemy was hit
+ destroyEnemy(container, enemy);
+ destroyLaser(container, laser);
+ break;
+ }
+ }
+ }
+ GAME_STATE.lasers = GAME_STATE.lasers.filter(e => !e.isDead);
+}
+
+function destroyLaser(container, laser) {
+ container.removeChild(laser.element);
+ laser.isDead = true;
+}
+
+function createEnemy(container, x, y) {
+ const element = document.createElement("img");
+ element.src = "img/enemy-blue-1.png";
+ element.className = "enemy";
+ container.appendChild(element);
+ const enemy = {
+ x,
+ y,
+ cooldown: rand(0.5, ENEMY_COOLDOWN),
+ element
+ };
+ GAME_STATE.enemies.push(enemy);
+ setPosition(element, x, y);
+}
+
+function updateEnemies(dt, container) {
+ const dx = Math.sin(GAME_STATE.lastTime / 1000.0) * 50;
+ const dy = Math.cos(GAME_STATE.lastTime / 1000.0) * 10;
+
+ const enemies = GAME_STATE.enemies;
+ for (let i = 0; i < enemies.length; i++) {
+ const enemy = enemies[i];
+ const x = enemy.x + dx;
+ const y = enemy.y + dy;
+ setPosition(enemy.element, x, y);
+ enemy.cooldown -= dt;
+ if (enemy.cooldown <= 0) {
+ createEnemyLaser(container, x, y);
+ enemy.cooldown = ENEMY_COOLDOWN;
+ }
+ }
+ GAME_STATE.enemies = GAME_STATE.enemies.filter(e => !e.isDead);
+}
+
+function destroyEnemy(container, enemy) {
+ container.removeChild(enemy.element);
+ enemy.isDead = true;
+}
+
+function createEnemyLaser(container, x, y) {
+ const element = document.createElement("img");
+ element.src = "img/laser-red-5.png";
+ element.className = "enemy-laser";
+ container.appendChild(element);
+ const laser = { x, y, element };
+ GAME_STATE.enemyLasers.push(laser);
+ setPosition(element, x, y);
+}
+
+function updateEnemyLasers(dt, container) {
+ const lasers = GAME_STATE.enemyLasers;
+ for (let i = 0; i < lasers.length; i++) {
+ const laser = lasers[i];
+ laser.y += dt * LASER_MAX_SPEED;
+ if (laser.y > GAME_HEIGHT) {
+ destroyLaser(container, laser);
+ }
+ setPosition(laser.element, laser.x, laser.y);
+ const r1 = laser.element.getBoundingClientRect();
+ const player = document.querySelector(".player");
+ const r2 = player.getBoundingClientRect();
+ if (rectsIntersect(r1, r2)) {
+ // Player was hit
+ destroyPlayer(container, player);
+ break;
+ }
+ }
+ GAME_STATE.enemyLasers = GAME_STATE.enemyLasers.filter(e => !e.isDead);
+}
+
+
+function init() {
+ const container = document.querySelector(".game");
+ createPlayer(container);
+
+ const enemySpacing = (GAME_WIDTH - ENEMY_HORIZONTAL_PADDING * 2) / (ENEMIES_PER_ROW - 1);
+ for (let j = 0; j < 3; j++) {
+ const y = ENEMY_VERTICAL_PADDING + j * ENEMY_VERTICAL_SPACING;
+ for (let i = 0; i < ENEMIES_PER_ROW; i++) {
+ const x = i * enemySpacing + ENEMY_HORIZONTAL_PADDING;
+ createEnemy(container, x, y);
+ }
+ }
+}
+
+function update(e) {
+ const currentTime = Date.now();
+ const dt = (currentTime - GAME_STATE.lastTime) / 1000.0;
+
+ if (GAME_STATE.gameOver) {
+ document.querySelector(".game-over").style.display = "block";
+ return;
+ }
+
+ const container = document.querySelector(".game");
+ updatePlayer(dt, container);
+ updateLasers(dt, container);
+ updateEnemies(dt, container);
+ updateEnemyLasers(dt, container);
+
+ GAME_STATE.lastTime = currentTime;
+ window.requestAnimationFrame(update);
+}
+
+function onKeyDown(e) {
+ if (e.keyCode === KEY_CODE_LEFT) {
+ GAME_STATE.leftPressed = true;
+ } else if (e.keyCode === KEY_CODE_RIGHT) {
+ GAME_STATE.rightPressed = true;
+ } else if (e.keyCode === KEY_CODE_SPACE) {
+ GAME_STATE.spacePressed = true;
+ }
+}
+
+function onKeyUp(e) {
+ if (e.keyCode === KEY_CODE_LEFT) {
+ GAME_STATE.leftPressed = false;
+ } else if (e.keyCode === KEY_CODE_RIGHT) {
+ GAME_STATE.rightPressed = false;
+ } else if (e.keyCode === KEY_CODE_SPACE) {
+ GAME_STATE.spacePressed = false;
+ }
+}
+
+init();
+window.addEventListener("keydown", onKeyDown);
+window.addEventListener("keyup", onKeyUp);
+window.requestAnimationFrame(update);
diff --git a/Projects/space-game/step10/sound/sfx-laser1.ogg b/Projects/space-game/step10/sound/sfx-laser1.ogg
new file mode 100644
index 000000000..7a9a4d2f2
Binary files /dev/null and b/Projects/space-game/step10/sound/sfx-laser1.ogg differ
diff --git a/Projects/space-game/step10/sound/sfx-lose.ogg b/Projects/space-game/step10/sound/sfx-lose.ogg
new file mode 100644
index 000000000..496968f8d
Binary files /dev/null and b/Projects/space-game/step10/sound/sfx-lose.ogg differ
diff --git a/Projects/space-game/step11/README.md b/Projects/space-game/step11/README.md
new file mode 100644
index 000000000..aafcae786
--- /dev/null
+++ b/Projects/space-game/step11/README.md
@@ -0,0 +1,17 @@
+# Step 11 - Winning the game
+
+[Play this version](https://rawgit.com/HackYourFutureBelgium/JavaScript2/master/Projects/space-game/step11/index.html)
+
+We win the game when there are no enemies left. We encode this "win state" in a function:
+
+```
+function playerHasWon() {
+ return GAME_STATE.enemies.length === 0;
+}
+```
+
+Every frame, we check this function. If it returns true, we do the same as in our game over condition: we show the appropriate dialog and return, thereby "quitting" the game.
+
+We could be more efficient and only check this function if we destroy an enemy, but that's left as an exercise for the reader :-)
+
+That's it, you've created a very basic version of Space Invaders! Give yourself a pat on the back, you deserve it!
diff --git a/Projects/space-game/step11/css/main.css b/Projects/space-game/step11/css/main.css
new file mode 100644
index 000000000..112ed105b
--- /dev/null
+++ b/Projects/space-game/step11/css/main.css
@@ -0,0 +1,135 @@
+html,
+body {
+ height: 100%;
+ overflow: hidden;
+}
+
+body {
+ margin: 0;
+ font: 16px sans-serif;
+}
+
+.wrap {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+}
+
+header {
+ text-align: center;
+ background: black;
+ color: #fff;
+ padding: 10px;
+}
+
+footer {
+ padding: 10px;
+ text-align: center;
+ font-size: 11px;
+ background: black;
+ color: white;
+}
+
+.game-wrapper {
+ flex: 1;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background: #222;
+}
+.game {
+ width: 800px;
+ height: 600px;
+ background: url(../img/background-blue.png);
+ animation: scroll-background 5s linear infinite;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+ position: relative;
+}
+
+@keyframes scroll-background {
+ from {
+ background-position-y: 0px;
+ }
+ to {
+ background-position-y: 256px;
+ }
+}
+
+.game .enemy {
+ position: absolute;
+ margin-left: -20px;
+ margin-top: -18px;
+ width: 40px;
+}
+
+.game .player {
+ position: absolute;
+ margin-left: -20px;
+ width: 40px;
+}
+
+.game .laser {
+ position: absolute;
+ margin-left: -2.5px;
+ height: 30px;
+}
+
+.game .enemy-laser {
+ position: absolute;
+ margin-left: -2.5px;
+ height: 30px;
+}
+
+.congratulations {
+ display: none;
+ position: absolute;
+ background: #c7a526;
+ color: white;
+ padding: 20px 50px;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+ border-radius: 10px;
+ text-align: center;
+ animation: pop-in 1s;
+}
+
+.game-over {
+ display: none;
+ position: absolute;
+ background: #6b1818;
+ color: white;
+ padding: 20px 50px;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+ border-radius: 10px;
+ text-align: center;
+ animation: pop-in 1s;
+}
+
+.btn {
+ border: 2px solid #36bbf5;
+ border-radius: 3px;
+ box-shadow: 0 2px rgba(0, 0, 0, 0.15);
+ background: linear-gradient(
+ to bottom,
+ #fff 0%,
+ #fff 49%,
+ #f5f5f5 50%,
+ #eee 100%
+ );
+ padding: 10px 40px;
+ font: 14px sans-serif;
+}
+@keyframes pop-in {
+ 0% {
+ opacity: 0;
+ transform: translate(0, -100px);
+ }
+ 10% {
+ opacity: 1;
+ }
+ 50% {
+ transform: translate(0, 30px);
+ }
+ 100% {
+ transform: translate(0, 0);
+ }
+}
diff --git a/Projects/space-game/step11/img/background-black.png b/Projects/space-game/step11/img/background-black.png
new file mode 100644
index 000000000..82ddab992
Binary files /dev/null and b/Projects/space-game/step11/img/background-black.png differ
diff --git a/Projects/space-game/step11/img/background-blue.png b/Projects/space-game/step11/img/background-blue.png
new file mode 100644
index 000000000..47642cd5d
Binary files /dev/null and b/Projects/space-game/step11/img/background-blue.png differ
diff --git a/Projects/space-game/step11/img/background-dark-purple.png b/Projects/space-game/step11/img/background-dark-purple.png
new file mode 100644
index 000000000..d9c3fd42d
Binary files /dev/null and b/Projects/space-game/step11/img/background-dark-purple.png differ
diff --git a/Projects/space-game/step11/img/background-purple.png b/Projects/space-game/step11/img/background-purple.png
new file mode 100644
index 000000000..5e8617769
Binary files /dev/null and b/Projects/space-game/step11/img/background-purple.png differ
diff --git a/Projects/space-game/step11/img/enemy-black-1.png b/Projects/space-game/step11/img/enemy-black-1.png
new file mode 100644
index 000000000..bc2fa4c1c
Binary files /dev/null and b/Projects/space-game/step11/img/enemy-black-1.png differ
diff --git a/Projects/space-game/step11/img/enemy-black-2.png b/Projects/space-game/step11/img/enemy-black-2.png
new file mode 100644
index 000000000..0e6b91c56
Binary files /dev/null and b/Projects/space-game/step11/img/enemy-black-2.png differ
diff --git a/Projects/space-game/step11/img/enemy-black-3.png b/Projects/space-game/step11/img/enemy-black-3.png
new file mode 100644
index 000000000..dafec1b16
Binary files /dev/null and b/Projects/space-game/step11/img/enemy-black-3.png differ
diff --git a/Projects/space-game/step11/img/enemy-black-4.png b/Projects/space-game/step11/img/enemy-black-4.png
new file mode 100644
index 000000000..a575c9d49
Binary files /dev/null and b/Projects/space-game/step11/img/enemy-black-4.png differ
diff --git a/Projects/space-game/step11/img/enemy-black-5.png b/Projects/space-game/step11/img/enemy-black-5.png
new file mode 100644
index 000000000..739dcf0fe
Binary files /dev/null and b/Projects/space-game/step11/img/enemy-black-5.png differ
diff --git a/Projects/space-game/step11/img/enemy-blue-1.png b/Projects/space-game/step11/img/enemy-blue-1.png
new file mode 100644
index 000000000..cedc0730d
Binary files /dev/null and b/Projects/space-game/step11/img/enemy-blue-1.png differ
diff --git a/Projects/space-game/step11/img/enemy-blue-2.png b/Projects/space-game/step11/img/enemy-blue-2.png
new file mode 100644
index 000000000..bf3bd0c9f
Binary files /dev/null and b/Projects/space-game/step11/img/enemy-blue-2.png differ
diff --git a/Projects/space-game/step11/img/enemy-blue-3.png b/Projects/space-game/step11/img/enemy-blue-3.png
new file mode 100644
index 000000000..9a63d03b0
Binary files /dev/null and b/Projects/space-game/step11/img/enemy-blue-3.png differ
diff --git a/Projects/space-game/step11/img/enemy-blue-4.png b/Projects/space-game/step11/img/enemy-blue-4.png
new file mode 100644
index 000000000..d5670a3a5
Binary files /dev/null and b/Projects/space-game/step11/img/enemy-blue-4.png differ
diff --git a/Projects/space-game/step11/img/enemy-blue-5.png b/Projects/space-game/step11/img/enemy-blue-5.png
new file mode 100644
index 000000000..e740509f7
Binary files /dev/null and b/Projects/space-game/step11/img/enemy-blue-5.png differ
diff --git a/Projects/space-game/step11/img/enemy-green-1.png b/Projects/space-game/step11/img/enemy-green-1.png
new file mode 100644
index 000000000..064e29037
Binary files /dev/null and b/Projects/space-game/step11/img/enemy-green-1.png differ
diff --git a/Projects/space-game/step11/img/enemy-green-2.png b/Projects/space-game/step11/img/enemy-green-2.png
new file mode 100644
index 000000000..5189d2459
Binary files /dev/null and b/Projects/space-game/step11/img/enemy-green-2.png differ
diff --git a/Projects/space-game/step11/img/enemy-green-3.png b/Projects/space-game/step11/img/enemy-green-3.png
new file mode 100644
index 000000000..74e2bca68
Binary files /dev/null and b/Projects/space-game/step11/img/enemy-green-3.png differ
diff --git a/Projects/space-game/step11/img/enemy-green-4.png b/Projects/space-game/step11/img/enemy-green-4.png
new file mode 100644
index 000000000..112e299f8
Binary files /dev/null and b/Projects/space-game/step11/img/enemy-green-4.png differ
diff --git a/Projects/space-game/step11/img/enemy-green-5.png b/Projects/space-game/step11/img/enemy-green-5.png
new file mode 100644
index 000000000..59382705b
Binary files /dev/null and b/Projects/space-game/step11/img/enemy-green-5.png differ
diff --git a/Projects/space-game/step11/img/enemy-red-1.png b/Projects/space-game/step11/img/enemy-red-1.png
new file mode 100644
index 000000000..fb0c0a2ca
Binary files /dev/null and b/Projects/space-game/step11/img/enemy-red-1.png differ
diff --git a/Projects/space-game/step11/img/enemy-red-2.png b/Projects/space-game/step11/img/enemy-red-2.png
new file mode 100644
index 000000000..3ee96c571
Binary files /dev/null and b/Projects/space-game/step11/img/enemy-red-2.png differ
diff --git a/Projects/space-game/step11/img/enemy-red-3.png b/Projects/space-game/step11/img/enemy-red-3.png
new file mode 100644
index 000000000..bc8eacd99
Binary files /dev/null and b/Projects/space-game/step11/img/enemy-red-3.png differ
diff --git a/Projects/space-game/step11/img/enemy-red-4.png b/Projects/space-game/step11/img/enemy-red-4.png
new file mode 100644
index 000000000..a3216d4bf
Binary files /dev/null and b/Projects/space-game/step11/img/enemy-red-4.png differ
diff --git a/Projects/space-game/step11/img/enemy-red-5.png b/Projects/space-game/step11/img/enemy-red-5.png
new file mode 100644
index 000000000..645cdf3c8
Binary files /dev/null and b/Projects/space-game/step11/img/enemy-red-5.png differ
diff --git a/Projects/space-game/step11/img/laser-blue-1.png b/Projects/space-game/step11/img/laser-blue-1.png
new file mode 100644
index 000000000..b76aaf7a0
Binary files /dev/null and b/Projects/space-game/step11/img/laser-blue-1.png differ
diff --git a/Projects/space-game/step11/img/laser-blue-10.png b/Projects/space-game/step11/img/laser-blue-10.png
new file mode 100644
index 000000000..dd6b766a4
Binary files /dev/null and b/Projects/space-game/step11/img/laser-blue-10.png differ
diff --git a/Projects/space-game/step11/img/laser-blue-11.png b/Projects/space-game/step11/img/laser-blue-11.png
new file mode 100644
index 000000000..c06234958
Binary files /dev/null and b/Projects/space-game/step11/img/laser-blue-11.png differ
diff --git a/Projects/space-game/step11/img/laser-blue-12.png b/Projects/space-game/step11/img/laser-blue-12.png
new file mode 100644
index 000000000..48b6103e1
Binary files /dev/null and b/Projects/space-game/step11/img/laser-blue-12.png differ
diff --git a/Projects/space-game/step11/img/laser-blue-13.png b/Projects/space-game/step11/img/laser-blue-13.png
new file mode 100644
index 000000000..c5ec6a329
Binary files /dev/null and b/Projects/space-game/step11/img/laser-blue-13.png differ
diff --git a/Projects/space-game/step11/img/laser-blue-14.png b/Projects/space-game/step11/img/laser-blue-14.png
new file mode 100644
index 000000000..254601e5f
Binary files /dev/null and b/Projects/space-game/step11/img/laser-blue-14.png differ
diff --git a/Projects/space-game/step11/img/laser-blue-15.png b/Projects/space-game/step11/img/laser-blue-15.png
new file mode 100644
index 000000000..1ea1966d5
Binary files /dev/null and b/Projects/space-game/step11/img/laser-blue-15.png differ
diff --git a/Projects/space-game/step11/img/laser-blue-16.png b/Projects/space-game/step11/img/laser-blue-16.png
new file mode 100644
index 000000000..1def98fb6
Binary files /dev/null and b/Projects/space-game/step11/img/laser-blue-16.png differ
diff --git a/Projects/space-game/step11/img/laser-blue-2.png b/Projects/space-game/step11/img/laser-blue-2.png
new file mode 100644
index 000000000..3f923a394
Binary files /dev/null and b/Projects/space-game/step11/img/laser-blue-2.png differ
diff --git a/Projects/space-game/step11/img/laser-blue-3.png b/Projects/space-game/step11/img/laser-blue-3.png
new file mode 100644
index 000000000..a16e9a82e
Binary files /dev/null and b/Projects/space-game/step11/img/laser-blue-3.png differ
diff --git a/Projects/space-game/step11/img/laser-blue-4.png b/Projects/space-game/step11/img/laser-blue-4.png
new file mode 100644
index 000000000..6f3b9103a
Binary files /dev/null and b/Projects/space-game/step11/img/laser-blue-4.png differ
diff --git a/Projects/space-game/step11/img/laser-blue-5.png b/Projects/space-game/step11/img/laser-blue-5.png
new file mode 100644
index 000000000..85cff7d5d
Binary files /dev/null and b/Projects/space-game/step11/img/laser-blue-5.png differ
diff --git a/Projects/space-game/step11/img/laser-blue-6.png b/Projects/space-game/step11/img/laser-blue-6.png
new file mode 100644
index 000000000..a621875c5
Binary files /dev/null and b/Projects/space-game/step11/img/laser-blue-6.png differ
diff --git a/Projects/space-game/step11/img/laser-blue-7.png b/Projects/space-game/step11/img/laser-blue-7.png
new file mode 100644
index 000000000..e1848bfc3
Binary files /dev/null and b/Projects/space-game/step11/img/laser-blue-7.png differ
diff --git a/Projects/space-game/step11/img/laser-blue-8.png b/Projects/space-game/step11/img/laser-blue-8.png
new file mode 100644
index 000000000..7a463965c
Binary files /dev/null and b/Projects/space-game/step11/img/laser-blue-8.png differ
diff --git a/Projects/space-game/step11/img/laser-blue-9.png b/Projects/space-game/step11/img/laser-blue-9.png
new file mode 100644
index 000000000..35624e649
Binary files /dev/null and b/Projects/space-game/step11/img/laser-blue-9.png differ
diff --git a/Projects/space-game/step11/img/laser-green-1.png b/Projects/space-game/step11/img/laser-green-1.png
new file mode 100644
index 000000000..c9982b1ed
Binary files /dev/null and b/Projects/space-game/step11/img/laser-green-1.png differ
diff --git a/Projects/space-game/step11/img/laser-green-10.png b/Projects/space-game/step11/img/laser-green-10.png
new file mode 100644
index 000000000..9c7974c69
Binary files /dev/null and b/Projects/space-game/step11/img/laser-green-10.png differ
diff --git a/Projects/space-game/step11/img/laser-green-11.png b/Projects/space-game/step11/img/laser-green-11.png
new file mode 100644
index 000000000..100cddbd4
Binary files /dev/null and b/Projects/space-game/step11/img/laser-green-11.png differ
diff --git a/Projects/space-game/step11/img/laser-green-12.png b/Projects/space-game/step11/img/laser-green-12.png
new file mode 100644
index 000000000..b05a72fa6
Binary files /dev/null and b/Projects/space-game/step11/img/laser-green-12.png differ
diff --git a/Projects/space-game/step11/img/laser-green-13.png b/Projects/space-game/step11/img/laser-green-13.png
new file mode 100644
index 000000000..92cc35334
Binary files /dev/null and b/Projects/space-game/step11/img/laser-green-13.png differ
diff --git a/Projects/space-game/step11/img/laser-green-14.png b/Projects/space-game/step11/img/laser-green-14.png
new file mode 100644
index 000000000..7abd3b29b
Binary files /dev/null and b/Projects/space-game/step11/img/laser-green-14.png differ
diff --git a/Projects/space-game/step11/img/laser-green-15.png b/Projects/space-game/step11/img/laser-green-15.png
new file mode 100644
index 000000000..97a44051d
Binary files /dev/null and b/Projects/space-game/step11/img/laser-green-15.png differ
diff --git a/Projects/space-game/step11/img/laser-green-16.png b/Projects/space-game/step11/img/laser-green-16.png
new file mode 100644
index 000000000..b73c12fb9
Binary files /dev/null and b/Projects/space-game/step11/img/laser-green-16.png differ
diff --git a/Projects/space-game/step11/img/laser-green-2.png b/Projects/space-game/step11/img/laser-green-2.png
new file mode 100644
index 000000000..5cd78303e
Binary files /dev/null and b/Projects/space-game/step11/img/laser-green-2.png differ
diff --git a/Projects/space-game/step11/img/laser-green-3.png b/Projects/space-game/step11/img/laser-green-3.png
new file mode 100644
index 000000000..d658547bc
Binary files /dev/null and b/Projects/space-game/step11/img/laser-green-3.png differ
diff --git a/Projects/space-game/step11/img/laser-green-4.png b/Projects/space-game/step11/img/laser-green-4.png
new file mode 100644
index 000000000..61b04fb71
Binary files /dev/null and b/Projects/space-game/step11/img/laser-green-4.png differ
diff --git a/Projects/space-game/step11/img/laser-green-5.png b/Projects/space-game/step11/img/laser-green-5.png
new file mode 100644
index 000000000..98ae6bee2
Binary files /dev/null and b/Projects/space-game/step11/img/laser-green-5.png differ
diff --git a/Projects/space-game/step11/img/laser-green-6.png b/Projects/space-game/step11/img/laser-green-6.png
new file mode 100644
index 000000000..36dd94d46
Binary files /dev/null and b/Projects/space-game/step11/img/laser-green-6.png differ
diff --git a/Projects/space-game/step11/img/laser-green-7.png b/Projects/space-game/step11/img/laser-green-7.png
new file mode 100644
index 000000000..0ae7c2d0c
Binary files /dev/null and b/Projects/space-game/step11/img/laser-green-7.png differ
diff --git a/Projects/space-game/step11/img/laser-green-8.png b/Projects/space-game/step11/img/laser-green-8.png
new file mode 100644
index 000000000..0ff1d80f9
Binary files /dev/null and b/Projects/space-game/step11/img/laser-green-8.png differ
diff --git a/Projects/space-game/step11/img/laser-green-9.png b/Projects/space-game/step11/img/laser-green-9.png
new file mode 100644
index 000000000..932056b9f
Binary files /dev/null and b/Projects/space-game/step11/img/laser-green-9.png differ
diff --git a/Projects/space-game/step11/img/laser-red-1.png b/Projects/space-game/step11/img/laser-red-1.png
new file mode 100644
index 000000000..5e467b65b
Binary files /dev/null and b/Projects/space-game/step11/img/laser-red-1.png differ
diff --git a/Projects/space-game/step11/img/laser-red-10.png b/Projects/space-game/step11/img/laser-red-10.png
new file mode 100644
index 000000000..0f85ba1b0
Binary files /dev/null and b/Projects/space-game/step11/img/laser-red-10.png differ
diff --git a/Projects/space-game/step11/img/laser-red-11.png b/Projects/space-game/step11/img/laser-red-11.png
new file mode 100644
index 000000000..95e9c0a14
Binary files /dev/null and b/Projects/space-game/step11/img/laser-red-11.png differ
diff --git a/Projects/space-game/step11/img/laser-red-12.png b/Projects/space-game/step11/img/laser-red-12.png
new file mode 100644
index 000000000..9f56da0ce
Binary files /dev/null and b/Projects/space-game/step11/img/laser-red-12.png differ
diff --git a/Projects/space-game/step11/img/laser-red-13.png b/Projects/space-game/step11/img/laser-red-13.png
new file mode 100644
index 000000000..292bcc5d5
Binary files /dev/null and b/Projects/space-game/step11/img/laser-red-13.png differ
diff --git a/Projects/space-game/step11/img/laser-red-14.png b/Projects/space-game/step11/img/laser-red-14.png
new file mode 100644
index 000000000..eaf8346de
Binary files /dev/null and b/Projects/space-game/step11/img/laser-red-14.png differ
diff --git a/Projects/space-game/step11/img/laser-red-15.png b/Projects/space-game/step11/img/laser-red-15.png
new file mode 100644
index 000000000..7d27c2a94
Binary files /dev/null and b/Projects/space-game/step11/img/laser-red-15.png differ
diff --git a/Projects/space-game/step11/img/laser-red-16.png b/Projects/space-game/step11/img/laser-red-16.png
new file mode 100644
index 000000000..b12fcd5d4
Binary files /dev/null and b/Projects/space-game/step11/img/laser-red-16.png differ
diff --git a/Projects/space-game/step11/img/laser-red-2.png b/Projects/space-game/step11/img/laser-red-2.png
new file mode 100644
index 000000000..1127fffb6
Binary files /dev/null and b/Projects/space-game/step11/img/laser-red-2.png differ
diff --git a/Projects/space-game/step11/img/laser-red-3.png b/Projects/space-game/step11/img/laser-red-3.png
new file mode 100644
index 000000000..bc1bb8730
Binary files /dev/null and b/Projects/space-game/step11/img/laser-red-3.png differ
diff --git a/Projects/space-game/step11/img/laser-red-4.png b/Projects/space-game/step11/img/laser-red-4.png
new file mode 100644
index 000000000..fc3655b0f
Binary files /dev/null and b/Projects/space-game/step11/img/laser-red-4.png differ
diff --git a/Projects/space-game/step11/img/laser-red-5.png b/Projects/space-game/step11/img/laser-red-5.png
new file mode 100644
index 000000000..46db2d77f
Binary files /dev/null and b/Projects/space-game/step11/img/laser-red-5.png differ
diff --git a/Projects/space-game/step11/img/laser-red-6.png b/Projects/space-game/step11/img/laser-red-6.png
new file mode 100644
index 000000000..33614ae1a
Binary files /dev/null and b/Projects/space-game/step11/img/laser-red-6.png differ
diff --git a/Projects/space-game/step11/img/laser-red-7.png b/Projects/space-game/step11/img/laser-red-7.png
new file mode 100644
index 000000000..23bab346f
Binary files /dev/null and b/Projects/space-game/step11/img/laser-red-7.png differ
diff --git a/Projects/space-game/step11/img/laser-red-8.png b/Projects/space-game/step11/img/laser-red-8.png
new file mode 100644
index 000000000..5a2cce30e
Binary files /dev/null and b/Projects/space-game/step11/img/laser-red-8.png differ
diff --git a/Projects/space-game/step11/img/laser-red-9.png b/Projects/space-game/step11/img/laser-red-9.png
new file mode 100644
index 000000000..7dc31dcc2
Binary files /dev/null and b/Projects/space-game/step11/img/laser-red-9.png differ
diff --git a/Projects/space-game/step11/img/player-blue-1.png b/Projects/space-game/step11/img/player-blue-1.png
new file mode 100644
index 000000000..cecbbed97
Binary files /dev/null and b/Projects/space-game/step11/img/player-blue-1.png differ
diff --git a/Projects/space-game/step11/img/player-blue-2.png b/Projects/space-game/step11/img/player-blue-2.png
new file mode 100644
index 000000000..e277114fd
Binary files /dev/null and b/Projects/space-game/step11/img/player-blue-2.png differ
diff --git a/Projects/space-game/step11/img/player-blue-3.png b/Projects/space-game/step11/img/player-blue-3.png
new file mode 100644
index 000000000..f34faf066
Binary files /dev/null and b/Projects/space-game/step11/img/player-blue-3.png differ
diff --git a/Projects/space-game/step11/img/player-green-1.png b/Projects/space-game/step11/img/player-green-1.png
new file mode 100644
index 000000000..2eb6f9c06
Binary files /dev/null and b/Projects/space-game/step11/img/player-green-1.png differ
diff --git a/Projects/space-game/step11/img/player-green-2.png b/Projects/space-game/step11/img/player-green-2.png
new file mode 100644
index 000000000..72e18c7ff
Binary files /dev/null and b/Projects/space-game/step11/img/player-green-2.png differ
diff --git a/Projects/space-game/step11/img/player-green-3.png b/Projects/space-game/step11/img/player-green-3.png
new file mode 100644
index 000000000..b853be42a
Binary files /dev/null and b/Projects/space-game/step11/img/player-green-3.png differ
diff --git a/Projects/space-game/step11/img/player-orange-1.png b/Projects/space-game/step11/img/player-orange-1.png
new file mode 100644
index 000000000..3902283d4
Binary files /dev/null and b/Projects/space-game/step11/img/player-orange-1.png differ
diff --git a/Projects/space-game/step11/img/player-orange-2.png b/Projects/space-game/step11/img/player-orange-2.png
new file mode 100644
index 000000000..82ddc8068
Binary files /dev/null and b/Projects/space-game/step11/img/player-orange-2.png differ
diff --git a/Projects/space-game/step11/img/player-orange-3.png b/Projects/space-game/step11/img/player-orange-3.png
new file mode 100644
index 000000000..0b6b7ec68
Binary files /dev/null and b/Projects/space-game/step11/img/player-orange-3.png differ
diff --git a/Projects/space-game/step11/img/player-red-1.png b/Projects/space-game/step11/img/player-red-1.png
new file mode 100644
index 000000000..3695e09e2
Binary files /dev/null and b/Projects/space-game/step11/img/player-red-1.png differ
diff --git a/Projects/space-game/step11/img/player-red-2.png b/Projects/space-game/step11/img/player-red-2.png
new file mode 100644
index 000000000..8213e978d
Binary files /dev/null and b/Projects/space-game/step11/img/player-red-2.png differ
diff --git a/Projects/space-game/step11/img/player-red-3.png b/Projects/space-game/step11/img/player-red-3.png
new file mode 100644
index 000000000..796e81d71
Binary files /dev/null and b/Projects/space-game/step11/img/player-red-3.png differ
diff --git a/Projects/space-game/step11/index.html b/Projects/space-game/step11/index.html
new file mode 100644
index 000000000..1ebb1e695
--- /dev/null
+++ b/Projects/space-game/step11/index.html
@@ -0,0 +1,32 @@
+
+
+
+
+
+
+ Space Game
+
+
+
+
+