Фото Julio Casado на Unsplash
Привет! В этом посте в блоге мы собираемся создать рок, бумагу, ножницы в угловом углу. Если вы опытный угловой разработчик, вы можете не найти что-то новое в этой статье.
Это для начинающих, но я также буду предполагать, что вы знаете достаточно угловой, потому что я не буду объяснять все основные вещи (есть тонна учебников по ней, где она красиво покрыта).
Я также хочу показать вам, насколько легко создавать что-то в угловом углу. Мы собираемся использовать немного Угловой материал и CSS сетка, чтобы сделать вещи быстро. С этому, давайте допустим до него.
Вы можете проверить окончательный продукт здесь Отказ
Если вы хотите следовать, нажмите на этот проект Stackblitz здесь Отказ
1. Макет
Я хочу создать две карты (для вас и игрок 2). Не стесняйтесь делать все, что вы хотите здесь, но я буду использовать два столбца, используя CSS Grid, чтобы иметь две равные карты.
Перейти к App.comPonent.html и добавьте:
Rock Paper Scissors
И в вашем App.comPonent.csss:
.content{
display:grid;
grid-template-columns: 1fr 1fr;
}
Теперь наш проект выглядит так:
Не так много здесь
2. Содержание
Далее мы собираемся добавить немного текста, и мы собираемся использовать потрясающие кнопки для отображения оценки. Мы также собираемся использовать шрифт Awesome для значков для рок , бумага и Ножницы Отказ
Rock Paper Scissors You
Choose your weapon:
Player 2
Если вы заметили карту для плеера 2, я использовал Flexbox при отображении значков, потому что я собираюсь показать значки один за раз, и я хочу, чтобы это было сосредоточено. На данный момент все они отображаются, и мы вернемся к этому через минуту.
Для CSS я собираюсь использовать CSS Grid снова (не судите меня, я практикую свои навыки CSS) для .Content1 и .Content2.
.content1{
display:grid;
grid-template-columns: 2fr 1fr;
}
.content2{
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.score{
margin-top:.5em;
margin-left:2em;
font-size:1.5em
}
.fa{
cursor:pointer;
font-size:5em;
}
Теперь приложение выглядит так:
3. Логика
Вот переменные, которые нам нужны. Перейдите в App.comPonent.ts и добавьте это:
scores = [0 , 0]; // store the scores. index 0 is you. index 1 is player 2.
weapons = [
'rock',
'paper',
'scissors'
];
playerSelected = -1;
enemySelected = -1;
loading= false; // we're going to show a loading spinner when waiting for the enemy pick.
isResultShow = false;
// theResult - 0 winner
// 1 lose
// 2 tie
theResult = 0
Далее мы собираемся создать функцию, которую мы собираемся привязать к событию Click при выборе оружия.
pick( weapon: number): void {
// return immediately when still loading. You don't want
// the user to spam the button.
if(this.loading) return;
this.loading = true;
this.playerSelected = weapon;
//create a delay to simulate enemy's turn.
setTimeout( () => {
this.loading = false;
// generate a number from 0 -2
const randomNum = Math.floor(Math.random() * 3 ) ;
this.enemySelected = randomNum;
this.checkResult();
this.isResultShow = true;
}, Math.floor(Math.random() * 500 ) +200);
}
reset(): void {
this.scores = [0,0];
}
checkResult(): void {
const playerPick = this.playerSelected;
const enemyPick = this.enemySelected;
// if you and the enemy have the same weapon, then it is a tie.
if( playerPick == enemyPick)
{
this.theResult = 2;
}
// let's say you picked rock ( 0 )
// and the enemy picked paper ( 1 )
// you lose because ( 0 - 1 + 3 ) % 3 is equal to 2.
// when you picked rock ( 0 )
// and the enemy picked scissor ( 2 )
// you win because ( 0 - 2 + 3) % 3 is equal to 1.
// when you picked scissor ( 2 )
// and the enemy picked paper ( 1 )
// you win because ( 2 - 1 + 3 ) % 3 is equal to 1. 4 % 3 is 1.
// Hope you get the picture.
else if ( (playerPick - enemyPick + 3)% 3 == 1) {
// YOU WIN
this.theResult = 0;
this.scores[0] = this.scores[0]+1;
}
else{
// YOU LOSE
this.theResult = 1;
this.scores[1] = this.scores[1]+1;
}
}
Теперь мы собираемся изменить app.component.html снова, чтобы привязать к нашим функциям и переменным.
You
Choose your weapon:
Player 2
Мы связываем Cycle () функцию в нашу значки Rock, Paper и ножниц на событии Click и передайте соответствующие значения.
Также иконки для игрока 2 теперь скрыты и показывают только после того, как вы выбрали свое оружие.
Мы почти закончили, и единственное, что осталось сделать, это отображать результаты.
4. Показаны результаты
Мы будем отображаться, если вы выиграете, проигрываете или связывают и добавьте кнопку для сброса баллов. Кроме того, мы собираемся показать загрузку Spinner, чтобы добавить некоторые эффекты, когда задержка еще не закончена.
Вот код, чтобы добавить в конце вашего App.comPonent.html.
You're the winner!
You lose.
It's a tie!
Pick again to continue or
Обратите внимание, что я использовал NGSwitch при отображении результатов. Вы также можете использовать * NGIF/End, если хотите, но я думаю, что Ngswitch лучше подходит здесь.
5. Бонус – выделение выбранного оружия.
Приложение сейчас работает, но я хочу добавить несколько выделений в выбранное оружие. Я хотел использовать основной цвет от углового материала и после некоторых экспериментов, я смог получить его, используя свойство фона.
.selectedWeapon{
color: background;
}
Используя NGClass, чтобы добавить класс для выбранного оружия:
You
Choose your weapon:
Это в значительной степени это. Поздравляю!
Вы можете получить полный код здесь Отказ