nfs/script.js

const  score = document.querySelector('.score'),
    start = document.querySelector('.start'),
    gameArea = document.querySelector('.gameArea'),
    selectDif = document.getElementsByName('rdo')
    car = document.createElement('div');

const audio = new Audio();

selectDif.forEach(el => {
    el.addEventListener('click', startGame);
})
document.addEventListener('keydown', startRun);
document.addEventListener('keyup', stopRun);

car.classList.add('car');

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

const settings = {
    start: false,
    score: 0,
    speed: 4,
    traffic: 3
}

const playBack = {
    conposition: 'mp3/Need For Speed.mp3',
    paused: false
}

function getQuantityElements(elementHeight) {
    return document.documentElement.clientHeight / elementHeight + 1;
}

function startGame() {
    gameArea.innerHTML = '';
    selectDif.forEach(el => {
        if (el.checked) {
            const value = +el.value
            switch (value) {
                case 1:
                    settings.speed = 3;
                    settings.traffic = 3;
                    break;
                    case 2:
                        settings.speed = 4;
                        settings.traffic = 2;
                        break;
                    case 3:
                        settings.speed = 5;
                        settings.traffic = 2;
                        break;
                        
                        default:
                            break;
                        }
                        }
                    })
    soundPlay();
    start.classList.add('hide');
    settings.score = 0;
    settings.start = true;
    addLines(getQuantityElements(100));
    gameArea.appendChild(car);
    car.style.left = '125px';
    car.style.top = 'auto';
    car.style.bottom = '10px';
    settings.x = car.offsetLeft;
    settings.y = car.offsetTop;
    requestAnimationFrame(playGame);
    let counter = 0;
    const startTitle = document.createElement('div');
    startTitle.classList.add('startTitle');
    startTitle.innerText = 'Поехали!';
    const starting = setInterval(() => {
        car.style.display = 'block';
        setTimeout(() => {
            if (counter > 4) {
                car.style.display = 'block';
                gameArea.appendChild(startTitle);
                clearInterval(starting);
                setTimeout(() => {
                    startTitle.style.display = 'none'
                    addEnemies(getQuantityElements(100 * settings.traffic));
                }, 2000)
            } else {
                car.style.display = 'none';
            }
        }, 250);
        counter++;
    }, 500)
}

function getRandomIntInclusive(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1)) + min; //Максимум и минимум включаются
  };

function addLines(num) {
    for (let i = 0; i < num; i++) {
        const line = document.createElement('div');
        line.classList.add('line');
        line.style.top = i * 100 + 'px';
        line.y = i * 100;
        gameArea.appendChild(line); 
    }
}

function addEnemies(num) {
    for (let i = 0; i < num; i++) {
        const enemy = document.createElement('div');
        enemy.classList.add('enemy');
        enemy.y = -100 * settings.traffic * (i + 1);
        enemy.style.top = enemy.y + 'px';
        enemy.style.left = getRandomIntInclusive(50, gameArea.offsetWidth - 50) + 'px';
        gameArea.appendChild(enemy); 
        const enemyModel = getRandomIntInclusive(1, 9);
        enemy.style.background = `transparent url('./image/enemy${enemyModel}.png') center / cover no-repeat`
    }
}

function moveRoad() {
    let lines = document.querySelectorAll('.line');
    lines.forEach(line => {
        line.y += settings.speed;
        line.style.top = line.y + 'px';

        if (line.y >= document.documentElement.clientHeight) {
            line.y = -100;
        }
    })
}


function soundPlay() {
    audio.src = playBack.conposition;
    audio.autoplay = true;
    audio.loop = true;
  }

function crash() {
    start.classList.remove('hide');
    settings.start = false;
    start.style.top = score.offsetHeight;
    audio.pause();
    if (localStorage.NFJS) {
        if (localStorage.NFJS < settings.score) {
            alert('Поздравляем! Вы побили рекорд.');
            localStorage.NFJS = Math.floor(settings.score);
        } 
    } else {
        localStorage.NFJS = Math.floor(settings.score);
    }
}

function moveEnemy() {
    let enemies = document.querySelectorAll('.enemy');
    enemies.forEach(item => {
        let carRect  = car.getBoundingClientRect();
        let enemyRect  = item.getBoundingClientRect();
        if (carRect.top <= enemyRect.bottom && carRect.right >= enemyRect.left &&
            carRect.left <= enemyRect.right &&
            carRect.bottom >= enemyRect.top) {
            crash();
            }
        item.y += settings.speed / 2;
        item.style.top = item.y + 'px';

        if (item.y >= document.documentElement.clientHeight) {
            const enemyModel = getRandomIntInclusive(1, 9);
            item.style.background = `transparent url('./image/enemy${enemyModel}.png') center / cover no-repeat`
            item.style.left = getRandomIntInclusive(50, gameArea.offsetWidth - 50) + 'px';
            item.y = -100 * settings.traffic - 150;
        }
    })
}

function playGame() {
    if (settings.start) {
        score.innerHTML = 'SCORE: 0';
        moveRoad();
        if (document.querySelector('.enemy')) {
            moveEnemy()
            settings.score += settings.speed * (1.5 - settings.traffic / 10);
            score.innerHTML = 'SCORE: ' + Math.floor(settings.score)
        } 
        if (keys.ArrowLeft && settings.x > 0) {
            settings.x -= settings.speed;
        }
        if (keys.ArrowRight && settings.x < (gameArea.offsetWidth - car.offsetWidth)) {
            settings.x += settings.speed;
        }
        if (keys.ArrowDown && settings.y < (gameArea.offsetHeight - car.offsetHeight)) {
            settings.y += settings.speed;
        }
        if (keys.ArrowUp && settings.y > 0) {
            settings.y -= settings.speed;
        }
        car.style.left = settings.x + 'px';
        car.style.top = settings.y + 'px';
        requestAnimationFrame(playGame);
    }
}

function startRun(event) {
    if (keys.hasOwnProperty(event.key)) {
        event.preventDefault();
        keys[event.key] = true;
    }
}

function stopRun(event) {
    if (keys.hasOwnProperty(event.key)) {
        event.preventDefault();
        keys[event.key] = false;
    }
}