Помогите разобраться в игре (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>