Вопрос
Я создаю игру «Камень, ножницы, бумага». С точки зрения созданной на данный момент функциональности он должен:
- Разрешать игроку выбирать выбор
- Затем компьютер выбирает случайный выбор
- Изображения, представляющие соответствующие руки меняются
- Победитель указывается в тексте
Счет соответствующего победителя обновляется.
-
- все работает отлично.
Но 4. и 5. Я не могу понять, почему они не работают!
Пожалуйста, помогите мне определить проблему :)
Это код (я пропустил CSS, потому что не считаю его важным для проблемы):
if(document.readyState == 'loading'){
document.addEventListener('DOMContentLoaded', ready)
} else {
ready()
}
let score = [0, 0];
let playerScore = score[0];
let computerScore = score[1];
const playerOptns = ['rock', 'paper', 'scissors']
const computerOptns = ['rock', 'paper', 'scissors']
let playerCurrentHand = [playerOptns[1]];
let computerCurrentHand = [computerOptns[0]];
function ready(){
let choiceBtn = document.getElementsByClassName('btn');
for(let i = 0; i < choiceBtn.length; i++){
let button = choiceBtn[i]
button.addEventListener('click', changeHands)
}
}
function changeHands(event){
let buttonClicked = event.target;
if(buttonClicked.classList.contains('rock')){
changeToRock();
} else if(buttonClicked.classList.contains('paper')){
changeToPaper();
} else if(buttonClicked.classList.contains('scissors')){
changeToScissors();
}
computerRandom()
}
function changeToPaper(){
document.getElementById('hand1').src="Assets/paper.png";
playerCurrentHand = 'paper';
}
function changeToRock(){
document.getElementById('hand1').src="Assets/rock.png";
playerCurrentHand = 'rock';
}
function changeToScissors(){
document.getElementById('hand1').src="Assets/scissors.png";
playerCurrentHand = 'scissors';
}
function computerRandom(){
let number = Math.round(Math.random()*2)
if(number== 0){
document.getElementById('hand2').src="Assets/paper.png";
computerCurrentHand = 'paper';
} else if(number==1){
document.getElementById('hand2').src="Assets/rock.png";
computerCurrentHand = 'rock';
} else {
document.getElementById('hand2').src="Assets/scissors.png"
computerCurrentHand= 'scissors';
}
compareWinner()
}
function compareWinner(){
if(playerCurrentHand=='paper' && computerCurrentHand =='scissors'){
computerWins();
} else if(playerCurrentHand=='paper' && computerCurrentHand=='rock'){
playerWins();
} else if(playerCurrentHand=='scissors' && computerCurrentHand=='rock'){
computerWins();
} else if (playerCurrentHand=='scissors' && computerCurrentHand=='paper'){
playerWins();
} else if(playerCurrentHand=='rock' && computerCurrentHand=='scissors'){
playerWins();
} else if(playerCurrentHand=='rock' && computerCurrentHand=='paper'){
computerWins();
} else {
tied()
}
}
function computerWins(){
computerScore++;
score[0] = computerScore;
let celebrationText = document.querySelector('.winner')[0];
celebrationText.textContent = "Computer Wins";
document.getElementByClassName('comp-score')[0].textContent = computerScore;
}
function playerWins() {
playerScore++;
score[0] = playerScore;
let celebrationText = document.querySelector('.winner')[0];
celebrationText.textContent = "Player Wins";
document.getElementsByClassName('play-score')[0].textContent = playerScore;
}
function tied(){
let celebrationText = document.querySelector('.winner')[0];
celebrationText.textContent = "No Winner";
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="./styles.css" />
<title>Rock paper scissors</title>
</head>
<body>
<div class="score-board">
<div class="columned score-1">
<div>
Player
</div>
<div class="play-score">
0
</div>
</div>
<div class="columned score-2">
<div>
Computer
</div>
<div class="comp-score">
0
</div>
</div>
</div>
<div class="winner">
Player Wins
</div>
<div class="hands">
<div>
<img id="hand1" src="Assets/paper.png">
</div>
<div>
<img id="hand2" src="Assets/rock.png">
</div>
</div>
<div class="buttons">
<button class="btn rock">rock</button>
<button class="btn paper">paper</button>
<button class="btn scissors">scissors</button>
</div>
<script src="app.js"></script>
</body>
</html>