Game of Nim

Tutorials
/
JavaScript Tutorials
/
If Statements
/
Game of Nim
Previous:
If Statements

Game of Nim

Game of Nim


21

  • Game starts at 21.
  • Take turns subtracting 1, 2, or 3.
  • Win by leaving your opponent with 1.

This code lets you play the Game of Nim against the computer.

<!DOCTYPE html>
<html>
	<head>
		<title>Game of Nim</title>
		<script>
			let total = 21;

      function subtract(n) {
        total -= n;
        document.getElementById('total').innerText = total;
        log('New total: ' + total);
        disableIllegalButtons();
      }

      function subtractPlayerChoice(choice) {
        log('You subtract ' + choice);
        subtract(choice);
        setButtonsEnabled(false);
        if(total == 1) {
          log('<h2>You won!</h2>');
          document.getElementById('total').innerText += ' - You won!';
          document.getElementById('resetButton').style.display = 'block';
        } else {
          log('Computer is thinking...')
          setTimeout(playComputerTurn, 1000);
        }
      }

      function playComputerTurn() {
        let choice;

        if (document.getElementById('hardMode').checked) {
          if (total % 4 == 1) {
            choice = 1 + Math.floor(Math.random() * 3);
          } else {
            choice = (total - 1) % 4;
          }
        } else{
          if(total == 2) {
            choice = 1;
          } else if (total == 3) {
            choice = 1 + Math.floor(Math.random() * 2);
          } else {
            choice = 1 + Math.floor(Math.random() * 3);
          }
        }

        log('Computer subtracts ' + choice);
        subtract(choice);

        if (total == 1) {
          log('<h2>Computer won!</h2>');
          document.getElementById('total').innerText += ' - Computer won!';
          setButtonsEnabled(false);
          document.getElementById('resetButton').style.display = 'block';
        } else {
          setButtonsEnabled(true);
        }
      }

      function log(message) {
        document.getElementById('log').innerHTML += '<li>' + message + '</li>'
      }

      function setButtonsEnabled(enabled) {
        const playerButtons = document.getElementsByClassName('playerButton');
        for (const button of playerButtons) {
          button.disabled = !enabled;
        }

        if (enabled) {
          disableIllegalButtons();
        }
      }

      function disableIllegalButtons() {
        if (total == 2) {
          document.getElementById('twoButton').disabled = true;
          document.getElementById('threeButton').disabled = true;
        }

        if (total == 3) {
          document.getElementById('threeButton').disabled = true;
        }        
      }

      function reset() {
        total = 21;
        document.getElementById('total').innerText = total;
        document.getElementById('log').innerHTML = '';
        log('Game starts at 21.');
        log('Take turns subtracting 1, 2, or 3.');
        log('Win by leaving your opponent with 1.');
        setButtonsEnabled(true);
        document.getElementById('resetButton').style.display = 'none';
      }
		</script>

    <style>
      #titleAndMode {
        display: flex;
        align-items: center;
      }

      #titleAndMode h1 {
        margin-right: 25px;
      }

      .playerButton{
        font-size: 24px;
      }

      #resetButton {
        display: none;
      }

      li h2 {
        margin: 0;
      }
    </style>
	</head>
	<body>
    <div id="titleAndMode">
      <h1>Game of Nim</h1>
      <div>
        <label>
          <input type="radio" id="easyMode" name="mode" checked>
          Easy
        </label>
        <br>
        <label><input type="radio" id="hardMode" name="mode">Hard</label>
      </div>
    </div>

    <h2 id="total">21</h2>

    <button id="oneButton" class="playerButton"
            onclick="subtractPlayerChoice(1)">-1</button>
    <button id="twoButton" class="playerButton"
            onclick="subtractPlayerChoice(2)">-2</button>
    <button id="threeButton" class="playerButton"
            onclick="subtractPlayerChoice(3)">-3</button>

    <ul id="log">
      <li>Game starts at 21.</li>
      <li>Take turns subtracting 1, 2, or 3.</li>
      <li>Win by leaving your opponent with 1.</li>
    </ul>

    <button id="resetButton" onclick="reset()">Reset</button>
	</body>
</html>

Remix Ideas

  • Change the game to allow subtracting 1, 2, 3, or 4.
  • Use CSS to make the game prettier. Try adding animations, images, or effects.
  • Implement another version of the game listed on the Game of Nim page.
  • Add an AI that uses a decision tree or the minimax algorithm to choose a number.
Previous:
If Statements

If Statements Examples

Game of Nim Game of Nim

Play the Game of Nim against the computer!

Feed the Ducks Feed the Ducks

Create an interactive story using if statements!

Add Your Own Example Add Your Own Example

Add your own example to Happy Coding.

Comments

Happy Coding is a community of folks just like you learning about coding.
Do you have a comment or question? Post it here!

Comments are powered by the Happy Coding forum. This page has a corresponding forum post, and replies to that post show up as comments here. Click the button above to go to the forum to post a comment!