super-trunfo-clash-royale

💻 Projeto

Super trunfo com o tema do jogo Clash Royale da Supercell. Um jogo Super trunfo nada mais é um jogo de cartas em que cada jogador escolhe uma carta que contém um determinado valor, ganhando aquele que tiver a carta com maior valor entre as duas. Esse projeto foi desenvolvido originalmente como dever de casa na disciplina de programação web na Etec com o intuito de criar um jogo de batalha entre personagens em PHP, porém eu fiz o projeto inteiramente com JavaScript, transformando em um jogo estilo super trunfo.

🕹️ Como funciona o jogo

O jogo funciona no modo singleplayer contra o computador, começando com um baralho de 20 cartas e dividido por rodadas. Cada rodada é sorteado uma carta para cada jogador e cada carta representa um personagem de Clash Royale com seus atributos de força, defesa e agilidade com seus respectivos valores. O usuário deve escolher um dos atributos do personagem. Se o valor do atributo escolhido for maior que o do atributo escolhido pela máquina, ele pontua, senão a máquina pontua. Caso o baralho de cartas acabe, ganha o jogador que mais pontuou durante o jogo.

---

✅ Demonstração

---

📖 Aprendizado

• Como trabalhar com múltiplos arquivos JS em um único projeto
• Como usar o objeto arguments do JS para manipular os argumentos passados a uma função de maneira similar a um array
• Como gerar numéros aleátorios usando método Math.random do JS
• Como executar arquivo de áudio com JS
• Como modularizar melhor o código JS para manipular o DOM através de classes e ids HTML
• Como usar a biblioteca SweetAlert2 para criar modais customizáveis em JS
• Como recarregar a página com JS
• Como fazer o efeito de flip de carta com CSS
• Como customizar input radios com CSS
• Como trabalhar com efeito de sombras múltiplas com CSS
• Como tranbalhar melhor com o background-image de elementos com CSS

---

🛠️ Tecnologias

Esse projeto foi desenvolvido com as seguintes tecnologias

✔️ JavaScript

✔️ CSS

✔️ HTML

✔️ SweetAlert2

---

🚀 Como executar o projeto

Pré-requesitos

Embora não seja obrigatório, para rodar a aplicação de uma forma mais prática é bom ter o editor de código VSCode junto com a extensão Live Server, que pode ser instalada no marketplace do próprio VSCode.

📟 Rodando a aplicação

# Clone este repositório
$ git clone  https://github.com/JohnPetros/super-trunfo-clash-royale.git

# Acesse a pasta do projeto no terminal/cmd
$ cd super-trunfo-clash-royale

# Abra a pasta no VSCode
$ code .

# Execute o arquivo index com a extensão Live Server, clicando com o botão direito sobre ele e depois em Open with Live Server

---

⚙️ Deploy

O deploy desse projeto foi realizado através do Github Pages. Isso implica que você pode acessar o projeto funcionando acessando esse link

---

💪 Como contribuir com o projeto

1. Faça um fork do projeto.

2. Crie uma nova branch com as suas alterações: git checkout -b my-feature

3. Salve as alterações e crie uma mensagem de commit contando o que você fez: git commit -m "feature: My new feature"

4. Envie as suas alterações: git push origin my-feature

   Caso tenha alguma dúvida confira este guia de como contribuir no GitHub

---

📩 Contato

Entre em contato comigo por e-mail ou pelo meu LinkedIn:

---