Pedra Papel Tesoura — App iOS — Swift 👊🤚✌️
Nesse tutorial vou ensinar para iniciantes como fazer o jogo pedra, papel ou tesoura em swift, no Xcode.
Ele ficará parecido com esse:
1. Criar o projeto
O primeiro passo é clicar em "Create a new Xcode project".
Agora é preciso selecionar a opção iOS e depois "App" e clicar em next.
Agora basta escolher o nome do projeto, preencher as informações do team e organization identifier de acordo com os seus dados. Vamos escolher "Storyboard" como nossa interface, utilizaremos a linguagem Swift e não há necessidade de selecionarmos a opção de utilizar core data, nem incluir os testes.
Agora é só escolher onde você vai salvar o projeto!
2. Interface
Para mexermos na interface vamos abrir a pasta Main.storyboard.
Ao abrir o "Main.storyboard" você irá se deparar com a tela vazia de um iPhone. É aqui que iremos adicionar os elementos visuais do jogo.
Para começar iremos clicar no símbolo de "+" que é a library e iremos adicionar 2 labels, que estarão com o a pontuação de cada jogador, 2 imagens, que serão as imagens sorteadas para representar "pedra", "papel" ou "tesoura" e iremos também adicionar um botão, que será usado para acionar o sorteio.
Clicando na library irá aparecer uma janela, na qual você poderá escolher os elementos que eu mencionei.
Basta arrastar para dentro do mockup do iPhone os elementos que eu mencionei: 2 labels, 2 imageViews e 1 button. Eles deverão ficar na disposição da imagem abaixo.
PS: para mudar de lugar, basta arrastá-los e para mudar o tamanho, basta clicar no elemento e você conseguirá modificar.
Agora você pode adicionar constraints nos elementos para q eles fiquem nessas posições em qualquer tamanho de tela. Neste tutorial não irei mostrar como adicioná-las para não ficar muito extenso e depois farei um tutorial específico para ensinar como usar constraints.
Bom, agora precisamos mudar o texto das labels, do botão e adicionar as imagens no projeto.
Para mudar o texto da label é preciso clicar no elemento (1), depois escolher o quinto símbolo da barra lateral (2) e com ela selecionada terá a opção de mudar o texto da label (3).
Para mudar o texto do botão é bem parecido! A diferença é nas opções da barra lateral. Basta seguir a sequência da imagem abaixo e trocar o texto "Button" para "Começar"
Com isso feito, precisamos adicionar as imagens dentro do nosso projeto. Irei deixar aqui as imagens para baixar.
Para adicioná-las, precisaremos ir para a pasta "Assets.xcassets".
Agora é necessário que você arraste as imagens para dentro dessa pasta. Dessa maneira:
Para finalizar nossa interface, vamos voltar no arquivo "Main.storyboard" e vamos escolher qualquer uma das imagens para ficar de placeholder.
3. Lógica do jogo
Tudo o que acontece na interface pode ser alterado pelo código. Para podermos alterar o que está aparecendo nas imagens e nos textos precisamos ligá-los na nossa ViewController.
Para isso, enquanto estamos no "Main.storyboard" iremos ficar com a tecla "option" pressionada e clicaremos no arquivo "ViewController.Swift". Fazemos isso para termos nossa tela dividida, dessa maneira:
Para conectar as labels, as imagens e o botão é necessário clicar em cima do elemento segurando a tecla "control" e arrastar para a ViewController. Dessa maneira:
Ao conectar o Button é necessário escolher a opção action. Isso para termos a referência da ação de clique no botão, desse modo poderemos adicionar código para realizar alguma coisa na hora em que ele é clicado.
Ao final deste processo você terá algo parecido com isso:
A partir de agora iremos mexer apenas na ViewController.swift, então você pode fechar o Main.storyboard.
Vamos declarar mais duas variáveis que serão os contadores de pontos.
Agora vamos criar uma função chamada setHandleImage para nos ajudar na troca de imagens.
Ressalto que no UIImage(named: “rock”), "rock" é o nome da imagem que eu adicionei na pasta dos assets. Caso a sua imagem tenha outro nome, você precisa alterar para o nome da sua imagem.
Agora vamos começar a trabalhar dentro da ação do botão. Iremos começar sorteando um número para o computador e um para o jogador. Vamos definir que o número 1 representa pedra, número 2 representa papel e o número 3 representa tesoura.
Com o número sorteado, chegamos no momento em que usaremos a função que criamos para mostrar a imagem que representa o que foi sorteado. Na função vamos passar como primeiro parâmetro a variável que representa a imageView e no segundo vamos passar o número sorteado.
Agora vamos implementar a lógica de quem ganha de acordo com cada combinação possível.
Com isso feito, só falta mostrarmos a pontuação na tela.
4. Testar o app no simulador
Para testar o app no simulador basta escolhermos em qual dispositivo queremos que rode e então clicar em run.
Você pode acessar o código desse tutorial no meu github.
