1

im making a web based game but the problem is that the the same happens every round the same balls die in the same order and same ending every time nothing changes i dont know what i the problem (basically no randomizing) the idea of the game(russian-roulette) : there is a 1 in 6 chance of dying when you hit the button and it goes every player starting from the left one to the end which is the bottom left ball and the if you hit the button your and the loaded value is the same as the shot value you die. you win by surviving
and please if you have a solution explain it because im a beginner at this and thank you

var shot = (Math.floor(Math.random() * 6) + 1);
var loaded = (Math.floor(Math.random() * 6) + 1);
var players = 0;
var shootbtn = document.getElementById("shootbtn");
var tabletext = document.getElementById("tableP");
var lucktext = document.getElementById("tableluck");
var balls = document.getElementsByClassName('ball');
var won = document.getElementById("won");

shootbtn.addEventListener("click", shoot);

function shoot() {

  if (players = balls.length) {
    players = 0;
  }
  if (loaded == shot) {
    balls[players].remove();
    tabletext.currentTime = 0;
    tabletext.classList.add("ani");
    setTimeout(function() {
      tabletext.classList.remove("ani");
    }, 1001);
    shot = (Math.floor(Math.random() * 6) + 1);
    loaded = (Math.floor(Math.random() * 6) + 1);
    if (loaded > 6) {
      loaded = 1;
    }
    console.log('u dead');
  } else {
    lucktext.currentTime = 0;
    lucktext.classList.add("ani");
    setTimeout(function() {
      lucktext.classList.remove("ani");
    }, 1001);
    loaded = loaded + 1;
    if (loaded > 6) {
      loaded = 1;
    }
    console.log("ur lucky this time");
    players = players + 1;

  }
}
body {
  margin: 0px;
  background-color: #1a1a1a;
}

.table {
  height: 600px;
  width: 1000px;
  background-color: gray;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 2px;
  text-align: center;
  font-size: 100px;
}

.balls {
  border-radius: 100%;
  height: 100px;
  width: 100px;
  background-color: white;
  margin-left: 100px;
  display: inline-block;
  margin-right: 100px;
  margin-top: 30px;
  text-align: center;
}

.ballsdown {
  border-radius: 100%;
  height: 100px;
  width: 100px;
  background-color: white;
  margin-left: 100px;
  display: inline-block;
  margin-right: 100px;
  position: relative;
  top: 680px;
  text-align: center;
}

.ballsleft {
  border-radius: 100%;
  height: 100px;
  width: 100px;
  background-color: white;
  left: 250px;
  position: absolute;
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  text-align: center;
}

.ballsright {
  border-radius: 100%;
  height: 100px;
  width: 100px;
  background-color: white;
  right: 250px;
  position: absolute;
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  text-align: center;
}

button {
  width: 100px;
  height: 100px;
  top: 30px;
  left: 30px;
  position: absolute;
  font-size: 20px;
  text-align: center;
  background-color: lightgrey;
  border-radius: 3px;
}

.tableP {
  font-size: 100px;
  opacity: 0;
}

.tableluck {
  font-size: 100px;
  opacity: 0;
}

.ani {
  animation: text 1s forwards;
}

@keyframes text {
  0% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="rrcss.css">

  <title>R-R</title>
</head>

<body>


  <div id="table" class="table">
    <p class="tableP " id="tableP">You died</p>
    <p class="tableluck" id="tableluck">You survived</p>
  </div>


  <div id="leftChairs" class="leftChairs">

    <div class="ballsleft ball" id="left" style="background-color: purple;"></div>

  </div>


  <div id="topChairs" class="topch">
    <center>
      <div class="balls ball" id="topo" style="background-color: darkred;"></div>
      <div class="balls ball" id="topt" style="background-color: olive; "></div>
    </center>
  </div>


  <div id="rightChairs" class="rightChairs">
    <div class="ballsright ball" id="right" style="background-color: #4b3621;"></div>
  </div>

  <div id="bottomChairs" class="bottomch ">

    <center>
      <div class="ballsdown ball" id="boto" style="background-color: darkblue;"></div>
      <div class="ballsdown ball" id="bott" style="background-color: darkgreen;"></div>
    </center>

  </div>


  <div><button id=shootbtn>Pull the trigger</button></div>
  <script type="text/javascript" src="rrjs.js"></script>
</body>

</html>
LeeLenalee
  • 27,463
  • 6
  • 45
  • 69
Mfa
  • 39
  • 5
  • I can't replicate this - when reloading the code snippet and pressing the button 5 times, I got a different result every time. Sometimes I died on the first click, sometimes on the 3rd, sometimes the 6th, etc. Results seem random, as expected. – WOUNDEDStevenJones Sep 07 '21 at 19:46
  • @WOUNDEDStevenJones thats not the problem, problem is that the players always die in the same order, so the number of shots is different but the order they die in is the same each time – LeeLenalee Sep 07 '21 at 20:04
  • Ah, I was only viewing the snippet in the small/default view, so I wasn't seeing the full UI and was relying on the console logs to determine what happened. After making the snippet full screen, I was seeing the issue. – WOUNDEDStevenJones Sep 07 '21 at 21:38

1 Answers1

2

Problem is the assignment in your first if statement, you kept reasigning players to balls.length so it will always have the same outcome

var shot = (Math.floor(Math.random() * 6) + 1);
var loaded = (Math.floor(Math.random() * 6) + 1);
var players = 0;
var shootbtn = document.getElementById("shootbtn");
var tabletext = document.getElementById("tableP");
var lucktext = document.getElementById("tableluck");
var balls = document.getElementsByClassName('ball');
var won = document.getElementById("won");

shootbtn.addEventListener("click", shoot);

function shoot() {

  if (players === balls.length) { // This line was wrong, there was a single = which meant it was reasigning the value instead of checking against it
    players = 0;
  }
  if (loaded == shot) {
    balls[players].remove();
    tabletext.currentTime = 0;
    tabletext.classList.add("ani");
    setTimeout(function() {
      tabletext.classList.remove("ani");
    }, 1001);
    shot = (Math.floor(Math.random() * 6) + 1);
    loaded = (Math.floor(Math.random() * 6) + 1);
    if (loaded > 6) {
      loaded = 1;
    }
    console.log('u dead');
  } else {
    lucktext.currentTime = 0;
    lucktext.classList.add("ani");
    setTimeout(function() {
      lucktext.classList.remove("ani");
    }, 1001);
    loaded = loaded + 1;
    if (loaded > 6) {
      loaded = 1;
    }
    console.log("ur lucky this time");
    players = players + 1;

  }
}
body {
  margin: 0px;
  background-color: #1a1a1a;
}

.table {
  height: 600px;
  width: 1000px;
  background-color: gray;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 2px;
  text-align: center;
  font-size: 100px;
}

.balls {
  border-radius: 100%;
  height: 100px;
  width: 100px;
  background-color: white;
  margin-left: 100px;
  display: inline-block;
  margin-right: 100px;
  margin-top: 30px;
  text-align: center;
}

.ballsdown {
  border-radius: 100%;
  height: 100px;
  width: 100px;
  background-color: white;
  margin-left: 100px;
  display: inline-block;
  margin-right: 100px;
  position: relative;
  top: 680px;
  text-align: center;
}

.ballsleft {
  border-radius: 100%;
  height: 100px;
  width: 100px;
  background-color: white;
  left: 250px;
  position: absolute;
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  text-align: center;
}

.ballsright {
  border-radius: 100%;
  height: 100px;
  width: 100px;
  background-color: white;
  right: 250px;
  position: absolute;
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  text-align: center;
}

button {
  width: 100px;
  height: 100px;
  top: 30px;
  left: 30px;
  position: absolute;
  font-size: 20px;
  text-align: center;
  background-color: lightgrey;
  border-radius: 3px;
}

.tableP {
  font-size: 100px;
  opacity: 0;
}

.tableluck {
  font-size: 100px;
  opacity: 0;
}

.ani {
  animation: text 1s forwards;
}

@keyframes text {
  0% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="rrcss.css">

  <title>R-R</title>
</head>

<body>
  <div id="table" class="table">
    <p class="tableP " id="tableP">You died</p>
    <p class="tableluck" id="tableluck">You survived</p>
  </div>
  <div id="leftChairs" class="leftChairs">
    <div class="ballsleft ball" id="left" style="background-color: purple;"></div>
  </div>
  <div id="topChairs" class="topch">
    <center>
      <div class="balls ball" id="topo" style="background-color: darkred;"></div>
      <div class="balls ball" id="topt" style="background-color: olive; "></div>
    </center>
  </div>
  <div id="rightChairs" class="rightChairs">
    <div class="ballsright ball" id="right" style="background-color: #4b3621;"></div>
  </div>
  <div id="bottomChairs" class="bottomch ">
    <center>
      <div class="ballsdown ball" id="boto" style="background-color: darkblue;"></div>
      <div class="ballsdown ball" id="bott" style="background-color: darkgreen;"></div>
    </center>
  </div>
  <div><button id=shootbtn>Pull the trigger</button></div>
  <script type="text/javascript" src="rrjs.js"></script>
</body>

</html>
LeeLenalee
  • 27,463
  • 6
  • 45
  • 69