共有 3 個檔案被更改，包括 46 行新增 和 19 行删除
分割檢視
Diff Options
-
+28 -6gorge.css
-
+1 -0gorge.html
-
+17 -13gorge.js
+ 28
- 6
gorge.css
查看文件
| @@ -527,20 +527,38 @@ div::-webkit-scrollbar-corner { | |||
| } | |||
| } | |||
| .popup-micro { | |||
| .powerup { | |||
| position: fixed; | |||
| --leftpos: 50%; | |||
| --toppos: 50%; | |||
| --lifetime: 10s; | |||
| left: var(--leftpos); | |||
| top: var(--toppos); | |||
| width: 100px; | |||
| height: 100px; | |||
| width: 125px; | |||
| height: 125px; | |||
| 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% { | |||
| opacity: 0; | |||
| } | |||
| @@ -555,6 +573,10 @@ div::-webkit-scrollbar-corner { | |||
| } | |||
| } | |||
| .popup-micro > .fas { | |||
| .powerup > .fas { | |||
| width: 100%; | |||
| height: 100%; | |||
| text-align: center; | |||
| transform: translate(0, 17.5px); | |||
| -webkit-text-stroke: 10px green; | |||
| } | |||
+ 1
- 0
gorge.html
查看文件
| @@ -4,6 +4,7 @@ | |||
| <head> | |||
| <meta charset="utf-8"> | |||
| <title>Gorge</title> | |||
| <link rel="stylesheet" type="text/css" href="https://csshake.surge.sh/csshake.min.css"> | |||
| <link rel="stylesheet" href="gorge.css"> | |||
| <script src="polyfill.js"></script> | |||
| <script src="util.js"></script> | |||
+ 17
- 13
gorge.js
查看文件
| @@ -685,44 +685,48 @@ function showNews(text) { | |||
| }, 10000); | |||
| } | |||
| function doPopupMicro() { | |||
| function doPowerup() { | |||
| const lifetime = 10000; | |||
| const div = document.createElement("div"); | |||
| const powerup = document.createElement("div"); | |||
| const left = 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"); | |||
| icon.classList.add("fas"); | |||
| icon.classList.add("fa-drumstick-bite"); | |||
| div.appendChild(icon); | |||
| powerup.appendChild(icon); | |||
| const body = document.querySelector("body"); | |||
| body.appendChild(div); | |||
| body.appendChild(powerup); | |||
| const remove = setTimeout(() => { | |||
| body.removeChild(div); | |||
| body.removeChild(powerup); | |||
| }, lifetime); | |||
| setTimeout(() => { | |||
| doPopupMicro(); | |||
| doPowerup(); | |||
| }, 20000); | |||
| div.addEventListener("click", e => { | |||
| powerup.addEventListener("mousedown", e => { | |||
| clickPopup("GULP!", "gulp", [e.clientX, e.clientY]); | |||
| clickPopup("+1000 food", "food", [e.clientX, e.clientY]); | |||
| powerup.classList.add("powerup-clicked"); | |||
| resources.food += 1000; | |||
| clearTimeout(remove); | |||
| body.removeChild(div); | |||
| setTimeout(() => { | |||
| body.removeChild(powerup); | |||
| }, 500); | |||
| }); | |||
| } | |||
| @@ -829,7 +833,7 @@ window.onload = function() { | |||
| lastTime = performance.now(); | |||
| doNews(); | |||
| doPopupMicro(); | |||
| doPowerup(); | |||
| setTimeout(updateDisplay, 1000/updateRate); | |||