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>
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>
Top comments (0)