├── .gitignore ├── LICENSE ├── README.md ├── background.png ├── cactus.png ├── dino.png ├── example.png ├── index.html ├── script.js └── style.css /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Celso Henrique 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Dio Dino Game 2 | Dino game for Digital Innovation One's lesson, using only JS, HTML and CSS 3 | 4 | ![screenshot](example.png?raw=true "screenshot") 5 | 6 | # License 7 | This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details 8 | -------------------------------------------------------------------------------- /background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/celso-henrique/dio-dino-game/d5889ececb58df096616ad7b4cbfc44a21625c18/background.png -------------------------------------------------------------------------------- /cactus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/celso-henrique/dio-dino-game/d5889ececb58df096616ad7b4cbfc44a21625c18/cactus.png -------------------------------------------------------------------------------- /dino.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/celso-henrique/dio-dino-game/d5889ececb58df096616ad7b4cbfc44a21625c18/dino.png -------------------------------------------------------------------------------- /example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/celso-henrique/dio-dino-game/d5889ececb58df096616ad7b4cbfc44a21625c18/example.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Dio Dino Game 6 | 7 | 8 | 9 | 10 |
11 |
12 |
13 | 14 | 15 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | const dino = document.querySelector('.dino'); 2 | const background = document.querySelector('.background'); 3 | 4 | let isJumping = false; 5 | let isGameOver = false; 6 | let position = 0; 7 | 8 | function handleKeyUp(event) { 9 | if (event.keyCode === 32) { 10 | if (!isJumping) { 11 | jump(); 12 | } 13 | } 14 | } 15 | 16 | function jump() { 17 | isJumping = true; 18 | 19 | let upInterval = setInterval(() => { 20 | if (position >= 150) { 21 | // Descendo 22 | clearInterval(upInterval); 23 | 24 | let downInterval = setInterval(() => { 25 | if (position <= 0) { 26 | clearInterval(downInterval); 27 | isJumping = false; 28 | } else { 29 | position -= 20; 30 | dino.style.bottom = position + 'px'; 31 | } 32 | }, 20); 33 | } else { 34 | // Subindo 35 | position += 20; 36 | dino.style.bottom = position + 'px'; 37 | } 38 | }, 20); 39 | } 40 | 41 | function createCactus() { 42 | const cactus = document.createElement('div'); 43 | let cactusPosition = 1000; 44 | let randomTime = Math.random() * 6000; 45 | 46 | if (isGameOver) return; 47 | 48 | cactus.classList.add('cactus'); 49 | background.appendChild(cactus); 50 | cactus.style.left = cactusPosition + 'px'; 51 | 52 | let leftTimer = setInterval(() => { 53 | if (cactusPosition < -60) { 54 | // Saiu da tela 55 | clearInterval(leftTimer); 56 | background.removeChild(cactus); 57 | } else if (cactusPosition > 0 && cactusPosition < 60 && position < 60) { 58 | // Game over 59 | clearInterval(leftTimer); 60 | isGameOver = true; 61 | document.body.innerHTML = '

Fim de jogo

'; 62 | } else { 63 | cactusPosition -= 10; 64 | cactus.style.left = cactusPosition + 'px'; 65 | } 66 | }, 20); 67 | 68 | setTimeout(createCactus, randomTime); 69 | } 70 | 71 | createCactus(); 72 | document.addEventListener('keyup', handleKeyUp); 73 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #fafafa; 3 | } 4 | 5 | .dino { 6 | position: absolute; 7 | bottom: 0; 8 | background-image: url(dino.png); 9 | width: 60px; 10 | height: 60px; 11 | } 12 | 13 | .cactus { 14 | position: absolute; 15 | width: 60px; 16 | height: 60px; 17 | bottom: 0; 18 | background-image: url(cactus.png); 19 | } 20 | 21 | .game-over { 22 | text-align: center; 23 | color: #666; 24 | margin: 50px 0; 25 | font-family: arial; 26 | } 27 | 28 | @keyframes slideright { 29 | from { 30 | background-position: 70000%; 31 | } 32 | to { 33 | background-position: 0%; 34 | } 35 | } 36 | 37 | .background { 38 | position: absolute; 39 | bottom: 0px; 40 | background-image: url('background.png'); 41 | background-repeat: repeat-x; 42 | animation: slideright 600s infinite linear; 43 | -webkit-animation: slideright 600s infinite linear; 44 | width: 100%; 45 | height: 200px; 46 | } 47 | --------------------------------------------------------------------------------