add moving Sonic gif around a page

icabp-coderdojo-projects · Oct 14, 2023 · 934dc6a · 934dc6a
1 parent bffd592
commit 934dc6a
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 0 deletions.
diff --git a/classes/sonic-speed/assets/sonic-running.gif b/classes/sonic-speed/assets/sonic-running.gif
diff --git a/classes/sonic-speed/index.html b/classes/sonic-speed/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Sonic Speed</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+  <h1>Press an arrow key to move Sonic</h1>
+  <img id="sonic-running" src="./assets/sonic-running.gif">
+
+  <script src="./script.js"></script>
+</body>
+
+</html>
diff --git a/classes/sonic-speed/script.js b/classes/sonic-speed/script.js
@@ -0,0 +1,40 @@
+// Select sonicGif in DOM so we can do things to it with javascript
+const stepSize = 100;
+const sonicGif = document.getElementById('sonic-running');
+
+// Create functions which move Sonic around page using margins
+function moveSonicDown() {
+  sonicGif.style.marginTop = (parseInt(window.getComputedStyle(sonicGif).marginTop) + stepSize) + 'px';
+}
+
+function moveSonicUp() {
+  sonicGif.style.marginTop = (parseInt(window.getComputedStyle(sonicGif).marginTop) - stepSize) + 'px';
+}
+
+function moveSonicRight() {
+  sonicGif.style.marginLeft = (parseInt(window.getComputedStyle(sonicGif).marginLeft) + stepSize) + 'px';
+}
+
+function moveSonicLeft() {
+  sonicGif.style.marginLeft = (parseInt(window.getComputedStyle(sonicGif).marginLeft) - stepSize) + 'px';
+}
+
+// Add key press event listener. Only do things for arrow keys
+document.onkeydown = function(e) {
+  if (e.key === 'ArrowDown') {
+    moveSonicDown();
+    return; // Once we've found our key let's exit the function with return
+  }
+  if (e.key === 'ArrowUp') {
+    moveSonicUp();
+    return;
+  }
+  if (e.key === 'ArrowRight') {
+    moveSonicRight();
+    return;
+  }
+  if (e.key === 'ArrowLeft') {
+    moveSonicLeft();
+    return;
+  }
+}; 
diff --git a/classes/sonic-speed/style.css b/classes/sonic-speed/style.css
@@ -0,0 +1,4 @@
+#sonic-running {
+  height: 100px;
+  aspect-ratio: auto;
+}
diff --git a/index.html b/index.html
@@ -19,6 +19,7 @@ <h2>Navigation links</h2>
       <li><a href="./classes/birds-with-hands">Birds with hands</a></li>
       <li><a href="./classes/coder-dojo-homepage">CoderDojo homepage</a></li>
       <li><a href="./classes/noughts-and-crosses/">X's and O's game</a></li>
+      <li><a href="./classes/sonic-speed/">Sonic Speed</a></li>
     </ul>
   </nav>