Добро пожаловать в мой учебник!
В этом уроке мы собираемся построить действительно простую игру с ножницами Rock Paper Lizard.
Пожалуйста, проверьте мою учетную запись GitHub для полного исходного кода. https://github.com/hodovani/rock-paper-scissors-Spock-lizard
Мы будем использовать ванильный JavaScript, HTML, CSS для этой игры.
YouTube видео https://youtu.be/pjw39quoaje
Давайте начнем.
Во -первых, нам нужно настроить нашу папку проекта.
Пожалуйста, создайте папку для игры.
Положить пустой index.html , index.css , index.js Файл в папке.
Теперь вы хотите поместить несколько тегов в index.html Анкет
GAME
Не забудьте периодически сохранять файл.
Мы можем проверить, что у нас все хорошо, запустив этот файл в браузере.
Хорошо, мы можем двигаться вперед.
Теперь вы хотите добавить входные элементы для пользователя.
YOUR CHOICE
Мы хотим добавить его в конце index.html тег тела.
Мне хорошо!
Нам нужно добавить вывод компьютера, результат игры, кнопку, чтобы играть в игру.
Вывод компьютера должен выглядеть дальше:
COMPUTER CHOICE💭
Вы хотите добавить его в конце своего index.html тег тела.
Кнопка воспроизведения довольно проста:
Вы хотите добавить его в конце своего index.html тег тела.
Результат игры должен выглядеть дальше:
Вы хотите добавить его в конце своего index.html тег тела.
Теперь вы хотите связать свой index.css и index.html файлы
Пожалуйста, добавьте
в нижней части тела.
Вот и все. Мы закончили нашу работу с index.html Анкет
Мы просто хотим увеличить размер шрифта, чтобы смайлики выглядели лучше.
Вы хотите добавить это в свой index.css:
html {
font-size: 42px
}
Давайте перейдем к нашему файлу JavaScript.
Нам нужна функция, чтобы вернуть случайное число в диапазоне от 1 до 5 для выбора компьютера.
Мы бы назвали это getComputerChoice И это должно выглядеть так:
function getComputerChoice() {
return Math.floor((Math.random() * 5) + 1);
}
Поместите это в начале index.js файл.
Мы хотим добавить несколько константов, которые помогут нам позже. Просто поместите это в конце вашего index.js
const ROCK = 'ROCK';
const SCISSORS = 'SCISSORS';
const PAPER = 'PAPER';
const SPOCK = 'SPOCK';
const LIZARD = 'LIZARD';
const OPTIONS = {
1: ROCK,
2: SCISSORS,
3: PAPER,
4: SPOCK,
5: LIZARD
};
const OPTIONS2EMOJI = {
1: '⛰️',
2: '✂️',
3: '🧻',
4: '🖖',
5: '🦎'
};
Теперь мы хотим где -нибудь сохранить ввод пользователя. Давайте добавим переменную для этого.
let userChoiceID = '';
Мы хотим добавить слушателей событий для ввода пользователя при загрузке страницы.
Для этого мы должны написать наш код в функции обратного вызова.
window.onload = () => {
// your code here
}
Мы хотим поместить это в конце index.js Анкет
Нам нужен элемент для вывода результатов.
const output = document.querySelector('#output');
Поместите это в начале нагрузка функция
Мы хотим добавить слушателей событий, чтобы обрабатывать пользовательский ввод. Во -первых, мы бы выбрали элементы по классу. Затем мы добавили бы слушателя событий в каждый элемент.
const userOptions = document.querySelectorAll('.user-option');
userOptions.forEach(el => el.addEventListener('click', event => {
userChoiceID = event.target.id;
}));
Поместите это в конце нагрузка функция
Теперь мы хотим добавить слушателя событий в кнопку воспроизведения. Давайте сначала создадим переменную.
const playButton = document.querySelector('#play');
Теперь мы можем добавить слушателя событий
playButton.addEventListener('click', () => {
})
Давайте заберем всю информацию, которую нам нужна, чтобы определить победителя. Нам нужен компьютер и выбор пользователя.
const computerChoiceID = getComputerChoice();
const computerChoice = OPTIONS[computerChoiceID];
const computerChoiceElement = document.querySelector('#computer-choice');
const output = document.querySelector('#output');
const userChoice = OPTIONS[userChoiceID];
let result = '';
Теперь мы можем выбирать выбор компьютера.
computerChoiceElement.innerHTML = OPTIONS2EMOJI[computerChoiceID];
Поместите его в конце кнопки «Воспроизведение» нажмите обратный вызов.
Давайте напишем логику, чтобы определить победителя. Мы использовали бы переключатель для этого. Не забудьте добавить корпус по умолчанию.
switch (`${computerChoice}-${userChoice}`) {
case `${ROCK}-${ROCK}`:
case `${SCISSORS}-${SCISSORS}`:
case `${PAPER}-${PAPER}`:
case `${SPOCK}-${SPOCK}`:
case `${LIZARD}-${LIZARD}`:
result = 'TIE 👔'
break;
case `${ROCK}-${SCISSORS}`:
case `${ROCK}-${LIZARD}`:
case `${SCISSORS}-${PAPER}`:
case `${SCISSORS}-${LIZARD}`:
case `${PAPER}-${ROCK}`:
case `${PAPER}-${SPOCK}`:
case `${SPOCK}-${ROCK}`:
case `${SPOCK}-${SCISSORS}`:
case `${LIZARD}-${PAPER}`:
case `${LIZARD}-${SPOCK}`:
result = 'COMPUTER WIN 😔💔 🤖🥇'
break;
case `${ROCK}-${PAPER}`:
case `${ROCK}-${SPOCK}`:
case `${SCISSORS}-${ROCK}`:
case `${SCISSORS}-${SPOCK}`:
case `${PAPER}-${SCISSORS}`:
case `${PAPER}-${LIZARD}`:
case `${SPOCK}-${PAPER}`:
case `${SPOCK}-${LIZARD}`:
case `${LIZARD}-${ROCK}`:
case `${LIZARD}-${SCISSORS}`:
result = 'YOU WIN ☺️🥇 🤖💔'
break;
default:
result = 'SOMETHING WRONG. TRY AGAIN. 🐛'
}
Поместите его в конце кнопки «Воспроизведение» нажмите обратный вызов.
Теперь мы готовы вывести результат.
output.innerHTML = result;
Поместите его в конце кнопки «Воспроизведение» нажмите обратный вызов.
Там у вас есть, вы можете играть против компьютера.
Есть много крутых способов улучшить эту простую чистую JavaScript Rock-Paper-Scissors-Spock-Lizard, включая количество счетов
Еще раз, надеюсь, вам понравилось мое руководство, если у вас есть какие -либо вопросы относительно кода, пожалуйста, оставьте комментарий.
Я обязательно вернусь к вам с помощью.
Оригинал: “https://dev.to/hodovani/rock-paper-scissors-spock-lizard-game-in-javascript-4kfn”