3 changed files with 46 additions and 19 deletions
Unified View
Diff Options
-
+28 -6gorge.css
-
+1 -0gorge.html
-
+17 -13gorge.js
+ 28
- 6
gorge.css
View File
| @@ -527,20 +527,38 @@ div::-webkit-scrollbar-corner { | |||||
| } | } | ||||
| } | } | ||||
| .popup-micro { | |||||
| .powerup { | |||||
| position: fixed; | position: fixed; | ||||
| --leftpos: 50%; | --leftpos: 50%; | ||||
| --toppos: 50%; | --toppos: 50%; | ||||
| --lifetime: 10s; | --lifetime: 10s; | ||||
| left: var(--leftpos); | left: var(--leftpos); | ||||
| top: var(--toppos); | top: var(--toppos); | ||||
| width: 100px; | |||||
| height: 100px; | |||||
| width: 125px; | |||||
| height: 125px; | |||||
| font-size: 80px; | font-size: 80px; | ||||
| animation: popup-micro-frames var(--lifetime) linear; | |||||
| animation: powerup-frames var(--lifetime) linear; | |||||
| transition: 0.25s; | |||||
| border-radius: 50%; | |||||
| background: #611; | |||||
| border: 150px; | |||||
| z-index: 10; | |||||
| } | |||||
| .powerup:hover { | |||||
| transform: scale(1.25, 1.25); | |||||
| } | |||||
| .powerup:active { | |||||
| transform: scale(0, 0); | |||||
| } | |||||
| .powerup.powerup-clicked { | |||||
| transform: scale(0, 0); | |||||
| pointer-events: none; | |||||
| } | } | ||||
| @keyframes popup-micro-frames { | |||||
| @keyframes powerup-frames { | |||||
| 0% { | 0% { | ||||
| opacity: 0; | opacity: 0; | ||||
| } | } | ||||
| @@ -555,6 +573,10 @@ div::-webkit-scrollbar-corner { | |||||
| } | } | ||||
| } | } | ||||
| .popup-micro > .fas { | |||||
| .powerup > .fas { | |||||
| width: 100%; | |||||
| height: 100%; | |||||
| text-align: center; | text-align: center; | ||||
| transform: translate(0, 17.5px); | |||||
| -webkit-text-stroke: 10px green; | |||||
| } | } | ||||
+ 1
- 0
gorge.html
View File
| @@ -4,6 +4,7 @@ | |||||
| <head> | <head> | ||||
| <meta charset="utf-8"> | <meta charset="utf-8"> | ||||
| <title>Gorge</title> | <title>Gorge</title> | ||||
| <link rel="stylesheet" type="text/css" href="https://csshake.surge.sh/csshake.min.css"> | |||||
| <link rel="stylesheet" href="gorge.css"> | <link rel="stylesheet" href="gorge.css"> | ||||
| <script src="polyfill.js"></script> | <script src="polyfill.js"></script> | ||||
| <script src="util.js"></script> | <script src="util.js"></script> | ||||
+ 17
- 13
gorge.js
View File
| @@ -685,44 +685,48 @@ function showNews(text) { | |||||
| }, 10000); | }, 10000); | ||||
| } | } | ||||
| function doPopupMicro() { | |||||
| function doPowerup() { | |||||
| const lifetime = 10000; | const lifetime = 10000; | ||||
| const div = document.createElement("div"); | |||||
| const powerup = document.createElement("div"); | |||||
| const left = Math.round(Math.random() * 50 + 25) + "%"; | const left = Math.round(Math.random() * 50 + 25) + "%"; | ||||
| const top = Math.round(Math.random() * 50 + 25) + "%"; | const top = Math.round(Math.random() * 50 + 25) + "%"; | ||||
| div.classList.add("popup-micro"); | |||||
| powerup.classList.add("powerup"); | |||||
| div.style.setProperty("--lifetime", lifetime/1000 + "s"); | |||||
| div.style.setProperty("--leftpos", left); | |||||
| div.style.setProperty("--toppos", top); | |||||
| powerup.style.setProperty("--lifetime", lifetime/1000 + "s"); | |||||
| powerup.style.setProperty("--leftpos", left); | |||||
| powerup.style.setProperty("--toppos", top); | |||||
| const icon = document.createElement("div"); | const icon = document.createElement("div"); | ||||
| icon.classList.add("fas"); | icon.classList.add("fas"); | ||||
| icon.classList.add("fa-drumstick-bite"); | icon.classList.add("fa-drumstick-bite"); | ||||
| div.appendChild(icon); | |||||
| powerup.appendChild(icon); | |||||
| const body = document.querySelector("body"); | const body = document.querySelector("body"); | ||||
| body.appendChild(div); | |||||
| body.appendChild(powerup); | |||||
| const remove = setTimeout(() => { | const remove = setTimeout(() => { | ||||
| body.removeChild(div); | |||||
| body.removeChild(powerup); | |||||
| }, lifetime); | }, lifetime); | ||||
| setTimeout(() => { | setTimeout(() => { | ||||
| doPopupMicro(); | |||||
| doPowerup(); | |||||
| }, 20000); | }, 20000); | ||||
| div.addEventListener("click", e => { | |||||
| powerup.addEventListener("mousedown", e => { | |||||
| clickPopup("GULP!", "gulp", [e.clientX, e.clientY]); | clickPopup("GULP!", "gulp", [e.clientX, e.clientY]); | ||||
| clickPopup("+1000 food", "food", [e.clientX, e.clientY]); | clickPopup("+1000 food", "food", [e.clientX, e.clientY]); | ||||
| powerup.classList.add("powerup-clicked"); | |||||
| resources.food += 1000; | resources.food += 1000; | ||||
| clearTimeout(remove); | clearTimeout(remove); | ||||
| body.removeChild(div); | |||||
| setTimeout(() => { | |||||
| body.removeChild(powerup); | |||||
| }, 500); | |||||
| }); | }); | ||||
| } | } | ||||
| @@ -829,7 +833,7 @@ window.onload = function() { | |||||
| lastTime = performance.now(); | lastTime = performance.now(); | ||||
| doNews(); | doNews(); | ||||
| doPopupMicro(); | |||||
| doPowerup(); | |||||
| setTimeout(updateDisplay, 1000/updateRate); | setTimeout(updateDisplay, 1000/updateRate); | ||||