diff --git a/html/tasks/chapter_10/snake/oppgave.html b/html/tasks/chapter_10/snake/oppgave.html
new file mode 100755
index 0000000..40fb8d5
--- /dev/null
+++ b/html/tasks/chapter_10/snake/oppgave.html
@@ -0,0 +1,23 @@
+
+
+
+
+
+
+ Snake
+
+
+
+
+ Snake
+
+
+
+
+
+
+
+
+
+
+
diff --git a/html/tasks/chapter_10/snake/script.js b/html/tasks/chapter_10/snake/script.js
new file mode 100755
index 0000000..3b1203a
--- /dev/null
+++ b/html/tasks/chapter_10/snake/script.js
@@ -0,0 +1,123 @@
+// @ts-check
+
+/* Initialize variables */
+const pixelSize = 20;
+const pixelAmount = 40;
+
+/* Register HTML DOM elements by variables */
+const canvas = document.getElementById('game');
+const game = canvas.getContext('2d');
+const startButton = document.getElementById('start');
+
+/* Add event listeners */
+document.addEventListener('keydown', updateDirection, false);
+startButton.addEventListener('click', gameLoop, false);
+
+/* Initialize HTML with functions */
+canvas.style.display = 'block';
+canvas.style.width = canvas.style.height = `${pixelSize * pixelAmount}px`;
+canvas.style.backgroundColor = '#ffffff';
+
+/* Snake class */
+class snake {
+ constructor() {
+ this.x = 0;
+ this.y = 0;
+ this.speed = 5;
+ this.direction = 'left';
+ this.tail = [
+ [3, 0],
+ [2, 0],
+ [1, 0],
+ [0, 0],
+ ];
+ this.color = '#00ff00';
+ }
+
+ draw() {
+ game.fillStyle = this.color;
+ for (let tailPoint = 0; tailPoint < this.tail.length; tailPoint++) {
+ /* Correct tailpoint x and y to actual size */
+ const pixelPosition = this.tail[tailPoint].map(
+ point => point * pixelSize
+ );
+ game.fillRect(
+ pixelPosition[0],
+ pixelPosition[1],
+ pixelPosition[0] + pixelSize,
+ pixelPosition[1] + pixelSize
+ );
+ }
+ }
+
+ updateTail() {
+ this.tail.pop();
+
+ switch (this.direction) {
+ case 'left':
+ this.tail.unshift([this.tail[0][0] + 1, this.tail[0][1]]);
+ break;
+ case 'right':
+ this.tail.unshift([this.tail[0][0] - 1, this.tail[0][1]]);
+ break;
+ case 'up':
+ this.tail.unshift([this.tail[0][0], this.tail[0][1] - 1]);
+ break;
+ case 'down':
+ this.tail.unshift([this.tail[0][0], this.tail[0][1] + 1]);
+ break;
+ }
+ }
+}
+
+/* Apple class */
+class apple {
+ constructor() {
+ this.x = 0;
+ this.y = 0;
+ }
+}
+
+const Snake = new snake();
+
+/* Wrapper function for gameloop */
+function gameLoop() {
+ /* Slow down loop */
+ setTimeout(() => {
+ window.requestAnimationFrame(gameLoop);
+ gameUpdate();
+ }, 1000 / Snake.speed);
+}
+
+/* Function that is being run each tick */
+function gameUpdate() {
+ /* Draw snake */
+ Snake.draw();
+ Snake.updateTail();
+}
+
+/* Update direction for snake */
+function updateDirection(evt) {
+ const key = evt.code;
+
+ console.log(key);
+
+ switch (key) {
+ case 'ArrowLeft':
+ evt.preventDefault();
+ Snake.direction = 'left';
+ break;
+ case 'ArrowRight':
+ evt.preventDefault();
+ Snake.direction = 'right';
+ break;
+ case 'ArrowUp':
+ evt.preventDefault();
+ Snake.direction = 'up';
+ break;
+ case 'ArrowDown':
+ evt.preventDefault();
+ Snake.direction = 'down';
+ break;
+ }
+}
diff --git a/index.html b/index.html
index 43c4195..a4bfa55 100755
--- a/index.html
+++ b/index.html
@@ -39,6 +39,12 @@
Canvas House
Oppgave 3 - Kvitter
Oppgave 10 - Localstorage & JSON test
+
+ Kapittel 8
+ Oppgave 3 - Random Array Data
+
+ Kapittel 10
+ Snake