Déplacer un élement en js

Bonjour j'ai 14ans et je vais sur mes 15ans et je bloque sur un problème qui m'empêche de finir un projet et n'arrivant pas à le résoudre je vous contacte. Je cherche à déplacer un objet (panier) à chaque fois que la touche "flèche droite". L'élément "panier" se déplace bien mais pas du nombre de pixels indiqué.

J'ai mis beaucoup de "console.log" et j'ai beaucoup développé le code JS pour localiser le problème pour essayer de résoudre ce problème. Voila mon code:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang='fr'>
    <head>
        <title>Jeu attrape pomme</title>
        <link rel="stylesheet" href="style/style.css">
        <meta charset="utf-8">
        <script src="E:\jeu attrape pomme\script\main.js"></script>
    </head>
    <body>
        <div id="box">
            <p id="score">Point : <span id="numScore">0</span></p>
            <p id='rond'></p>
            <p id='panier'>|_____|</p>
        </div> 
    </body>
</html>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
@font-face{
    font-family: "Nunito";
    src: url("Nunito-Regular.ttf") format("truetype");
}
body{
    background-color: #242424;
    font-family: "Nunito";
}
#box{
    margin-left: auto;
    margin-right: auto;
    width: 960px;
    height: 560px;
    border-radius: 6px;
    border: 0.2px rgba(0, 0, 0, 0) solid;
    font-family: "Nunito";
    padding: 10px;
    background-image: url(foret.jpg);
    background-position: center;
    position: relative;
}
#rond{
    width: 40px;
    height: 40px;
    background-color: #ff5757;
    border-radius: 100%;
}
#panier{
    font-size: 40px;
    font-weight: bold;
    font-family: "Nunito";
    background-color: #5d80cc;
    width: 117px;
    position: absolute;
 
}
#score{
    font-size: 20px;
    font-weight: bold;
    position: absolute;
    right: 20px;
    top: 0px
}

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
window.onload = function(){
    document.body.addEventListener('keydown', key)
}
function key(e){
    var panier = document.getElementById('panier')
    if (e.keyCode == "39"){
        console.log("-->")
        console.log('pos. actuelle: '+panier.getBoundingClientRect().left)
 
        var posPanier = panier.getBoundingClientRect().left+ 1000 +'px'
        console.log('pos. future : '+posPanier)
        panier.style.left = posPanier
 
        console.log(panier.getBoundingClientRect().left)
    }
 
    if (e.keyCode == "37"){
        console.log("<--")
        panier.style.left = '3px';
        console.log(panier.getBoundingClientRect().left)
    }
}

Merci d'avance, passer une agréable soirée et excusez-moi pour les fautes d'orthographes (g bcp de prbl avec ça)