I started using HTML and CSS a while back, but I started implementing JS only about a couple of weeks ago. I understand JS independently, along with HMTL and CSS. Now that I have to put them together, I don’t understand the implementation of JS– specifically with variables and manipulating them.
I want to increase, decrease, or represent the changes (e.g., Moves left = 10 => Moves left = 9), but my code doesn’t work. Are there specific concepts I need to understand besides “knowing JS basics?” Leaving the code below.
HTML, which only includes the main section:
<section class="game">
<!--Title -->
<div class="title">Rock Paper Scissor</div>
<!--Display Score of player and computer -->
<div class="score">
<div class="playerScore">
<h2>Player</h2>
<p class="p-count count">0</p>
</div>
<div class="computerScore">
<h2>Computer</h2>
<p class="c-count count">0</p>
</div>
</div>
<div class="move">Choose your move</div>
<!--Number of moves left before game ends -->
<div class="movesleft">Moves Left: 10</div>
<!--Options available to player to play game -->
<div class="options">
<button class="rock">Rock</button>
<button class="paper">Paper</button>
<button class="scissor">Scissors</button>
</div>
<!--Final result of game -->
<div class="result"></div>
<!--Reload the game -->
<button class="reload">Reload Game?</button>
</section>
JS, which includes where I want my HTML values to update:
const game = () => {
let playerScore = document.getElementsByClassName('p-count count'); // At the start of the game the player & computer scores will = 0
let computerScore = document.getElementsByClassName('c-count count');
let moves = 0; // Start of gaming... total moves will equal 0, so this will initialize it since both the scores are already initalized at 0.
playGame();
};
const playGame = () => {
let playerOptions = [document.getElementsByClassName('rock'), document.getElementsByClassName('paper'), document.getElementsByClassName('scissors')];
let computerOptions = [document.getElementsByClassName('rock'), document.getElementsByClassName('paper'), document.getElementsByClassName('scissors')];
playerOptions.forEach(addEventListener("click", function(){
moves++; // This says "we will add 1 to the total moves made." This will affect the moves variable in the game function.
let movesLeft = document.getElementById('movesleft'); // Calls the movesleft div-class
return movesLeft - moves; // Begins the subtraction of moves from the starting amount
}));
let computerSelection = computerOptions[Math.floor((Math.random) * computerOptions.length)] // Within the shared options, this will generate a random number between 0 -
// - & 2 to represent the options within the array (rock, paper, scissors)
winner();
gameOver();
};
const winner = (playerOptions, computerOptions) => {
if (playerOptions[0] & computerOptions[2]) {
playerScore++; // Rock beats scissors
} else if (playerOptions[1] && computerOptions[0]) {
playerScore++; // Paper beats rock
} else if (playerOptions[2] && computerOptions[2]) {
playerScore++; // Scissors beats paper
} else {
computerScore++;
} // Checking player's input to see if was a round-winnable move.
};