汽车游戏中的箭头键

Question

 let score = document.querySelector('.score'); let startScreen = document.querySelector('.startScreen'); let gameArea = document.querySelector('.gameArea'); let startGame = document.querySelector('#startGame'); let keys = { ArrowUp: false, ArrowLeft: false, ArrowRight: false, ArrowDown: false } let player = { speed: 5 }; startGame.addEventListener('click', start) console.log(gameArea); document.addEventListener('keydown', keyDown); document.addEventListener('keyup', keyUp); function keyDown(e) { keys[e.key] = true; e.preventDefault(); //console.log(e.key); // console.log(keys); } function keyUp(e) { e.preventDefault(); keys[e.key] = false; console.log(e.key); console.log(keys); } function gamePlay() { // console.log('now play the game'); let keys = { ArrowUp: false, ArrowLeft: false, ArrowRight: false, ArrowDown: false } if (keys.ArrowUp) { player.y -= 5; } if (keys.ArrowDown) { player.y += 5; } if (keys.ArrowLeft) { player.x -= 5; } if (keys.ArrowRight) { player.x += 5; } car.style.top = player.y + "px"; car.style.left = player.x + "px"; window.requestAnimationFrame(gamePlay) } function start() { let car = document.createElement('div'); car.setAttribute('class', 'car') gameArea.appendChild(car); gameArea.classList.remove('hide'); startScreen.classList.add('hide'); player.start = true; player.y = car.offsetTop; player.x = car.offsetLeft; console.log(car.offsetTop); car.style.top = player.y + "px"; car.style.left = player.x + "px"; console.log(car) } let car = document.querySelector('.car');

 .car { width: 50px; height: 70px; background: red; position: absolute; left: 50px; top: 120px; }.hide { display: none; }

 <.DOCTYPE html> <html lang="en"> <head> <title>Car Game</title> </head> <body> <div class="carGame"> <div class="score"> </div> <div class="startScreen"> <p> Arrow keys to move <br> If you hit another car you will lose. <button id="startGame">Start Game</button> </p> </div> <div class="gameArea hide"></div> </div> </body> </html>

我正在创建 javascript 汽车游戏，但我试图通过箭头键移动我的汽车，但它没有移动。 请告诉我我的代码中有什么错误，我希望当我按下箭头键时它会左右移动请检查我的代码中的错误

Answer 1

当前代码在按下键时不会尝试移动.car元素。 它所做的只是将 object 属性设置为true ：

keys[e.key] = true;

我建议创建另一个 function, moveCar() ，它可以从keyDown事件侦听器中调用。 这个 function 将保存当前在gamePlay()中找到的定位逻辑。

此外，当您创建car元素时，请将其分配给整个应用程序都可以访问的变量。

 let score = document.querySelector(".score"); let startScreen = document.querySelector(".startScreen"); let gameArea = document.querySelector(".gameArea"); let startGame = document.querySelector("#startGame"); let car; /* This will reference the `car` element once created */ let keys = { ArrowUp: false, ArrowLeft: false, ArrowRight: false, ArrowDown: false }; let player = { speed: 5 }; startGame.addEventListener("click", start); console.log(gameArea); document.addEventListener("keydown", keyDown); document.addEventListener("keyup", keyUp); function keyDown(e) { keys[e.key] = true; e.preventDefault(); //console.log(e.key); // console.log(keys); moveCar(); } function keyUp(e) { e.preventDefault(); keys[e.key] = false; console.log(e.key); console.log(keys); } function gamePlay() { // console.log('now play the game'); let keys = { ArrowUp: false, ArrowLeft: false, ArrowRight: false, ArrowDown: false }; window.requestAnimationFrame(gamePlay); } function start() { car = document.createElement("div"); car.setAttribute("class", "car"); gameArea.appendChild(car); gameArea.classList.remove("hide"); startScreen.classList.add("hide"); player.start = true; player.y = car.offsetTop; player.x = car.offsetLeft; console.log(car.offsetTop); car.style.top = player.y + "px"; car.style.left = player.x + "px"; console.log(car); } function moveCar() { if (keys.ArrowUp) { player.y -= 5; } if (keys.ArrowDown) { player.y += 5; } if (keys.ArrowLeft) { player.x -= 5; } if (keys.ArrowRight) { player.x += 5; } car.style.top = player.y + "px"; car.style.left = player.x + "px"; }

 .car { width: 50px; height: 70px; background: red; position: absolute; left: 50px; top: 120px; }.hide { display: none; }

 <div class="carGame"> <div class="score"> </div> <div class="startScreen"> <p> Arrow keys to move <br> If you hit another car you will lose. <button id="startGame">Start Game</button> </p> </div> <div class="gameArea hide"></div> </div>

汽车游戏中的箭头键

问题描述

1 个解决方案

解决方案1
0 2020-06-11 11:13:37

汽车游戏中的箭头键

问题描述

1 个解决方案

解决方案1 0 2020-06-11 11:13:37

解决方案1
0 2020-06-11 11:13:37