├── README.md
├── index.html
├── script.js
└── style.css
/README.md:
--------------------------------------------------------------------------------
1 | # Oi, tudo bem? Chegou aqui através do curso, certo? 🙃
2 |
3 | Esse é o repositório da nossa aula de Javascript, na qual vamos fazer um simples jogo Gênesis com apenas algumas linhas de código!
4 |
5 | ### Os requisitos são:
6 |
7 | * [HTML básico](https://www.w3schools.com/html/)
8 | * [CSS básico](https://developer.mozilla.org/pt-BR/docs/Web/CSS)
9 | * [Javascript básico](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript)
10 |
11 |
12 |
13 | ## 🚀 Let's code! 🚀
14 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Genesis
8 |
9 |
10 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
1 | let order = [];
2 | let clickedOrder = [];
3 | let score = 0;
4 |
5 | //0 - verde
6 | //1 - vermelho
7 | //2 - amarelo
8 | //3 - azul
9 |
10 | const blue = document.querySelector('.blue');
11 | const red = document.querySelector('.red');
12 | const green = document.querySelector('.green');
13 | const yellow = document.querySelector('.yellow');
14 |
15 | //cria ordem aletoria de cores
16 | let shuffleOrder = () => {
17 | let colorOrder = Math.floor(Math.random() * 4);
18 | order[order.length] = colorOrder;
19 | clickedOrder = [];
20 |
21 | for(let i in order) {
22 | let elementColor = createColorElement(order[i]);
23 | lightColor(elementColor, Number(i) + 1);
24 | }
25 | }
26 |
27 | //acende a proxima cor
28 | let lightColor = (element, number) => {
29 | number = number * 500;
30 | setTimeout(() => {
31 | element.classList.add('selected');
32 | }, number - 250);
33 | setTimeout(() => {
34 | element.classList.remove('selected');
35 | });
36 | }
37 |
38 | //checa se os botoes clicados são os mesmos da ordem gerada no jogo
39 | let checkOrder = () => {
40 | for(let i in clickedOrder) {
41 | if(clickedOrder[i] != order[i]) {
42 | gameOver();
43 | break;
44 | }
45 | }
46 | if(clickedOrder.length == order.length) {
47 | alert(`Pontuação: ${score}\nVocê acertou! Iniciando próximo nível!`);
48 | nextLevel();
49 | }
50 | }
51 |
52 | //funcao para o clique do usuario
53 | let click = (color) => {
54 | clickedOrder[clickedOrder.length] = color;
55 | createColorElement(color).classList.add('selected');
56 |
57 | setTimeout(() => {
58 | createColorElement(color).classList.remove('selected');
59 | checkOrder();
60 | },250);
61 | }
62 |
63 | //funcao que retorna a cor
64 | let createColorElement = (color) => {
65 | if(color == 0) {
66 | return green;
67 | } else if(color == 1) {
68 | return red;
69 | } else if (color == 2) {
70 | return yellow;
71 | } else if (color == 3) {
72 | return blue;
73 | }
74 | }
75 |
76 | //funcao para proximo nivel do jogo
77 | let nextLevel = () => {
78 | score++;
79 | shuffleOrder();
80 | }
81 |
82 | //funcao para game over
83 | let gameOver = () => {
84 | alert(`Pontuação: ${score}!\nVocê perdeu o jogo!\nClique em OK para iniciar um novo jogo`);
85 | order = [];
86 | clickedOrder = [];
87 |
88 | playGame();
89 | }
90 |
91 | //funcao de inicio do jogo
92 | let playGame = () => {
93 | alert('Bem vindo ao Gênesis! Iniciando novo jogo!');
94 | score = 0;
95 |
96 | nextLevel();
97 | }
98 |
99 | //eventos de clique para as cores
100 | green.onclick = () => click(0);
101 | red.onclick = () => click(1);
102 | yellow.onclick = () => click(2);
103 | blue.onclick = () => click(3);
104 |
105 |
106 | //inicio do jogo
107 | playGame();
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | background-color: rgb(208, 255, 239);
4 | }
5 |
6 | .main-game {
7 | height: 100vh;
8 | width: 100vw;
9 | display: flex;
10 | justify-content: center;
11 | align-items: center;
12 | }
13 |
14 | .genius {
15 | display: grid;
16 | grid-template-areas: 'verde vermelho'
17 | 'amarelo azul';
18 | grid-gap: 10px;
19 | border: 1px solid #ffffff;
20 | background-color: #ffffff;
21 | border-radius: 100%;
22 | width: 700px;
23 | height: 700px;
24 | }
25 |
26 | .blue {
27 | grid-area: azul;
28 | background-color: blue;
29 | border-bottom-right-radius: 100%;
30 | }
31 |
32 | .red {
33 | grid-area: vermelho;
34 | background-color: red;
35 | border-top-right-radius: 100%;
36 | }
37 |
38 | .yellow {
39 | grid-area: amarelo;
40 | background-color: yellow;
41 | border-bottom-left-radius: 100%;
42 | }
43 |
44 | .green {
45 | grid-area: verde;
46 | background-color: green;
47 | border-top-left-radius: 100%;
48 | }
49 |
50 | .selected {
51 | opacity: 0.8;
52 | }
--------------------------------------------------------------------------------