diff --git a/css/layout.css b/css/layout.css index 51c21ba..d3def90 100644 --- a/css/layout.css +++ b/css/layout.css @@ -18,6 +18,8 @@ body{ } #fuchs img{ width: 200px; + position: relative; + left: 50px; } #enemy img{ width: 220px; diff --git a/js/allg.js b/js/allg.js index 2c1f2ce..33f4f94 100644 --- a/js/allg.js +++ b/js/allg.js @@ -2,9 +2,13 @@ let playerAnim = []; let tomAnim = []; let enemyAnim = []; let playerAnimState = 0; +let runDirection = 1; +let runSpeed = 5; +let currentPosition = 0; let player = document.querySelector("#fuchs img"); fillArrays(); +//currentPosition = window.getComputedStyle(player).left; function fillArrays() { @@ -22,8 +26,7 @@ let start = setInterval(gameLoop, 100); function gameLoop() { - playerRunAnim(); - checkInput(); + move(); } function playerRunAnim() @@ -34,22 +37,33 @@ function playerRunAnim() } player.src = playerAnim[playerAnimState]; playerAnimState++; - } -function checkInput() -{ - -} document.addEventListener('keydown', function(event) { if(event.key == "d") { - console.log("d"); - player.style.transform = 'scaleX(1)'; + if(runDirection == -1) + { + player.style.transform = 'scaleX(1)'; + } + runDirection = 1; } else if(event.key == "a") { - player.style.transform = 'scaleX(-1)'; + if(runDirection == 1) + { + player.style.transform = 'scaleX(-1)'; + } + runDirection = -1; } -}); \ No newline at end of file +}); + +function move() +{ + playerRunAnim(); + currentPosition = currentPosition + runDirection * runSpeed; + player.style.left = currentPosition + "px"; + console.log(currentPosition); +} +