按鍵上的Javascript：player.style.left + = 10，不知道爲什麼這不起作用

我試圖移動我的角色（保存在變量'player'下，它絕對定位。）當我按'W'，'A'，'S'和'D'鍵。但我無法讓它移動。任何幫助都會很棒。按鍵上的Javascript：player.style.left + = 10，不知道爲什麼這不起作用

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; 
}

我已經在本週早些時候就做過類似的事情用jQuery所以我不知道這是爲什麼不與香草JS工作

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球員之一：

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

來源

2017-03-14 Moe Chughtai

'left'必須有一個單元。 – SLaks

你能提供更多的上下文嗎？（例如HTML，CSS） – Trevor

@Trevor是的，現在包含相關的html和css –

有在你的代碼

0123許多錯誤

左側必須有一個單元

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>

來源

2017-03-14 17:34:43

他只註冊一次事件監聽器（這是一件好事），但每次'keydown'事件觸發'body'時都會觸發 – Trevor

是的，這項工作。謝謝。另外，你是否可以解釋你的陳述'你正在觸發EventListener on一次，即'我不明白你的意思。 –

@MoeChughtai希望我有一個誤解 –

正如評論所說，留下必須有一個單元。這裏有一個工作示例：

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>

來源

2017-03-14 17:43:32 Trevor

按鍵上的Javascript：player.style.left + = 10，不知道爲什麼這不起作用

回答

相關問題