DEV Community

Cover image for Daily Code 55 | 🔢 PvP Number guessing with JavaScript (2)
Gregor Schafroth
Gregor Schafroth

Posted on

Daily Code 55 | 🔢 PvP Number guessing with JavaScript (2)

#beginners #daily #javascript

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

<!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>
Enter fullscreen mode Exit fullscreen mode

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 😄

<!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>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)