Javascript auf Tastendruck: player.style.left + = 10, kann nicht herausfinden, warum das nicht funktioniert

Ich versuche, meinen Charakter (gespeichert unter der Variablen 'Player' und es ist absolut positioniert.), Wenn ich Drücken Sie die Tasten "W", "A", "S" und "D". Aber ich kann es nicht bewegen. Jede Hilfe wäre großartig.Javascript auf Tastendruck: player.style.left + = 10, kann nicht herausfinden, warum das nicht funktioniert

let player; 
let bod; 
player_one_horizontal_position; 
window.onload = function(){ 
    bod = document.getElementsByTagName('body'); 
    player = document.getElementById('player'); 
    player_one_horizontal_position = 10; 

    bod.addEventListener('keydown',function(e){ 
    if(e.code === 'KeyA'){ 
     player_one_horizontal_position += 10; 
     check_position(e.code); 
    }; 
}); //end of eventListener 
    }//end of window.onload function 

function check_position(code){ 
    console.log(code === 'KeyA'); /*does evaluate to true so the problem must be the next line */ 
    player.style.left = player_one_horizontal_position; 
}

Ich habe eine ähnliche Sache mit JQuery getan früher in der Woche, so bin ich nicht sicher, warum dies nicht mit Vanille JS arbeitet

HTML:

<!DOCTYPE html> 
<html> 
<head> 
    <!-- Main stylesheets --> 
    <link rel="stylesheet" href="style.css"/> 
    <!-- Player stylesheets --> 
    <link rel="stylesheet" href="player_one.css"/> 
    <link rel="stylesheet" href="player_two.css"/> 
    <script src="script.js"></script> 
</head> 
<body> 
    <div id="wrapper"> 
     <div id="player" class="stance_one"></div> 
     <div id="player2" class="first_stance"></div> 

    </div> 
</body> 
</html>

CSS für ein Spieler:

#player{ 
    background-image: url('images/sprite.png'); 
    position: absolute; 
    z-index: 1; 
    height: 142px; 
    left: 10; 
} 
.stance_one{ 
    width: 8%; 
    background-position: 0% 0%; 
}

Quelle

2017-03-14 Moe Chughtai

'left' eine Einheit haben muss. – SLaks

Könnten Sie mehr Kontext bereitstellen? (zB HTML, CSS) – Trevor

@Trevor ja, relevante html und css sind jetzt enthalten –

Es gibt viele Fehler in Ihrem Code

Linke muss eine Einheit haben

var move = 10; 
 

 
window.addEventListener('keydown', function(e) { 
 
    var a = String.fromCharCode(e.which); 
 
    if (a == 'A') { 
 
    document.getElementById("player").style.left = move + "px"; 
 
    move += 10; 
 

 
    }; 
 
});

#player { 
 
    width: 10px; 
 
    height: 10px; 
 
    background: red; 
 
    position: absolute; 
 
}

<div id="wrapper"> 
 
    <div id="player"></div> 
 
    <div id="player2"></div> 
 

 
</div>

Quelle

2017-03-14 17:34:43

Er registriert den Ereignis-Listener nur einmal (was eine gute Sache ist), aber er wird jedes Mal ausgelöst, wenn ein' keydown'-Ereignis auf dem 'Körper' ausgelöst wird – Trevor

Ja, das funktioniert. Vielen Dank. Kannst du auch deine Aussage erklären, dass du EventListener auf Body Onload feuern würdest, also einmal "Ich verstehe nicht, was du meinst. –

@MoeChughtai hoffentlich hatte ich ein Missverständnis –

Wie in den Kommentaren erwähnt, links muss eine Einheit haben. Hier ist ein funktionierendes Beispiel:

var player1El = document.querySelector('player-one'); 
 
var player1Meta = { 
 
    x: 20, 
 
    y: 20 
 
} 
 

 
function updatePlayer(el, meta){ 
 
    el.style.left = meta.x + 'px'; 
 
    el.style.top = meta.y + 'px'; 
 
} 
 

 
document.addEventListener('keyup', function(e){ 
 
    switch(e.which){ 
 
    case 65: 
 
     player1Meta.x -= 10; 
 
     break; 
 
    case 68: 
 
     player1Meta.x += 10; 
 
     break; 
 
    case 87: 
 
     player1Meta.y -= 10; 
 
     break; 
 
    case 83: 
 
     player1Meta.y += 10; 
 
     break; 
 
    default: 
 
     break; 
 
    } 
 
    updatePlayer(player1El, player1Meta); 
 
});

game-world{ 
 
    width:500px; 
 
    height:400px; 
 
    background:#333; 
 
    display:block; 
 
} 
 

 
player-one,player-two{ 
 
    position:absolute; 
 
    display:block; 
 
    border-radius:50%; 
 
    width:25px; 
 
    height:25px; 
 
} 
 

 
player-one{ 
 
    background:#acf; 
 
    left:20px; 
 
    top:20px; 
 
} 
 

 
player-two{ 
 
    background:#fac; 
 
    left:200px; 
 
}

<game-world> 
 
    <player-one></player-one> 
 
    <player-two></player-two> 
 
</game-world>

Quelle

2017-03-14 17:43:32 Trevor

Javascript auf Tastendruck: player.style.left + = 10, kann nicht herausfinden, warum das nicht funktioniert

Antwort

Verwandte Themen