Daily Code 55 | 🔢 PvP Number guessing with JavaScript (2)
Tags: beginners, daily, javascript
Published: 2024-01-31 15:41:12

Alright today I’m improving the game I built yesterday. I want to add these functionalities:

- The input field should be cleaned after a player submits a number
- The game should show the status (waiting for both or for one player)
- A player should get a crown 👑 every time they win a game.

Ok let’s go!

# My Code

I’m starting again with my code from yesterday

```html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>Instructions</h1>
    <ol>
        <li>Both players pick and submit a number</li>
        <li>The computer picks a random number between 1 and 100</li>
        <li>The player who guessed the closer number wins!</li>
    </ol>

    <h1>Player 1</h1>
    <input id="js-input-1" type="number">
    <button id="js-button-1">Submit</button>
    <p id="js-p-1">Number submitted: </p>

    <h1>Player 2</h1>
    <input id="js-input-2" type="number">
    <button id="js-button-2">Submit</button>
    <p id="js-p-2">Number submitted: </p>

    <h1>Result</h1>
    <p id="js-result">Number: </p>
    <p id="js-winner">Winner: </p>

    <script>
        let guess1 = '';
        let guess2 = '';

        function playGame() {
            number = Math.floor(Math.random() * 100 + 1);
            document.getElementById('js-result').textContent = `Number: ${number}`;
            guess1distance = Math.abs(parseInt(guess1) - number);
            guess2distance = Math.abs(parseInt(guess2) - number);

            if (guess1distance < guess2distance) {
                document.getElementById('js-winner').textContent = `Winner: Player 1`;
            } else if (guess2distance < guess1distance) {
                document.getElementById('js-winner').textContent = `Winner: Player 2`;
            } else {
                document.getElementById('js-winner').textContent = `Winner: tie`;
            }
        }

        document.getElementById('js-button-1').onclick = function () {
            guess1 = document.getElementById('js-input-1').value;
            document.getElementById('js-p-1').textContent = `Number submitted: ${guess1}`;
            if (guess2 !== '') {
                playGame()
            }
        }

        document.getElementById('js-button-2').onclick = function () {
            guess2 = document.getElementById('js-input-2').value;
            document.getElementById('js-p-2').textContent = `Number submitted: ${guess2}`;
            if (guess1 !== '') {
                playGame()
            }
        }
    </script>

</body>

</html>
```

Alright I managed to do all the 3 changes on my own again 😎

The game interface still kind of sucks but I implemented the 3 features I wanted! Tomorrow I’ll try to make it easier to play 😄

```html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PvP Number Guessing with JavaScript (2)</title>
</head>

<body>
    <h1>Instructions</h1>
    <ol>
        <li>Both players pick and submit a number</li>
        <li>The computer picks a random number between 1 and 100</li>
        <li>The player who guessed the closer number wins!</li>
    </ol>

    <h1>Status</h1>
    <p id="js-status">both players turn</p>

    <h1 id="js-player-1">Player 1</h1>
    <input id="js-input-1" type="number">
    <button id="js-button-1">Submit</button>
    <p id="js-p-1">Number submitted: </p>

    <h1 id="js-player-2">Player 2</h1>
    <input id="js-input-2" type="number">
    <button id="js-button-2">Submit</button>
    <p id="js-p-2">Number submitted: </p>

    <h1>Result</h1>
    <p id="js-result">Number: </p>
    <p id="js-winner">Winner: </p>

    <script>
        let guess1 = '';
        let guess2 = '';
        let status = '';
        let player1wins = '';
        let player2wins = '';

        function updateStatus() {
            if (!guess1 && !guess2) {
                status = 'both players turn'
            } else if (!guess1) {
                status = 'player 1 turn'
            } else if (!guess2) {
                status = 'player 2 turn'
            } else {
                status = 'no ones turn'
            }
            document.getElementById('js-status').textContent = status;

        }

        function playGame() {
            number = Math.floor(Math.random() * 100 + 1);
            document.getElementById('js-result').textContent = `Number: ${number}`;
            guess1distance = Math.abs(parseInt(guess1) - number);
            guess2distance = Math.abs(parseInt(guess2) - number);

            if (guess1distance < guess2distance) {
                document.getElementById('js-winner').textContent = `Winner: Player 1`;
                player1wins += '👑';
                document.getElementById('js-player-1').textContent = `Player 1 ${player1wins}`
            } else if (guess2distance < guess1distance) {
                document.getElementById('js-winner').textContent = `Winner: Player 2`;
                player2wins += '👑';
                document.getElementById('js-player-2').textContent = `Player 2 ${player2wins}`
            } else {
                document.getElementById('js-winner').textContent = `Winner: tie`;
            }
            guess1 = '';
            guess2 = '';
            document.getElementById('js-p-1').textContent = `Number submitted: ${guess1}`;
            document.getElementById('js-p-2').textContent = `Number submitted: ${guess2}`;
            updateStatus();
        }

        document.getElementById('js-button-1').onclick = function () {
            guess1 = document.getElementById('js-input-1').value;
            document.getElementById('js-p-1').textContent = `Number submitted: ${guess1}`;
            document.getElementById('js-input-1').value = '';
            updateStatus();
            if (guess2 !== '') {
                playGame()
            }
        }

        document.getElementById('js-button-2').onclick = function () {
            guess2 = document.getElementById('js-input-2').value;
            document.getElementById('js-p-2').textContent = `Number submitted: ${guess2}`;
            document.getElementById('js-input-2').value = '';
            updateStatus();
            if (guess1 !== '') {
                playGame()
            }
        }
    </script>

</body>

</html>
```