Ok let’s face it, that color changing grid exercise yesterday was way over my head. So today I give myself an easier task:
Exercise: PvP Number guessing
Two players enter numbers between 1 and 100 in an input field each. Then JS generates a random number and who ever of the two players is closer is the winner.
Let’s go!
My Code
Oh well turns out it was the right level of difficulty. I almost made it but in the end couldn’t figure out some issue. Here is my code as far as I got it on my own
<!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>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(n1, n2) {
console.log(n1);
console.log(n2);
number = Math.floor(Math.random() * 100 + 1);
document.getElementById('js-result').textContent = `Number: ${number}`;
guess1distance = parseInt(guess1) - number;
guess2distance = parseInt(guess2) - number;
console.log(guess1distance);
console.log(guess2distance);
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(guess1, guess2)
}
}
document.getElementById('js-button-2').onclick = function () {
guess1 = document.getElementById('js-input-2').value;
document.getElementById('js-p-2').textContent = `Number submitted: ${guess1}`;
if (guess1 !== '') {
playGame(guess1, guess2)
}
}
</script>
</body>
</html>
Improvements from ChatGPT Sensei
Yea so here is everything I did wrong
Incorrect Assignment in Player 2's Event Listener:
- In the
onclickevent forjs-button-2, you are mistakenly assigning the value ofjs-input-2toguess1instead ofguess2.- This should be corrected to:
guess2 = document.getElementById('js-input-2').value;Distance Calculation Logic:
- The logic for determining the winner is based on the distance of each guess from the generated number. However, the calculation does not take the absolute value of the difference, which can lead to incorrect results if a guess is higher than the random number.
- You should use
Math.absto get the absolute value of the differences:
guess1distance = Math.abs(parseInt(guess1) - number);guess2distance = Math.abs(parseInt(guess2) - number);Unnecessary Parameters in
playGameFunction:
- The
playGamefunction has parametersn1andn2which are not used. Since you're using the global variablesguess1andguess2, these parameters are not needed.- You can simply define the function as
function playGame() { ... }
Oh well at least all the 3 of them are easily understandable and avoidable in the future
Solution
Ok besides those ChatGPT fixes I also added some instructions. Here we go, that’s the solution.
<!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>
Let’s see, perhaps I build on this exercise the coming days 🙂
Top comments (0)