А вот еще одна идея проекта, если вы делаете первые шаги в удивительном мире 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, чтобы идентифицировать значки и сравнивать их друг с другом.
И вот конечный результат!
Надеюсь, вам понравился этот небольшой урок.
Продолжайте кодировать, и вы приручите зверя!