Game of Nim

March 21, 2021

example html javascript

Game of Nim

Easy
Hard

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.

If Statements

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!

Game of Nim

Game of Nim

Game of Nim

21

Remix Ideas

If Statements Examples

Comments