diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6f3a291 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/assets/img/marioJump.gif b/assets/img/marioJump.gif new file mode 100644 index 0000000..0ec8ac9 Binary files /dev/null and b/assets/img/marioJump.gif differ diff --git a/assets/projects/superMario/css/style.css b/assets/projects/superMario/css/style.css new file mode 100644 index 0000000..1b0bd37 --- /dev/null +++ b/assets/projects/superMario/css/style.css @@ -0,0 +1,94 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +.game-board{ + width: 100%; + height: 500px; + margin: 0 auto; + border-bottom: 15px solid rgb(35, 160, 35); + position: relative; + overflow: hidden; + background: linear-gradient(#87CEEB, #E0F6FF); +} + +.player { + width: 150px; + position: absolute; + bottom: 0; +} + +.jump { + animation: jump 500ms ease-out; +} + +.clouds { + position: absolute; + width: 550px; + animation: clouds-animation 20s infinite linear; +} + +.pipe{ + position: absolute; + bottom: 0; + width: 80px; + animation: pipe-animation 1.5s infinite linear; +} + +.scores-cards{ + justify-content: center; + display: flex; + font-size: 2rem; +} + +.score { + text-transform: uppercase; + letter-spacing: 0.1rem; +} + +.score-number { + margin-left: .5rem; +} + +@keyframes pipe-animation { + from { + right: -80px; + } + + to { + right: 100%; + } +} + +@keyframes jump { + 0% { + bottom: 0; + } + + 40%{ + bottom: 180px; + } + + 50% { + bottom: 180px; + } + + 60% { + bottom: 180px; + } + + 100%{ + bottom: 0; + } +} + +@keyframes clouds-animation { + from { + right: -150; + } + to { + right: 100%; + } +} \ No newline at end of file diff --git a/assets/projects/superMario/images/clouds.png b/assets/projects/superMario/images/clouds.png new file mode 100644 index 0000000..4ddc808 Binary files /dev/null and b/assets/projects/superMario/images/clouds.png differ diff --git a/assets/projects/superMario/images/game-over.png b/assets/projects/superMario/images/game-over.png new file mode 100644 index 0000000..3681da3 Binary files /dev/null and b/assets/projects/superMario/images/game-over.png differ diff --git a/assets/projects/superMario/images/mario.gif b/assets/projects/superMario/images/mario.gif new file mode 100644 index 0000000..9199d1e Binary files /dev/null and b/assets/projects/superMario/images/mario.gif differ diff --git a/assets/projects/superMario/images/pipe.png b/assets/projects/superMario/images/pipe.png new file mode 100644 index 0000000..b20d387 Binary files /dev/null and b/assets/projects/superMario/images/pipe.png differ diff --git a/assets/projects/superMario/index.html b/assets/projects/superMario/index.html new file mode 100644 index 0000000..bf5b8c9 --- /dev/null +++ b/assets/projects/superMario/index.html @@ -0,0 +1,21 @@ + + + + + + Mario Jump + + + +
+ Imagem de nuvens + player + Imagem do tubo +
+
+
Score:
+
00
+
+ + + \ No newline at end of file diff --git a/assets/projects/superMario/js/script.js b/assets/projects/superMario/js/script.js new file mode 100644 index 0000000..03aea30 --- /dev/null +++ b/assets/projects/superMario/js/script.js @@ -0,0 +1,38 @@ +const mario = document.querySelector(".player"); +const pipe = document.querySelector(".pipe"); +let score = 0; +const scoreNumberElement = document.querySelector('.score-number'); + +const jump = () => { + mario.classList.add('jump'); + setTimeout(() => { + mario.classList.remove('jump'); + },500); +} + +const loop = setInterval(() => { + const pipePosition = pipe.offsetLeft; + const marioPosition = +window.getComputedStyle(mario).bottom.replace('px', ''); + + if(pipePosition <= 120 && pipePosition > 0 && marioPosition < 80){ + pipe.style.animation = "none"; + pipe.style.left = `${pipePosition}px`; + + mario.style.animation = "none"; + mario.style.bottom = `${marioPosition}px`; + + mario.src = "./images/game-over.png"; + mario.style.width = '75px'; + mario.style.marginLeft = '50px'; + clearInterval(loop); + setTimeout(() => { + window.location.reload(); + }, 2000); + } else if(pipePosition <= 120 && pipePosition > 0 && marioPosition >= 80){ + score += 1; // Aumenta o score em 1 + scoreNumberElement.textContent = score.toString().padStart(2, '0'); + } + +},10) + +document.addEventListener("keydown", jump); \ No newline at end of file diff --git a/index.html b/index.html index 13735c1..7e4623e 100644 --- a/index.html +++ b/index.html @@ -14,107 +14,9 @@

Games Para se Divertir

-
-
- Projeto D&D -
-
D&D
- Quero Jogar -
-
-
- Projeto da Cobrinha -
-
Jogo da Cobrinha
- Quero Jogar -
-
-
- Projeto Loteria -
-
Loteria
- Quero Jogar -
-
-
- Projeto Numero secreto -
-
Numero secreto
- Quero Jogar -
-
-
- Projeto Alura-Midi -
-
Alura-Midi
- Quero Jogar -
-
-
- Projeto Detona Ralph -
-
Detona Ralph
- Quero Jogar -
-
-
- Projeto Jogo da memoria -
-
Jogo da memoria
- Quero Jogar -
-
-
- Projeto Jogo do numero secreto por voz -
-
Jogo do numero secreto por voz
- Quero Jogar -
-
-
- Pokedex -
-
Pokedex
- Quero Jogar -
-
-
- Yo-Gi-Oh -
-
Yo-Gi-Oh
- Quero Jogar -
-
-
- Teclado -
-
Teclado
- Quero Jogar -
-
+
+ \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..3887177 --- /dev/null +++ b/script.js @@ -0,0 +1,97 @@ +const projects = [ + { + title: "D&D", + imgSrc: "./assets/img/DD.gif", + link: "./assets/projects/DD/index.html", + alt: "Projeto D&D" + }, + { + title: "Jogo da Cobrinha", + imgSrc: "./assets/img/Snake.gif", + link: "./assets/projects/JogoDaCobrinha/index.html", + alt: "Projeto da Cobrinha" + }, + { + title: "Loteria", + imgSrc: "./assets/img/Loteria.png", + link: "./assets/projects/Loteria/index.html", + alt: "Projeto Loteria" + }, + { + title: "Numero secreto", + imgSrc: "./assets/img/Numero_secreto.png", + link: "./assets/projects/Jogo-do-numero-secreto/index.html", + alt: "Projeto Numero secreto" + }, + { + title: "Alura-Midi", + imgSrc: "./assets/img/alura-midi.png", + link: "./assets/projects/Alura-Midi/index.html", + alt: "Projeto Alura-Midi" + }, + { + title: "Detona Ralph", + imgSrc: "./assets/img/Detona_Ralph.png", + link: "./assets/projects/Detona_Ralph/index.html", + alt: "Projeto Detona Ralph" + }, + { + title: "Jogo da memoria", + imgSrc: "./assets/img/memoria.png", + link: "./assets/projects/Jogo_Da_Memoria/index.html", + alt: "Projeto Jogo da memoria" + }, + { + title: "Jogo do numero secreto por voz", + imgSrc: "./assets/img/Numero_voz.PNG", + link: "https://numero-secreto-reconhecimento-voz-seven.vercel.app/", + alt: "Projeto Jogo do numero secreto por voz" + }, + { + title: "Pokedex", + imgSrc: "./assets/img/pokedex.gif", + link: "./assets/projects/pokedex/index.html", + alt: "Pokedex" + }, + { + title: "Yo-Gi-Oh", + imgSrc: "./assets/img/Yo-Gi-Oh.gif", + link: "./assets/projects/js-yugioh/index.html", + alt: "Yo-Gi-Oh" + }, + { + title: "Teclado", + imgSrc: "./assets/img/Teclado.gif", + link: "./assets/projects/Teclado/index.html", + alt: "Teclado" + }, + { + title: "Mario Jump", + imgSrc: "./assets/img/marioJump.gif", + link: "./assets/projects/superMario/index.html", + alt: "Mario Jump" + } +]; + +// Função para criar e adicionar os cards ao DOM +function createCards() { + const container = document.getElementById('card-container'); + + projects.forEach(project => { + const card = document.createElement('div'); + card.className = 'card m-4'; + card.style.width = '20rem'; + + card.innerHTML = ` + ${project.alt} +
+
${project.title}
+ Quero Jogar +
+ `; + + container.appendChild(card); + }); +} + +createCards(); \ No newline at end of file