class 1 on sonic running class

Author: jackoconnordev

classes/sonic-speed/index.html

@@ -12,7 +12,9 @@
   <h1>Press an arrow key to move Sonic</h1>
   <img id="sonic-running" src="./assets/sonic-running.gif">
 
-  <script src="./script.js"></script>
+  <!-- <script src="./script.js"></script> -->
+  <script src="./script2.js"></script>
 </body>
 
 </html>
+

classes/sonic-speed/script.js

@@ -1,22 +1,26 @@
 // Select sonicGif in DOM so we can do things to it with javascript
-const stepSize = 100;
+const stepSize = 200;
 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';
+  const currentMarginTop = parseInt(window.getComputedStyle(sonicGif).marginTop);
+  sonicGif.style.marginTop = (currentMarginTop + stepSize) + 'px';
 }
 
 function moveSonicUp() {
-  sonicGif.style.marginTop = (parseInt(window.getComputedStyle(sonicGif).marginTop) - stepSize) + 'px';
+  const currentMarginTop = parseInt(window.getComputedStyle(sonicGif).marginTop);
+  sonicGif.style.marginTop = (currentMarginTop - stepSize) + 'px';
 }
 
 function moveSonicRight() {
-  sonicGif.style.marginLeft = (parseInt(window.getComputedStyle(sonicGif).marginLeft) + stepSize) + 'px';
+  const currentMarginLeft = parseInt(window.getComputedStyle(sonicGif).marginLeft);
+  sonicGif.style.marginLeft = (currentMarginLeft + stepSize) + 'px';
 }
 
 function moveSonicLeft() {
-  sonicGif.style.marginLeft = (parseInt(window.getComputedStyle(sonicGif).marginLeft) - stepSize) + 'px';
+  const currentMarginLeft = parseInt(window.getComputedStyle(sonicGif).marginLeft);
+  sonicGif.style.marginLeft = (currentMarginLeft - stepSize) + 'px';
 }
 
 // Add key press event listener. Only do things for arrow keys

classes/sonic-speed/style.css

@@ -1,4 +1,9 @@
 #sonic-running {
-  height: 100px;
+  height: 200px;
   aspect-ratio: auto;
 }
+
+html {
+  /* come back to this */
+  background-image: url('https://stock.adobe.com/search?k=racetrack+cartoon');
+}