diff --git a/Awesome Javascript Projects_Scripts/Flying-Ostrich-Game/index.html b/Awesome Javascript Projects_Scripts/Flying-Ostrich-Game/index.html new file mode 100644 index 000000000..249507b4d --- /dev/null +++ b/Awesome Javascript Projects_Scripts/Flying-Ostrich-Game/index.html @@ -0,0 +1,16 @@ + + + + + Flying Ostrich! + + + +
+
+
+
+
+ + + diff --git a/Awesome Javascript Projects_Scripts/Flying-Ostrich-Game/ostrich.jpeg b/Awesome Javascript Projects_Scripts/Flying-Ostrich-Game/ostrich.jpeg new file mode 100644 index 000000000..186c220bf Binary files /dev/null and b/Awesome Javascript Projects_Scripts/Flying-Ostrich-Game/ostrich.jpeg differ diff --git a/Awesome Javascript Projects_Scripts/Flying-Ostrich-Game/script.js b/Awesome Javascript Projects_Scripts/Flying-Ostrich-Game/script.js new file mode 100644 index 000000000..efb919288 --- /dev/null +++ b/Awesome Javascript Projects_Scripts/Flying-Ostrich-Game/script.js @@ -0,0 +1,53 @@ +var block = document.getElementById('block'); +var hole = document.getElementById('hole'); +var character = document.getElementById('character'); +var jumping = 0; +var counter = 0; + +hole.addEventListener('animationiteration', () => { + var random = -(Math.random() * 300 + 150); + hole.style.top = random + 'px'; + counter++; +}); +setInterval(function () { + var characterTop = parseInt( + window.getComputedStyle(character).getPropertyValue('top') + ); + if (jumping == 0) { + character.style.top = characterTop + 3 + 'px'; + } + var blockLeft = parseInt( + window.getComputedStyle(block).getPropertyValue('left') + ); + var holeTop = parseInt(window.getComputedStyle(hole).getPropertyValue('top')); + var cTop = -(500 - characterTop); + if ( + characterTop > 480 || + (blockLeft < 20 && + blockLeft > -50 && + (cTop < holeTop || cTop > holeTop + 130)) + ) { + alert('Game over. Score: ' + (counter - 1)); + character.style.top = 100 + 'px'; + counter = 0; + } +}, 10); + +function jump() { + jumping = 1; + let jumpCount = 0; + var jumpInterval = setInterval(function () { + var characterTop = parseInt( + window.getComputedStyle(character).getPropertyValue('top') + ); + if (characterTop > 6 && jumpCount < 15) { + character.style.top = characterTop - 5 + 'px'; + } + if (jumpCount > 20) { + clearInterval(jumpInterval); + jumping = 0; + jumpCount = 0; + } + jumpCount++; + }, 10); +} diff --git a/Awesome Javascript Projects_Scripts/Flying-Ostrich-Game/style.css b/Awesome Javascript Projects_Scripts/Flying-Ostrich-Game/style.css new file mode 100644 index 000000000..fdb3c6126 --- /dev/null +++ b/Awesome Javascript Projects_Scripts/Flying-Ostrich-Game/style.css @@ -0,0 +1,45 @@ +* { + padding: 0; + margin: 0; +} +#game { + width: 400px; + height: 500px; + border: 1px solid black; + margin: auto; + overflow: hidden; +} +#block { + width: 50px; + height: 500px; + background-color: green; + position: relative; + left: 400px; + animation: block 2s infinite linear; +} +@keyframes block { + 0% { + left: 400px; + } + 100% { + left: -50px; + } +} +#hole { + width: 50px; + height: 150px; + background-color: white; + position: relative; + left: 400px; + top: -500px; + animation: block 2s infinite linear; +} +#character { + width: 50px; + height: 50px; + position: absolute; + background-image: url('ostrich.jpeg'); + background-size: contain; + top: 100px; + border-radius: 50%; +}