Html Car Game with speed - html

Question

Statement
Increase the speed of the player by 1 after every 5 seconds, starting speed should always be 5.
Increment the score only when the rear end of my Car (yellow) has passed the rear end of an enemy Car(green). The score should be incremented by 10 at each passing. Score shouldn’t increment in any other case.
Prerequisites
Starting speed is not 5 after restarting the game.
Speed goes from 5 to 6 in less than 5 seconds after restarting the game.
Speed is incrementing very fast after restarting the game 3-4 times.
Score is incremented when the enemy car passes the end of screen instead of my Car.
Sometimes, the score is not incremented during the passing, when my Car is also moving upwards at the time of passing.
Score is still continuously incrementing like before.
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);
}
}
* {
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;
}
<div class="carGame">
<div class="score"></div>
<div class="startScreen">
<p>
press here to start Arrow key to move if you hit another car you will lose.
</p>
</div>
<div class="gameArea"> </div>
</div>

Answer 1

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
*{margin: 0; padding: 0; font-family: Arial, Helvetica, sans-
serif;}
.hide{ display: none; }
.carGame{
width: 100%;
height: 100vh;
background-image: url('bg.png');
background-repeat: no-repeat;
background-size: 100% 100%;
}
.myCar{
width: 50px;
height: 90px;
/* background: red; */
position: absolute;
bottom: 120px;
background-image: url('car2.png');
background-repeat: no-repeat;
background-size: 100% 100%;
}
.enemyCar{
width: 30px;
height: 60px;
/* background: red; */
position: absolute;
bottom: 120px;
background-image: url('car4.png');
/* border-radius: 15px; */
background-repeat: no-repeat;
background-size: 100% 100%;
}
.lines{
width: 10px;
height: 100px;
background: white;
position: absolute;
margin-left: 195px;
}
.gameArea{
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;
}
.startScreen{
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;
}
</style>
</head>
<body>
<div class="carGame">
<div class="score"></div>
<div class="startScreen">
<p>
press here to start <br>
Arrow key to move <br>
if you hit another car you will lose.
</p>
</div>
<div class="gameArea "> </div>
</div>
<script>
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){
aRect = a.getBoundingClientRect();
bRect = b.getBoundingClientRect();
return !((aRect.bottom < bRect.top) ||
(aRect.top > bRect.bottom) ||
(aRect.right < bRect.left) ||
(aRect.left > bRect.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 <br> Your final socre is " + player.score
+ " <br> 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";
window.requestAnimationFrame(runGame);
player.score++;
score.innerText = "Score: " + player.score + "\nSpeed: " + 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);
}
}
</script>
</body>
</html>