From 0605794170a98cdd249fb3d238319d99c9477548 Mon Sep 17 00:00:00 2001 From: Chaz Carothers Date: Fri, 8 Oct 2021 18:25:19 -0500 Subject: [PATCH] added flying ostrich game --- .../Flying-Ostrich-Game/index.html | 16 ++++++ .../Flying-Ostrich-Game/ostrich.jpeg | Bin 0 -> 5235 bytes .../Flying-Ostrich-Game/script.js | 53 ++++++++++++++++++ .../Flying-Ostrich-Game/style.css | 45 +++++++++++++++ 4 files changed, 114 insertions(+) create mode 100644 Awesome Javascript Projects_Scripts/Flying-Ostrich-Game/index.html create mode 100644 Awesome Javascript Projects_Scripts/Flying-Ostrich-Game/ostrich.jpeg create mode 100644 Awesome Javascript Projects_Scripts/Flying-Ostrich-Game/script.js create mode 100644 Awesome Javascript Projects_Scripts/Flying-Ostrich-Game/style.css 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 0000000000000000000000000000000000000000..186c220bf47076254c5b39e1ad5200c4af6a4028 GIT binary patch literal 5235 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 literal 0 HcmV?d00001 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%; +}