diff --git a/classes/sonic-speed/index.html b/classes/sonic-speed/index.html index 5938cd4..7aae5be 100644 --- a/classes/sonic-speed/index.html +++ b/classes/sonic-speed/index.html @@ -12,7 +12,9 @@

Press an arrow key to move Sonic

- + + + diff --git a/classes/sonic-speed/script.js b/classes/sonic-speed/script.js index aa1dab8..a1c0bb8 100644 --- a/classes/sonic-speed/script.js +++ b/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 diff --git a/classes/sonic-speed/style.css b/classes/sonic-speed/style.css index c7ccba6..868a5b3 100644 --- a/classes/sonic-speed/style.css +++ b/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'); +}