Помогите разобраться в игре (JavaScript)

https://github.com/Access42code/BANDA/compare/main...Game-Ruletka

Делаю игру не получается сделать 1сначала крутился барабан 2потом пропадала пуля и барабан продолжает крутится 3потом барабан останавливается и меняется текст на кнопке для выстрела 4в конце вокруг проигравшего должно появится пятно крови

   var countShot = 0;
    var bulletPosition = random(1,6);
    var btnShot = document.querySelector("#shot");
    var currentPlayer = 1;
    var baraban = document.querySelector("#baraban");
    btnShot.onclick = shot;

    
//First click
    function start() {
        btnShot.className = "off";
        var bullet = document.querySelector("#bullet");
            bullet.style.display = "block";

        var revolver = document.querySelector("#revolver");   
            console.dir(revolver);
            revolver.style.display = "block";

        btnShot.onclick = "";
        var rotate = 0;
        var timer = setInterval(function() {
            rotate = rotate+ 10 ;
                baraban.style.transform = "rotate(" + rotate + "deg)";
                if(rotate > 300) {
                    bullet.style.display = "none";
                }
                if(rotate == 720) {
                    clearInterval(timer);
                    btnShot.innerText = "Сделать выстрел";    
                    btnShot.onclick = shot;
            
                    btnShot.className = "";
                }
        }, 50)

        }
    
    //случайное число
    function random(min, max) {
        return Math.floor( Math.random() * (max - min) + min);
    }
    
    var rotateBaraban = 0;
    function shot() {
        countShot = countShot + 1;

        if(bulletPosition == countShot) {
            var blood = document.createElement("div");
            blood.id = "blood" ;

            var player = document.querySelector( "#player" + currentPlayer);
            console.log(player);
                player.appendChild(blood);

            endGame();
        } else {

            if (currentPlayer == 1) {
                rotationRight();
                currentPlayer = 2;
            }else {
                rotationLeft();
                currentPlayer = 1;
            }
            var rotate = rotateBaraban;
            var timer = setInterval(function() {
                rotate = rotateBaraban + 10;
                baraban.style.transform = "rotate(" + rotate + "deg)";

                if(rotate = rotateBaraban + 60) {
                    clearInterval(timer);
                    rotateBaraban = rotate;
                }
            }, 10)
        }

        alert(countShot);
    }
    //поворот револьвера
    var revolver = document.querySelector("#revolver");
    function rotationRight() {
        revolver.style.background = `url("images/revolver-right.png")`
    }
    rotationRight();

    function rotationLeft() {
        revolver.style.background = `url("images/revolver-left.png")`
    }
    rotationLeft();
//конец игры
    function endGame() {
        alert("Конец игры");
        btnShot.innerText = "Рестарт";
        btnShot.onclick = restart;
        location.reload();
        
    }
//заново перезагрузить страницу
    function restart() {
        location.reload();
    }
body, html {
    margin: 0;
    padding: 0;
    width: 100%;
}

body {
    background-image: url("images/bg.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#game {
    width: 470px;
    height: 200px;
    margin: 250px auto 0;
    position: relative;
}

#revolver {
    background: url("images/revolver-left.png") no-repeat;
    width: 146px;
    height: 84px;
    background-size: cover;
    position: absolute;
    top: -90px;
    left: calc(50% - 73px);

}

#baraban {
    background: url("images/baraban.png") no-repeat;
    position: absolute;
    left: calc(50% - 60px);
    top: 0;
    width: 120px;
    height: 125px;
    background-size: cover;
}

#bullet {
    background: url("images/bullets.png") no-repeat;
    position: absolute;
    left: 62px;
    top: 10px;
    width: 65px;
    height: 65px;
    background-size: cover;

}
.user {
    font-family: 'Roboto Slab', serif;
    color: #fff;
    font-size: 12px;
    text-align: center;
    width: 150px;
    position: absolute;
}

#player1 {
    top: 20px;
    left: 0;
}

#player2 {
    top: 20px;
    right: 0;
}

#shot {
    position: absolute;
    width: 150px;
    height: 35px;
    left: calc(50% - 75px);
    top: 160px;
    background: #4F463B;
    border-radius: 25px;
    font-family: 'Roboto Slab', serif;
    font-size: 12px;
    color: #FFFFFF;
    border: none;
    cursor: pointer;
    outline: none;
}
#shot:hover {
    background: #4F463B;
    box-shadow: 0px 8px 24px rgba(255, 255, 255, 0.25);
}
#shot:active { 
    background: #302D29;
}
#shot.off {
    background: #302D29;
    cursor: default;
}
#shot.off:hover {
    background: #302D29;
    cursor: default;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

#blood {
    background: url("images/blood.png") no-repeat;
    width: 242px;
    height: 230px;
    position: absolute;
    z-index: -99;
}
#blood.player1 {
    top: -81px;
    left: -53px;
}
#blood.player2 {
    top: -81px;
    left: -34px;
    transform: scale(-1, 1);
}
<html>
<head>
    <meta charset="utf8"/>
    <title>Russian roulette</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div id="game">
    <div class="user" id="player1">
        <img src="images/user1.png"/>
        <p>Ты</p>
    
    </div>

    <div id="revolver"></div>

    <div id="baraban">
        <div id="bullet"></div>
    </div>
    
    <div class="user" id="player2">
        <img src="images/user2.png"/>
        <p>Твой оппонент</p>
    </div>

    <button id="shot">Начать</button>
</div>

<script src="script.js"></script>
</body>
</html>


Ответы (0 шт):