├── MARIO
├── img
│ ├── clouds.png
│ ├── mario.gif
│ ├── pipe.png
│ └── game-over.png
├── soung
│ ├── audio_theme.mp3
│ └── audio_gameover.mp3
├── index.html
├── styles.css
└── script.js
└── README.md
/MARIO/img/clouds.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LeehXD/MINI-GAME-MARIO/HEAD/MARIO/img/clouds.png
--------------------------------------------------------------------------------
/MARIO/img/mario.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LeehXD/MINI-GAME-MARIO/HEAD/MARIO/img/mario.gif
--------------------------------------------------------------------------------
/MARIO/img/pipe.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LeehXD/MINI-GAME-MARIO/HEAD/MARIO/img/pipe.png
--------------------------------------------------------------------------------
/MARIO/img/game-over.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LeehXD/MINI-GAME-MARIO/HEAD/MARIO/img/game-over.png
--------------------------------------------------------------------------------
/MARIO/soung/audio_theme.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LeehXD/MINI-GAME-MARIO/HEAD/MARIO/soung/audio_theme.mp3
--------------------------------------------------------------------------------
/MARIO/soung/audio_gameover.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LeehXD/MINI-GAME-MARIO/HEAD/MARIO/soung/audio_gameover.mp3
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # MINI-GAME-MARIO
2 | Vamos juntar a Nostalgia do jogo do Mario com a jogabilidade do Dino do Google Chrome, e criar esse mini game incrível e bem fácil de desenvolver.
3 |
4 | Tutorial Completo
5 | https://youtu.be/2_nbYVVoHR8
6 |
--------------------------------------------------------------------------------
/MARIO/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | MARIO
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
Game Over :(
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/MARIO/styles.css:
--------------------------------------------------------------------------------
1 | *{
2 | margin: 0;
3 | padding: 0;
4 | box-sizing: border-box;
5 | }
6 |
7 | .game{
8 | width: 100%;
9 | height: 100vh;
10 | border-bottom: 30px solid green;
11 | margin: 0 auto;
12 | position: relative;
13 | overflow: hidden;
14 | background: linear-gradient(#87CEEB, #E0F6FF);
15 | }
16 |
17 | button {
18 | background: green;
19 | color: white;
20 | font-weight: bold;
21 | font-size: 1.5rem;
22 | border: none;
23 | padding: 1rem;
24 | position: absolute;
25 | right: 50vw;
26 | top: 50vh;
27 | cursor: pointer;
28 | z-index: 1;
29 | }
30 | button:hover {
31 | border: 2px solid green;
32 | background: none;
33 | color: green;
34 | }
35 |
36 | .game-over {
37 | width: 100%;
38 | height: 100vh;
39 | background: rgba(0, 0, 0, 0.322);
40 | display: none;
41 | align-items: center;
42 | justify-content: center;
43 | flex-direction: column;
44 | position: fixed;
45 | top: 0;
46 | left: 0;
47 | }
48 | .game-over h1 {
49 | font-size: 3rem;
50 | color: red;
51 | text-align: center;
52 | margin-top: 15rem;
53 | }
54 |
55 | .pipe {
56 | position: absolute;
57 | bottom: 0;
58 | right: -80px;
59 | width: 80px;
60 | }
61 |
62 | .mario{
63 | width: 150px;
64 | position: absolute;
65 | bottom: 0;
66 | }
67 |
68 | .clouds {
69 | width: 550px;
70 | position: absolute;
71 | top: 0;
72 | animation: clouds-animation 20s infinite linear;
73 | }
74 |
75 | @keyframes clouds-animation {
76 | from {
77 | right: -550px;
78 | }
79 | to {
80 | right: 100%;
81 | }
82 | }
83 |
84 | .pipe-animation {
85 | animation: pipe-animation 2s infinite linear;
86 | }
87 |
88 | @keyframes pipe-animation {
89 | from {
90 | right: -80px;
91 | }
92 |
93 | to {
94 | right: 100%;
95 | }
96 | }
97 |
98 | .jump {
99 | animation: jump 800ms ease-out;
100 | }
101 |
102 | @keyframes jump {
103 | 0% {
104 | bottom:0;
105 | }
106 |
107 | 40% {
108 | bottom: 200px;
109 | }
110 |
111 | 50% {
112 | bottom: 200px;
113 | }
114 |
115 | 60% {
116 | bottom: 200px;
117 | }
118 |
119 | 100% {
120 | bottom: 0;
121 | }
122 | }
--------------------------------------------------------------------------------
/MARIO/script.js:
--------------------------------------------------------------------------------
1 | const mario = document.querySelector('.mario')
2 | const pipe = document.querySelector('.pipe')
3 |
4 | const start = document.querySelector('.start')
5 | const gameOver = document.querySelector('.game-over')
6 |
7 | audioStart = new Audio('./src/audio/audio_theme.mp3')
8 | audioGameOver = new Audio('./src/audio/audio_gameover.mp3')
9 |
10 |
11 | const startGame = () => {
12 | pipe.classList.add('pipe-animation')
13 | start.style.display = 'none'
14 |
15 | // audio
16 | audioStart.play()
17 | }
18 |
19 | const restartGame = () => {
20 | gameOver.style.display = 'none'
21 | pipe.style.left = ''
22 | pipe.style.right = '0'
23 | mario.src = './src/img/mario.gif'
24 | mario.style.width = '150px'
25 | mario.style.bottom = '0'
26 |
27 | start.style.display = 'none'
28 |
29 | audioGameOver.pause()
30 | audioGameOver.currentTime = 0;
31 |
32 | audioStart.play()
33 | audioStart.currentTime = 0;
34 |
35 | }
36 |
37 | const jump = () => {
38 | mario.classList.add('jump')
39 |
40 | setTimeout(() => {
41 | mario.classList.remove('jump')
42 | }, 800)
43 | }
44 |
45 | const loop = () => {
46 | setInterval(() => {
47 | const pipePosition = pipe.offsetLeft
48 | const marioPosition = window
49 | .getComputedStyle(mario)
50 | .bottom.replace('px', ' ')
51 |
52 | if (pipePosition <= 120 && pipePosition > 0 && marioPosition < 80) {
53 | pipe.classList.remove('.pipe-animation')
54 | pipe.style.left = `${pipePosition}px`
55 |
56 | mario.classList.remove('.jump')
57 | mario.style.bottom = `${marioPosition}px`
58 |
59 | mario.src = './src/img/game-over.png'
60 | mario.style.width = '80px'
61 | mario.style.marginLeft = '50px'
62 |
63 |
64 | function stopAudioStart() {
65 | audioStart.pause()
66 | }
67 | stopAudioStart()
68 |
69 | audioGameOver.play()
70 |
71 | function stopAudio() {
72 | audioGameOver.pause()
73 | }
74 | setTimeout(stopAudio, 7000)
75 |
76 | gameOver.style.display = 'flex'
77 |
78 | clearInterval(loop)
79 | }
80 | }, 10)
81 | }
82 |
83 | loop()
84 |
85 | document.addEventListener('keypress', e => {
86 | const tecla = e.key
87 | if (tecla === ' ') {
88 | jump()
89 | }
90 | })
91 |
92 | document.addEventListener('touchstart', e => {
93 | if (e.touches.length) {
94 | jump()
95 | }
96 | })
97 |
98 | document.addEventListener('keypress', e => {
99 | const tecla = e.key
100 | if (tecla === 'Enter') {
101 | startGame()
102 | }
103 | })
--------------------------------------------------------------------------------