Блог

Я новичок в Javascript, я пытаюсь сделать игру rock paper scissor в качестве практического проекта для начинающих. Я написал фрагмент кода, чтобы назначить ход игрока. У меня есть три кнопки на странице для соответствующих перемещений

Вот код, который я написал, чтобы присвоить значение переменной перемещения игрока-

 const paper =document.getElementById('paper');
const scissor = document.getElementById('scissor')
const rock = document.getElementById('rock')

paper.addEventListener('click', function (){movePlayer = "paper"; })
rock.addEventListener('click', function (){movePlayer = "rock"; })
scissor.addEventListener('click', function (){movePlayer = "scissor";})
 

Идентификатор rock, paper, scissor предназначен для соответствующих кнопок.

Я чувствую, что есть более короткий способ сделать это. Это мой первый раз при переполнении стека

ПОЭТОМУ обычно не выполняется проверка кода. Но вот вы здесь

 ['paper','scissor','rock'].forEach(hand => document.getElementById(hand) 
  .addEventListener('click', function() { movePlayer = this.id }));
 

но почему бы не делегировать?

 let movePlayer;
const showMove = () => console.log(movePlayer);


document.getElementById("handContainer").addEventListener('click', function(e) {
  const tgt = e.target;
  if (tgt.classList.contains("hand")) {
    movePlayer = tgt.id;
    showMove();
  }
}); 

 <div id="handContainer">
  <div class="hand" id="paper">Paper</div>
  <div class="hand" id="scissors">Scissors</div>
  <div class="hand" id="rock">Rock</div>
  <div class="hand" id="lizard">Lizard</div>
  <div class="hand" id="spock">Spock</div>
</div> 

Вы можете использовать массив и цикл:

 for (const type of ["rock", "paper", "scissor"]) {
    document.getElementById(type).addEventListener("click", () => {
        movePlayer = type;
    });
}
 

Или forEach , что тоже является циклом, просто менее очевидным.

Примечание: обычно это «ножницы», а не «ножницы».

Вы можете прослушать div событие щелчка ваших элементов. затем в вашей функции click получите элемент id и установите movePlayer его следующим образом:

 document.querySelectorAll('div').forEach((div) => {
  div.addEventListener('click', function() { 
    movePlayer = this.id
   })  
}) 

Редактировать: вы можете назначить класс своим элементам и использовать document.querySelectorAll('.classname') либо

На ум приходит использование делегирования событий

 document.addEventListener("click", evt => {
  const origin = evt.target.closest("#rock, #paper, #scissor");
  if (origin) { movePlayer = origin.id; }
});
 

ДЕМОНСТРАЦИЯ:

 document.addEventListener("click", evt => {
  const origin = evt.target.closest("#rock, #paper, #scissor");
  if (origin) {
    movePlayer = origin.id;
    // for demo
    const picked = document.querySelector(".picked");
    const movePlayerId = document.querySelector(".movePlayer");
    picked amp;amp; picked.classList.remove("picked");
    movePlayerId amp;amp; movePlayerId.classList.remove("movePlayer");
    origin.firstChild.classList.add("picked");
    origin.classList.add("movePlayer");
  }
}); 

 div {
  cursor: pointer;
  margin: 5px;
}

.picked {
  border-color: red;
}

div.movePlayer:after {
  content: ' > movePlayer now: 'attr(id);
  color: green;
}

span {
  padding: 3px;
  border: 1px solid transparent;
} 

 <div id="paper"><span>Paper</span></div>
<div id="scissor"><span>Scissor</span></div>
<div id="rock"><span>Rock</span></div>