https://github.com/victor-lis/christmas-game-2023
https://github.com/victor-lis/christmas-game-2023
html-css-javascript js-game logic-programming
Last synced: 4 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/victor-lis/christmas-game-2023
- Owner: Victor-Lis
- Created: 2023-12-25T05:55:12.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-12-25T06:22:31.000Z (almost 2 years ago)
- Last Synced: 2024-10-12T10:06:48.730Z (about 1 year ago)
- Topics: html-css-javascript, js-game, logic-programming
- Language: JavaScript
- Homepage: https://christmas-game-2023-by-dev-victor.netlify.app/
- Size: 7.22 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Christmas Game 2023
Esse foi um projeto bem simples, um joguinho usando um pouco dos meus conhecimentos, apenas para deixar essa data marcada!
## Desafios
Alguns dos meus desafios foram:
- Sortear uma X e um Y dinâmicosa para a posição do X na qual será levado o presente;
- Criar um timer regressivo;
- E o mais diferente e que já tinha pretenção de usar em algum projeto a um bom tempo: a API Nativa "navigator.share", para compartilhar o resultado.
## Aprendizados
Por final aprendi algumas coisas interessantes como:
### Sorteio de Posições Dinâmico
No trecho abaixo ao mouse adentrar adentrar dentro do X, ocorre:
- Criação de um eventListener, para justamento fazer essa verifição de quando o mouse adentra o X;
- A soma de +1 no "count" variável que armazena a quantidade total de presentes e implementação disso no HTML;
- O chamado da função sortearPosicao(), que sorteia um valor entre 0 e 92 (92 ao invés de 100 para garantir que o tamanho da imagem não passasse) e o concatena com o caractere "%" para garantir a responsividade do game.
```js
let count = 0
function sortearPosicao() {
let xValue = Math.floor(Math.random() * 92)
let yValue = Math.floor(Math.random() * 92)
x.style.top = `${yValue}%`
x.style.left = `${xValue}%`
}
x.addEventListener("mouseenter", (e) => {
count++;
statsPresents.innerText = `Presentes ${count}`
sortearPosicao()
})
```
### Criação do Timer
Funcionamento:
- Para inicia-lo basta chama-lo uma vez em algum outro trecho do código;
- Verifição do que deve ser feito, diminuir os minutos ou diminuir os segundos apenas ou ainda finalizar o game;
- Chamar novamente a si próprio, depois de um segundo;
- Em caso de minutos serem == 0 e segundos também serem == 0, chamar função endGame para, como o próprio nome diz, finalizar o jogo.
```js
let min = 1;
let sec = 0;
function timer() {
if (sec == 0 && min > 0) {
min--;
sec = 59;
statsTimer.innerText = `${min}:${sec < 10 ? "0" + sec : sec}`
setTimeout(() => {
timer()
}, 1000)
} else if (sec > 0) {
sec--
statsTimer.innerText = `${min}:${sec < 10 ? "0" + sec : sec}`
setTimeout(() => {
timer()
}, 1000)
} if (sec == 0 && min == 0) {
statsTimer.innerText = `${min}:${sec < 10 ? "0" + sec : sec}`
endGame()
}
}
timer()
```
### Share
Código bem fácil, por conta de ser tudo nativo, o único "valor externo" nesse caso é o count.
Vale lembrar que o usuário precisa autorizar esse compartilhamento, ele não é automático.
```js
let count;
async function share(){
const data = {
title: 'Feliz Natal!',
text: `Consegui salvar o Natal de ${count} famílias! Será que você consegue me superar? Clique no link abaixo, jogue e descubra!`,
url: 'https://react-dev-victor-landing-page.netlify.app/'
}
if(navigator.canShare && navigator.canShare(data)){
await navigator.share(data);
}
}
```
### Observação
Os trechos de código acima foram os mais marcantes, por envolverem uma lógica um pouco mais complexa, como os outros são mais simples, não expliquei com tantos detalhes.
# Resultado
## Autores
- [@Victor-Lis](https://github.com/Victor-Lis)