diff --git a/classes/sonic-speed/index.html b/classes/sonic-speed/index.html index 5726c14..b24a244 100644 --- a/classes/sonic-speed/index.html +++ b/classes/sonic-speed/index.html @@ -12,8 +12,8 @@

Press an arrow key to move Sonic

- + diff --git a/classes/sonic-speed/script.js b/classes/sonic-speed/script.js index a1c0bb8..3a38e57 100644 --- a/classes/sonic-speed/script.js +++ b/classes/sonic-speed/script.js @@ -2,24 +2,28 @@ const stepSize = 200; const sonicGif = document.getElementById('sonic-running'); +sonicGif.style.marginTop = 0; +sonicGif.style.marginLeft = 0; + // Create functions which move Sonic around page using margins function moveSonicDown() { - const currentMarginTop = parseInt(window.getComputedStyle(sonicGif).marginTop); + const currentMarginTop = parseInt(sonicGif.style.marginTop); sonicGif.style.marginTop = (currentMarginTop + stepSize) + 'px'; } function moveSonicUp() { - const currentMarginTop = parseInt(window.getComputedStyle(sonicGif).marginTop); + const currentMarginTop = parseInt(sonicGif.sytle.marginTop); sonicGif.style.marginTop = (currentMarginTop - stepSize) + 'px'; } function moveSonicRight() { - const currentMarginLeft = parseInt(window.getComputedStyle(sonicGif).marginLeft); + const currentMarginLeft = parseInt(sonicGif.style.marginLeft); + console.log(currentMarginLeft) sonicGif.style.marginLeft = (currentMarginLeft + stepSize) + 'px'; } function moveSonicLeft() { - const currentMarginLeft = parseInt(window.getComputedStyle(sonicGif).marginLeft); + const currentMarginLeft = parseInt(sonicGif.style.marginLeft); sonicGif.style.marginLeft = (currentMarginLeft - stepSize) + 'px'; } diff --git a/classes/sonic-speed/script2.js b/classes/sonic-speed/script2.js new file mode 100644 index 0000000..7d28d23 --- /dev/null +++ b/classes/sonic-speed/script2.js @@ -0,0 +1,17 @@ +const sonicImage = document.getElementById('sonic-running'); + +// sonicImage.style.height = '600px'; +document.onkeydown = function(event) { + if (event.key === 'ArrowDown') { + sonicImage.style.marginTop = '300px'; + } + if (event.key === 'ArrowUp') { + sonicImage.style.marginTop = ' 0px'; + } + if (event.key === 'ArrowRight') { + sonicImage.style.marginLeft = '300px'; + } + if (event.key === 'ArrowLeft') { + sonicImage.style.marginLeft = '0px'; + } +}