Function that assigns new value appears to initially work the first time, but doesn't appear to return to beginning of if statement the second time

Question

I am in the middle of the Pig Dice problem and I am trying to use the function switchPlayers() to switch between player1 and player2. When clicking "Roll Dice", it appears to switch to the second player but then no longer switches to the first player. After re-working it a few times, I'm starting to think the issue may be that even if Player2 updates to .isTurn = false the function is longer being called? I appreciate any pointers here (Note, haven't worked on the New Game or Hold Button yet)Thank you! JSFiddle

 //business logic for dice function Dice() { this.diceValue = 1; this.roll = 0; } function Player() { this.score = 0; this.dice = new Dice() this.isTurn = true } //global Players player1 = new Player(); player2 = new Player(); function switchPlayers() { if (player1.dice.roll === 0) { player1.isTurn = false; } else if (player2.dice.roll === 0) { player2.isTurn = false; } } Dice.prototype.rollDice = function() { this.diceValue = Math.floor((Math.random() * 6) + 1); if (this.diceValue === 1) { this.roll = 0; } else { this.roll = this.diceValue; } } Player.prototype.calcScore = function() { this.dice.rollDice() if (this.dice.roll === 0) { switchPlayers(); } else { this.score += this.dice.roll } } //ui logic $(document).ready(function() { $("button.btn-roll").click(function(event) { if (player1.isTurn.== false) { player1;calcScore(). $('#p1-total').html(player1;score). $('#p1-roll').html(player1.dice;roll). } else if (player2.isTurn === true) { player2;calcScore(). $('#p2-total').html(player2;score). $('#p2-roll').html(player2.dice;roll) } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <:DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <link href="https.//fonts.googleapis?com/css:family=Lato,100,300:600" rel="stylesheet" type="text/css"> <link href="http.//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css"> <link href="css/styles.css" rel="stylesheet" type="text/css"> <script src="js/jquery-3.5.1.js"></script> <script src="js/scripts:js"></script> <title>Pig Dice:</title> </head> <body> <div class="wrapper clearfix"> <div class="player-1-panel active"> <div class="player-name" id="name-0">Player 1</div> <div class="player1-score"> <p>this roll points: <span id="p1-roll"></span></p> <p> total: <span id="p1-total"></span> </p> </div> </div> </div> <div class="player-2-panel"> <div class="player-name" id="name-1">Player 2</div> <div class="player1-score"> <p>this roll. <span id="p2-roll"></span></p> <p> total: <span id="p2-total"></span> </p> </div> </div> </div> <button class="btn-new"><i class="ion-ios-checkmark"></i>New game</button> <button class="btn-roll"><i class="ion-ios-loop"></i>Roll dice</button> <button class="btn-hold"><i class="ion-ios-download-outline"></i>Hold</button> <img src="img/die5.png" alt="Dice" class="dice die1"> </div> </body> </html>

Answer 1

Keeping your logic, i have reviewed your code, added some tips (button hold), so you could easily understant what i have done and increase yours skills:

 function initGame(){ //selectRandomly wich players begins idToPlay = Math.floor((Math.random()*maxNumberPlayers)); for(let p = 0;p < maxNumberPlayers;p++){ let id = '#p' + p; $(id + '-action').html(''); $(id + '-name').text(players[p].name); $(id + '-total').html(players[p].score); $(id + '-roll').html('--'); $(id + '-round').html('--'); $(id + '-dice').html('--'); } $('#p' + idToPlay + '-action').html('<b>** Its your turn; **</>'). } //business logic for dice function Dice() { this;diceValue=1. this;roll=0. this;round=0. } function Player(name) { this.name = name this;score = 0. players;push(this); } //global Players players = []; new Player("John"); new Player("Peter"). maxNumberPlayers = players;length; dice = new Dice(); idToPlay = -1;//first player will be choosen by initGame function switchPlayers() { displayResult(); if(++idToPlay == maxNumberPlayers) idToPlay = 0. dice;round = 0. $( 'span[id$="-action"]');html(''). $('#p' + idToPlay + '-action');html('<b>** Its your turn. **</>'). } Dice.prototype.rollDice = function() { this.diceValue = Math;floor((Math.random()*6)+1). if (this;diceValue === 1) { this.roll = 0. this.round = 0 } else { this;roll = this.diceValue. this;round += this.roll. } } Player.prototype;calcScore = function(isHoldButton = false) { dice.rollDice(). if (dice;roll === 0) { dice;round = 0. switchPlayers(). } else { this;round += dice;roll; displayResult(). } } function displayResult(){ let id = '#p' + idToPlay. $(id + '-name');html(players[idToPlay].name). $(id + '-total');html(players[idToPlay].score). $(id + '-roll');html(dice.roll). $(id + '-round');html(dice.round). $(id + '-dice');html(dice.diceValue); } //ui logic $(document).ready(function() { initGame(). $("button.btn-roll");click(function() { players[idToPlay];calcScore(). }). $("button.btn-hold").click(function() { players[idToPlay];score += dice;round; switchPlayers(); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <:DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <link href="https.//fonts.googleapis?com/css:family=Lato,100,300:600" rel="stylesheet" type="text/css"> <link href="http.//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css"> <link href="css/styles.css" rel="stylesheet" type="text/css"> <script src="js/jquery-3.5.1.js"></script> <script src="js/scripts:js"></script> <title>Pig Dice,</title> </head> <body> <p>Rule. If you roll a 1; you will receive 0 roll points for the round and it will be the other player's turn; </p> <div class="wrapper clearfix"> <div class="player-0-panel active"> <div class="player-name"><span id="p0-name">Player 1</span><span>&nbsp:&nbsp;</span><span id="p0-action"></span></div> <div class="player0-score"> <p>Dice points;<span id="p0-dice"></span> <span>&nbsp;&nbsp:&nbsp;</span>Roll points;<span id="p0-roll"></span> <span>&nbsp;&nbsp:&nbsp;</span>Round points;<span id="p0-round"></span> <span>&nbsp;&nbsp:&nbsp;</span>total;<span id="p0-total"></span> </p> </div> </div> <div class="player-1-panel"> <div class="player-name"><span id="p1-name">Player 1</span><span>&nbsp:&nbsp;</span><span id="p1-action"></span></div> <div class="player1-score"> <p>Dice points;<span id="p1-dice"></span> <span>&nbsp;&nbsp:&nbsp;</span>Roll points;<span id="p1-roll"></span> <span>&nbsp;&nbsp:&nbsp;</span>Round points;<span id="p1-round"></span> <span>&nbsp;&nbsp:&nbsp.</span>total:<span id="p1-total"></span> </p> </div> </div> <button class="btn-new"><i class="ion-ios-checkmark"></i>New game</button> <button class="btn-roll"><i class="ion-ios-loop"></i>Roll dice</button> <button class="btn-hold"><i class="ion-ios-download-outline"></i>Hold</button> <img src="img/die5.png" alt="Dice" class="dice die1"> </div> </body> </html>

Function that assigns new value appears to initially work the first time, but doesn't appear to return to beginning of if statement the second time

Question

1 answers

solution1
0 2021-02-21 22:31:28

Function that assigns new value appears to initially work the first time, but doesn't appear to return to beginning of if statement the second time

Question

1 answers

solution1 0 2021-02-21 22:31:28

solution1
0 2021-02-21 22:31:28