Move an image to left or right using arrow button

Question

I tried using redoing it but it doesn't work all I want is to redCar to move left and right when using the arrow keys there was a error once but it got solved by moving the below the body and can you tell me why is that????

 var blueCar = document.getElementById("bluecar"); var redCar = document.getElementById("redcar"); var result = document.getElementById("result"); var game = document.getElementById("game"); var score = document.getElementById("score"); var counter = 0; blueCar.addEventListener("animationiteration",function(){ var random = ((Math.floor(Math.random()*3))*130) blueCar.style.left = random+"px"; counter++; }) **next code is not working like it sappose to do** redCar.addEventListener("keydown",function(e){ if(e.keyCode=="39") { var redCarleft = parseInt(window.getComputedStyle(redCar).getPropertyValue("left")) if(redCarleft<260) { redCar.style.left = (redCarleft+130)+"px"; } }; *this is the command of left key* if(e.keyCode=="37") { var redCarleft = parseInt(window.getComputedStyle(redCar).getPropertyValue("left")) if(redCarleft>0){ redCar.style.left = (redCarleft-130)+"px"; } } })

 //this is my css which is working is fine *{ margin: 0%; padding: 0%; } body{ background-color: #34adff; background-image: -webkit-linear-gradient(45deg,#7c7e80 50%,#323333 50%); min-height: 800px; } #game{ height: 500px; width: 390px; background-color: 1rem solid black; background-image:url(narutoR.png) ; background-size: contain; margin: 1rem auto; overflow: hidden; } #bluecar{ height: 100px; width: 130px; background-color: #34adff; position: relative; top: 0px; left: 0px; text-align: center; animation: move 1s linear infinite; } #bluecar img{ height: 100px; } @keyframes move { 0%{ top: 0px; } 100% { top: 501px; } } #redcar{ height: 100px; width: 130px; background-color:red; position: relative; top: 250px; left: 130px; text-align: center; } #redcar img{ height: 100px; } #result{ height: 200px; width: 400px; background-color: darkred; margin:5rem ; border: 2px solid white; border-radius:20px ; font-size: 30px; text-align: center; display:none; } #score{ font-size: 2.2rem; color:goldenrod; } #btn{ padding: 0.5rem 1rem; border: none; border-radius: 20px; background-color:black; color:cyan; font-size: 25px; text-transform: uppercase; margin-top: 10px; cursor: pointer; }

 **this is working fine as i am able to access them perfectely** <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>car game</title> <link rel="stylesheet" href="cargame.css"> </head> <body> <div> <div id="game"> <div id="bluecar" > <img src="rasengan.jpeg" alt="blurcar"></div> <div id="redcar" > <img src="pain.jpeg" alt="redcar"></div> </div> <div id="result"> <h1>GameOver</h1> <p id="score"></p> <button id="btn" onclick="location.reload()">Restart</button> </div> </div> </body> <script src="cargame.js"></script> </html>

Answer 1

Add the keydown eventListener to the document.

document.addEventListener("keydown",function(e){
    if(e.keyCode=="39")
    {
        var redCarleft = parseInt(window.getComputedStyle(redCar).getPropertyValue("left"))
    if(redCarleft<260)
    {
        redCar.style.left = (redCarleft+130)+"px";
    
    }
};
    if(e.keyCode=="37")
    {
        var redCarleft = parseInt(window.getComputedStyle(redCar).getPropertyValue("left"))
    if(redCarleft>0){
        redCar.style.left = (redCarleft-130)+"px";
    }
}
})

Move an image to left or right using arrow button

Question

1 answers

solution1
0 2022-05-12 10:56:06

Move an image to left or right using arrow button

Question

1 answers

solution1 0 2022-05-12 10:56:06

solution1
0 2022-05-12 10:56:06