Déplacer un élement en js

**douwwwd** · 11/03/2021, 19h22

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 HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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 CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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