А вот еще одна идея проекта, если вы делаете первые шаги в удивительном мире Javascript. Это может быть страшно, но, пожалуйста, попробуйте и наслаждайтесь поездкой.

Я работаю над небольшой коллекцией Javascript-проектов для начинающих, так что я мог бы написать больше сообщений в блогах такого рода.

Что мы собираемся построить

Вы можете найти окончательный код в моем проекте Codepen, и, как вы, наверное, догадались из превью, приведенного ниже, я воспользовался замечательными значками с fontawesome.com. Итак, не забудьте добавить его код сценария в свой html-файл.

С недавнего времени вы должны иметь учетную запись и создавать «комплект», чтобы использовать персонализированный код сценария. Итак, идите и возьмите один. Это все еще бесплатно, благослови их.

Давайте поговорим о коде

Я не использовал никаких руководств для этого проекта, но прелесть программирования в том, что есть несколько способов заставить что-то работать. И это работает.

К тому же это оказалось намного проще, чем я ожидал. Уф!

Шаг 1.

Внутри обертки, чтобы все было красиво и по центру, я изобразил 3 области:

  • тот, который показывает значки (вверху) внутри кнопок, представляя выбор, который может сделать пользователь.
  • тот, который будет показывать случайный значок, выбранный из тех же трех значков, представляющий руку компьютера
  • один с окончательным результатом, например, «Ты выиграл», «Ты проиграл» или «Ничья».
<div id="youChooseBtns">
    <button id="rock">
      <i class="far fa-hand-rock"></i>
    </button>
    <button id="scissor">
      <i class="far fa-hand-scissors"></i>
    </button>
    <button id="paper">
      <i class="far fa-hand-paper"></i>
   </button>
  </div>
  
  <div id="computerPlay"></div>
  
  <div id="result"></div>

Магия JavaScript

document.querySelectorAll('button').forEach( btn => btn.addEventListener('click', (e) => {  
  e.preventDefault();
  randomize();
  computerPlays(e);
}
));

В качестве первого шага я добавил прослушиватель событий к трем кнопкам / значкам. Итак, теперь каждая кнопка после нажатия будет:

  • не обновлять страницу (с помощью preventDefault)
  • вызвать функцию randomise (объяснено ниже)
  • вызвать «ответ» с компьютера (объяснено ниже). Как вы вскоре увидите, ответ - это случайно выбранный значок. (e), прикрепленный к функции, обозначает само событие (вы можете называть его как хотите), и это аргумент, передаваемый в функция. Мы передаем аргументы при вызове функции, когда этой функции понадобится «что-то», связанное с событием. Здесь, как вы вскоре увидите, мне понадобится имя класса события («значок»), на которое я нажал.

Сделайте это случайным!

const randomize = () => {
     const random = [
  '<i class="far fa-hand-rock"></i>',
  '<i class="far fa-hand-scissors"></i>',
  '<i class="far fa-hand-paper"></i>'
];
  let randomIcon = random[Math.floor(Math.random() * random.length)];
  document.querySelector('#computerPlay').innerHTML = randomIcon;
};

Я создал константу с массивом, содержащим три значка. Поскольку значки font awesome представлены в текстовой форме, каждый элемент в массиве представляет собой простую строку.

Затем я применил функцию Math.random (), чтобы один из элементов располагался в случайном порядке. Это будет рука компьютера, которая сработает после того, как пользователь нажмет свою кнопку по своему выбору.

Результат функции Math.random появится внутри div с #id «computerPlay».

Вы только что выиграли?

const computerPlays = (e) => {
  let chosenIcon = e.target.className;
  let chosenByPc = document.querySelector('#computerPlay').innerHTML
  let resultBanner = document.querySelector('#result')
  
  if(
    (chosenIcon.includes("scissors") && chosenByPc.includes("paper")) || 
    (chosenIcon.includes("rock") && chosenByPc.includes("scissors")) ||
    (chosenIcon.includes("paper") && chosenByPc.includes("rock"))
      ) { 
      resultBanner.innerHTML = "You Won!"
    }
  else if (
      (chosenIcon.includes("scissors") && chosenByPc.includes("rock")) ||
      (chosenIcon.includes("rock") && chosenByPc.includes("paper")) ||
      (chosenIcon.includes("paper") && chosenByPc.includes("scissors"))
    ) {
    resultBanner.innerHTML = "Ouch. You Lost!"
  }
  else {
    resultBanner.innerHTML = "It's a draw!"
  }
}

Эта функция доставила мне небольшую головную боль, и, скорее всего, какой-нибудь программист, более опытный, чем я, нашел бы лучшее решение.

Внутри этого оператора if / else я в основном создаю все параметры, чтобы проверить, выиграл ли пользователь / проиграл / находится ли он даже с компьютером, в соответствии с выбранным пользователем значком и значком, случайно выбранным компьютером.

Поскольку значки fontawesome имеют классы вроде «fa-hand-rock», я использовал метод .includes, чтобы идентифицировать значки и сравнивать их друг с другом.

И вот конечный результат!

Надеюсь, вам понравился этот небольшой урок.

Продолжайте кодировать, и вы приручите зверя!