简体   繁体   中英

How to Change 2 Math.floor random numbers if they are equal

I'm trying to replicate the Monty Hall Problem, if you've heard of it, and I need to add in a system that will change one of two Math.floor random numbers when they are equal. My question is how do I change a variable that is random into another if it is equal to a second random variable. If you look into the Monty Hall Problem, the wrong variable would be an incorrect choice and door is correct, I set both to be random, but obviously, they cannot both be equal. This is what I have so far.

        setInterval(gr, 1000)

function gr() {
     if (wrong === door) {
        door = Math.floor((Math.random() * 3) + 1);
    }
}

         var door1 = 0;
var door2 = 0;
var door3 = 0;
var door;
var wrong; 
var attempt = 0;

var d1 = document.getElementById('door1');
var d2 = document.getElementById('door2');
var d3 = document.getElementById('door3');

setInterval(gr, 1000)

function gr() {
    if (wrong === door) {
    door = Math.floor((Math.random() * 3) + 1);
    }
}

function dr1() {
    document.getElementById('door1').style.pointerEvents = 'none';
    document.getElementById('door2').style.pointerEvents = 'none';
    document.getElementById('door3').style.pointerEvents = 'none';
    document.getElementById('door1').style.backgroundColor = "green";
    door1 = 1;
    if (door2 === 1) {
        document.getElementById('door2').style.backgroundColor = "black";
        door2 = 0;
    } else if (door3 === 1) {
        document.getElementById('door3').style.backgroundColor = "black";
        door3 = 0;
}
     if (attempt === 0) {
    wrong = Math.floor((Math.random() * 2) + 1);
    door = Math.floor((Math.random() * 3) + 1);
    if (wrong === 1) {
        document.getElementById('door2').style.backgroundColor = "white";
        change1a();
} else if (wrong === 2) {
    document.getElementById('door3').style.backgroundColor = "white";
    change1b();
      }
    }
    attempt = 1;
 }
 function dr2() {
    document.getElementById('door1').style.pointerEvents = 'none';
    document.getElementById('door3').style.pointerEvents = 'none';
    document.getElementById('door2').style.backgroundColor = "green";
    door2 = 1;
    if (door1 === 1) {
        document.getElementById('door1').style.backgroundColor = "black";
        door1 = 0;
        } else if (door3 === 1) {
        document.getElementById('door3').style.backgroundColor = "black";
        door3 = 0;
        }
        if (attempt === 0) {
    wrong = Math.floor((Math.random() * 2) + 1);
    door = Math.floor((Math.random() * 3) + 1);
    if (wrong === 1) {
        document.getElementById('door1').style.backgroundColor = "white";
        change2a();
    } else if (wrong === 2) {
        document.getElementById('door3').style.backgroundColor = "white";
        change2b();
    }
  }
    attempt = 1;
}
function dr3() {
    document.getElementById('door1').style.pointerEvents = 'none';
    document.getElementById('door2').style.pointerEvents = 'none';
    document.getElementById('door3').style.backgroundColor = "green";
    door3 = 1;
    if (door1 === 1) {
    document.getElementById('door1').style.backgroundColor = "black";
    door1 = 0;
    } else if (door2 === 1) {
        document.getElementById('door2').style.backgroundColor = "black";
        door2 = 0;
    }
    if (attempt === 0) {
    wrong = Math.floor((Math.random() * 2) + 1);
    door = Math.floor((Math.random() * 3) + 1);
    if (wrong === 1) {
        document.getElementById('door1').style.backgroundColor = "white";
        change3a();
    } else if (wrong === 2) {
        document.getElementById('door2').style.backgroundColor = "white";
        change3b();
    }
}
    attempt = 1;
}
  function change1a() {
    document.getElementById('door3').style.pointerEvents = "all";
}

function change1b() {
    document.getElementById('door2').style.pointerEvents = "all";
}

function change2a() {
    document.getElementById('door3').style.pointerEvents = "all";
}

function change2b() {
    document.getElementById('door1').style.pointerEvents = "all";
} 

}

I tried adapting your code, but it looked too messy for me to understand everything you wanted to do. So, instead, I decided to create my own, just for fun. You can get some inspiration in there.

To answer your specific question, this is the way I choose the door:

var selectedDoor = 1,
    correctDoor = 2,
    losingDoor = getLosingDoor();

function getLosingDoor() {
  var losingDoor;
  do {
    losingDoor = Math.floor((Math.random() * 3) + 1);
  } while ([correctDoor, selectedDoor].indexOf(losingDoor) > -1);

  return losingDoor;
}

Full demo

 // Create a MontyHall instance in the #app div var myMontyHall = MontyHall(document.getElementById('app')); function MontyHall(container) { var self = { // Will hold DOM references refs: null, // Will hold the MontyHall instance's state state: null, /* * Creates the doors in the DOM and in the state */ init: function() { self.state = { attempts: 0, doorCount: 3, correctDoor: self.getRandomInt(0, 3) }; self.refs = { container: container, instructions: document.createElement('p'), doorsWrapper: document.createElement('div'), doors: [] }; // Reset container self.refs.container.innerHTML = ''; // Setup a container for the doors self.refs.doorsWrapper.className = 'doors-wrapper'; self.refs.container.appendChild(self.refs.doorsWrapper); // Setup a container for instructions self.say('Please select a door.'); self.refs.container.appendChild(self.refs.instructions); // For each door for (var i=0; i<self.state.doorCount; i++) { // Create a div var el = document.createElement('div'); // Give it a class el.className = 'door'; // Add click event listener (function(index) { el.addEventListener('click', function(){ self.clickOnDoor(index); }); })(i); // Append it to the doors container self.refs.doorsWrapper.append(el); // Store a reference to it self.refs.doors.push(el); } return self; }, /* * Called when a door is clicked */ clickOnDoor: function(index) { self.state.selectedDoor = index; // If this is the first attempt if (self.state.attempts === 0) { // Show it is selected self.refs.doors[self.state.selectedDoor].classList.add('selected'); // Find a non selected losing door self.state.losingDoor = self.getLosingDoor(); // Open it self.refs.doors[self.state.losingDoor].classList.add('disabled', 'loser'); // Update instructions self.say( 'You selected door #' + (index + 1) + '.<br>' + 'I opened door #' + (self.state.losingDoor + 1) + ', ' + 'it contains a sheep.<br>' + 'You can now keep your choice, or change your mind.' ); self.state.attempts++; } else { // For each door self.refs.doors.forEach(function(el, i) { // Disable it el.classList.add('disabled'); // Show it as a winner or a loser el.classList.add(i === self.state.correctDoor ? 'winner' : 'loser'); // Show it as selected or not el.classList.toggle('selected', i === index); }); // Update instructions self.say( ( self.state.correctDoor === index ? '<span class="green">Congratulations, you won!</span>' : '<span class="red">Sorry, you lost...</span>' ) + '<br>' + 'The gold was behind door #' + (self.state.correctDoor + 1) + '.<br>' + '<button class="restart">Play again</button>' ); // Enable restart button self.refs.instructions.querySelector('.restart') .addEventListener('click', self.init); } }, /* * Returns the index of a losing door, which is not selected */ getLosingDoor: function() { var losingDoor; do { losingDoor = self.getRandomInt(0, self.state.doorCount); } while ([ self.state.correctDoor, self.state.selectedDoor ].indexOf(losingDoor) > -1); return losingDoor; }, /* * Sets the instructions innerHTML */ say: function(html) { self.refs.instructions.innerHTML = html; }, /* * Returns an integer between min and max */ getRandomInt: function(min, max) { return Math.floor((Math.random() * (max-min)) + min); } }; return self.init(); } 
 /* I minified the CSS to avoid cluttering my answer. Full version in link below */body{font-family:Arial,Helvetica,sans-serif;text-align:center}p{margin-top:.2em}button{margin-top:.5em}.door{display:inline-block;width:3em;height:5em;border:1px solid #000;margin:.5em;background-image:url(https://image.ibb.co/c7mssS/doors.jpg);background-size:300% 100%;background-position:center;cursor:pointer;box-shadow:0 0 5px 1px #1070ff;transition:all .3s ease}.door:not(.disabled):hover{opacity:.9}.door.selected{box-shadow:0 0 5px 3px #b910ff}.door.loser{background-position:right}.door.winner{background-position:left}.door.disabled{pointer-events:none}.door.disabled:not(.selected){box-shadow:none}span{font-weight:700}.green{color:#42e25d}.red{color:#ff2f00} 
 <div id="app"></div> 

JSFiddle demo

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM