HTML Car Game со скоростью ⇐ Html

[Anonymous]

оператор < /p>

Увеличьте скорость игрока на 1 через каждые 5 секунд, начальная скорость всегда должна быть 5. Оценка должна быть увеличена на 10 на каждом прохождении. Оценка не должна увеличиваться в любом другом случае. < /Li>
< /ol>
Пререквизиты < /p>

Начальная скорость не составляет 5 после перезапуска игры. < /Li>
Скорость идет с 5 до 6 за 5 секунд после перезагрузки игры. 3-4 раза. < /Li>
Оценка увеличивается, когда вражеский автомобиль проходит конец экрана вместо моего автомобиля. < /Li>
Иногда оценка не увеличивается во время прохождения, когда мой автомобиль также движется вверх во время прохождения. class = "Snippet">

Код: Выделить всё

const score = document.querySelector('.score');
const startScreen = document.querySelector('.startScreen');
const gameArea = document.querySelector('.gameArea');

startScreen.addEventListener('click', initializeGame);

let player = {
speed: 5,
score: 0
};

let keys = {
ArrowUp: false,
ArrowDown: false,
ArrowLeft: false,
ArrowRight: false
}

document.addEventListener('keydown', keyDown);
document.addEventListener('keyup', keyUp);

function keyDown(e) {
e.preventDefault();
keys[e.key] = true;
}

function keyUp(e) {
e.preventDefault();
keys[e.key] = false;
}

function isCollide(a, b) {
aRectangle = a.getBoundingClientRect();
bRectangle = b.getBoundingClientRect();

return !((aRectangle.bottom < bRectangle.top) ||
(aRectangle.top > bRectangle.bottom) ||
(aRectangle.right < bRectangle.left) ||
(aRectangle.left > bRectangle.right))
}

function moveLines() {
let lines = document.querySelectorAll('.lines');
lines.forEach(function(item) {
if (item.y >= 700) {
item.y -= 750;
}
item.y += player.speed;
item.style.top = item.y + "px";
})
}

function endGame() {
player.start = false;
startScreen.classList.remove('hide');
startScreen.innerHTML = "Game over  Your final score is " + player.score +
"  press here to restart the game.";
}

function moveEnemy(myCar) {
let enemyCarList = document.querySelectorAll('.enemyCar');
enemyCarList.forEach(function(enemyCar) {
if (isCollide(myCar, enemyCar)) {
endGame();
}

if (enemyCar.y >= 750) {
enemyCar.y = -300;
enemyCar.style.left = Math.floor(Math.random() * 350) + "px";
}

enemyCar.y += player.speed;
enemyCar.style.top = enemyCar.y + "px";
})
}

function runGame() {

let car = document.querySelector('.myCar');
let road = gameArea.getBoundingClientRect();

if (player.start) {
moveLines();
moveEnemy(car);

if (keys.ArrowUp && player.y > (road.top + 150)) {
player.y -= player.speed
}
if (keys.ArrowDown && player.y < (road.bottom - 85)) {
player.y += player.speed
}
if (keys.ArrowLeft && player.x > 0) {
player.x -= player.speed
}
if (keys.ArrowRight && player.x < (road.width - 50)) {
player.x += player.speed
}

car.style.top = player.y + "px";
car.style.left = player.x + "px";

player.score++;
score.innerText = "Score: " + player.score + "\n Speed: " + player.speed;

}
}

function initializeGame() {
startScreen.classList.add('hide');
gameArea.innerHTML = "";

player.start = true;
player.score = 0;
window.requestAnimationFrame(runGame);

for (x = 0; x < 5; x++) {
let roadLine = document.createElement('div');
roadLine.setAttribute('class', 'lines');
roadLine.y = (x * 150)
roadLine.style.top = roadLine.y + "px";
gameArea.appendChild(roadLine);

}

let car = document.createElement('div');
car.setAttribute('class', 'myCar');
gameArea.appendChild(car);

player.x = car.offsetLeft;
player.y = car.offsetTop;

for (x = 0; x < 3; x++) {
let enemyCar = document.createElement('div');
enemyCar.setAttribute('class', 'enemyCar');
enemyCar.y = ((x + 1) * 350) * -1;
enemyCar.style.top = enemyCar.y + "px";
enemyCar.style.left = Math.floor(Math.random() * 350) + "px";
gameArea.appendChild(enemyCar);
}

}< /code>
* {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}

.hide {
display: none;
}

.car Game {
width: 100%;
height: 100vh;
background-image: ;
background-repeat: no-repeat;
background-size: 100% 100%;
}

.my Car {
width: 50px;
height: 90px;
/* background: red; */
position: absolute;
bottom: 120px;
background-image: u r l('');
background-repeat: no-repeat;
background-size: 100% 100%;
}

.enemy Car {
width: 30px;
height: 60px;
/* background: red;  */
position: absolute;
bottom: 120px;
background-image: ('');
/* border-radius: 15px; */
background-repeat: no-repeat;
background-size: 100% 100%;
}

.lines {
width: 10px;
height: 100px;
background: white;
position: absolute;
margin-left: 195px;
}

.game Area {
width: 400px;
height: 100vh;
background: #2d3436;
margin: auto;
position: relative;
overflow: hidden;
border-right: 7px dashed #c8d6e5;
border-left: 7px dashed #c8d6e5;
}

.score {
position: absolute;
top: 15px;
left: 40px;
background: #10ac84;
width: 300px;
line-height: 70px;
text-align: center;
color: white;
font-size: 1.5rem;
font-family: Arial, Helvetica, sans-serif;
box-shadow: 0 5px 5px #777;
}

.start Screen {
position: absolute;
background-color: #ee5253;
left: 24%;
top: 40%;
transform: translate(-50% -50%);
color: white;
z-index: 1;
text-align: center;
border: 1px solid #ff6b6b;
padding: 15px;
margin: auto;
width: 50%;
cursor: pointer;
letter-spacing: 5;
font-size: 20px;
word-spacing: 3;
line-height: 30px;
text-transform: uppercase;
box-shadow: 0 5px 5px #777;
}< /code>




press here to start Arrow key to move if you hit another car you will lose.

Подробнее здесь: https://stackoverflow.com/questions/753 ... with-speed