├── .gitignore ├── public ├── favicon.ico ├── assets │ ├── car.png │ ├── gauge-one.png │ ├── gauge-two.png │ ├── background.jpg │ ├── cracked-one.png │ ├── cracked-two.png │ ├── gauge-five.png │ ├── gauge-four.png │ ├── gauge-three.png │ ├── cracked-five.png │ ├── cracked-four.png │ └── cracked-three.png └── style.css ├── docs └── resources │ └── thumbnail.png ├── src ├── KeyController.js ├── TouchController.js └── App.js ├── README.md ├── LICENSE └── index.html /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | *.log 3 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fariasmateuss/star-race/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/assets/car.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fariasmateuss/star-race/HEAD/public/assets/car.png -------------------------------------------------------------------------------- /public/assets/gauge-one.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fariasmateuss/star-race/HEAD/public/assets/gauge-one.png -------------------------------------------------------------------------------- /public/assets/gauge-two.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fariasmateuss/star-race/HEAD/public/assets/gauge-two.png -------------------------------------------------------------------------------- /docs/resources/thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fariasmateuss/star-race/HEAD/docs/resources/thumbnail.png -------------------------------------------------------------------------------- /public/assets/background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fariasmateuss/star-race/HEAD/public/assets/background.jpg -------------------------------------------------------------------------------- /public/assets/cracked-one.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fariasmateuss/star-race/HEAD/public/assets/cracked-one.png -------------------------------------------------------------------------------- /public/assets/cracked-two.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fariasmateuss/star-race/HEAD/public/assets/cracked-two.png -------------------------------------------------------------------------------- /public/assets/gauge-five.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fariasmateuss/star-race/HEAD/public/assets/gauge-five.png -------------------------------------------------------------------------------- /public/assets/gauge-four.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fariasmateuss/star-race/HEAD/public/assets/gauge-four.png -------------------------------------------------------------------------------- /public/assets/gauge-three.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fariasmateuss/star-race/HEAD/public/assets/gauge-three.png -------------------------------------------------------------------------------- /public/assets/cracked-five.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fariasmateuss/star-race/HEAD/public/assets/cracked-five.png -------------------------------------------------------------------------------- /public/assets/cracked-four.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fariasmateuss/star-race/HEAD/public/assets/cracked-four.png -------------------------------------------------------------------------------- /public/assets/cracked-three.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fariasmateuss/star-race/HEAD/public/assets/cracked-three.png -------------------------------------------------------------------------------- /src/KeyController.js: -------------------------------------------------------------------------------- 1 | window.addEventListener('keyup', event => { 2 | if (event.keyCode === 37) { 3 | if (car.className === 'center') { 4 | car.className = 'left'; 5 | } 6 | 7 | if (car.className === 'right') { 8 | car.className = 'center'; 9 | } 10 | } 11 | 12 | if (event.keyCode === 39) { 13 | if (car.className === 'center') { 14 | car.className = 'right'; 15 | } 16 | 17 | if (car.className === 'left') { 18 | car.className = 'center'; 19 | } 20 | } 21 | }); 22 | -------------------------------------------------------------------------------- /src/TouchController.js: -------------------------------------------------------------------------------- 1 | window.addEventListener('click', event => { 2 | if (event.target.id === 'left-btn') { 3 | if (car.className === 'center') { 4 | car.className = 'left'; 5 | } 6 | 7 | if (car.className === 'right') { 8 | car.className = 'center'; 9 | } 10 | } 11 | 12 | if (event.target.id === 'right-btn') { 13 | if (car.className === 'center') { 14 | car.className = 'right'; 15 | } 16 | 17 | if (car.className === 'left') { 18 | car.className = 'center'; 19 | } 20 | } 21 | }); 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | ## Getting Started 4 | 5 | ### Prerequisites 6 | 7 | NodeJs is required. I used the package `serve` to run it in the browser through a node server. 8 | 9 | #### Cloning the Repository 10 | 11 | ``` 12 | git clone https://github.com/fariasmateuss/star-race.git 13 | ``` 14 | 15 | ### Installing 16 | 17 | ``` 18 | npm install && serve -D 19 | ``` 20 | 21 | _and_ 22 | 23 | ``` 24 | npx serve . 25 | ``` 26 | 27 | _or_ 28 | 29 | ``` 30 | ./node_modules/.bin/serve . 31 | ``` 32 | 33 | Open the game on localhost or your network address. 34 | 35 | # License 36 | 37 | [MIT License](/LICENSE) 38 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Mateus V. Farias 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 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 22 | 26 | 27 | 28 | 32 | 33 | 34 | 35 | Star Race 36 | 37 | 38 |
39 |
40 |
41 |
Star Race
42 |
The Video Game
43 |
44 |
45 |
46 |

Arrows to move / Avoid the potholes

47 |
48 |

Choose a difficulty

49 |
Slow
50 |
Fast
51 |
Insane
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 | Potholes Avoid 64 |
65 | 0 66 |
67 |
68 |
69 |

You may want to get your alignment checked out.

70 |
71 |
72 |

Star Race

73 |

Complimentary Aligment Check

74 |

75 | +10% Off 76 |
77 | If you liked it leave a star. 78 |

79 | Get This Service 80 |

81 | Present upon arrival. Per axle. One per customer. No cash value. 82 | Max value $[XXX]. No further discounts apply. See dealer for 83 | details. Expires %%todaysDatePlus30%%. 84 |

85 |
86 |
87 |

Game Over

88 |

You have failed.

89 | Get This Service 90 |

91 | Present upon arrival. Per axle. One per customer. No cash value. 92 | Max value $[XXX]. No further discounts apply. See dealer for 93 | details. Expires %%todaysDatePlus30%%. 94 |

95 |
96 |
97 |
98 |
99 | 100 | 101 | 102 | 103 | 104 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | const box = document.getElementById('game-box'); 2 | const lane = document.getElementById('lanes'); 3 | const gauge = document.getElementById('gauge'); 4 | const car = document.querySelector('#car'); 5 | const btn = document.querySelector('#start-btn'); 6 | const root = document.documentElement; 7 | 8 | function startGame(speed) { 9 | const enemy = document.querySelectorAll('.enemy'); 10 | 11 | for (let i = 0; i < enemy.length; i++) { 12 | enemy[i].remove(); 13 | } 14 | 15 | let hits = 0; 16 | let holes = 52; 17 | 18 | document.querySelector('#score').innerHTML = document.querySelectorAll( 19 | '.enemy', 20 | ).length; 21 | 22 | root.style.setProperty('--borderAnimation', 'border 1s linear infinite'); 23 | 24 | const hitCheck = 5; 25 | 26 | if (speed === 'SLOW') { 27 | root.style.setProperty('--animationTime', '1.5s'); 28 | } 29 | 30 | if (speed === 'FAST') { 31 | root.style.setProperty('--animationTime', '0.80s'); 32 | } 33 | 34 | if (speed === 'INSANE') { 35 | root.style.setProperty('--animationTime', '0.60s'); 36 | } 37 | 38 | const run = setInterval(buildEnemy, 1500); 39 | const hit = setInterval(ouchy, 1000 / hitCheck); 40 | 41 | btn.classList.add('start-off'); 42 | 43 | document.getElementById('end-finish').classList.remove('end-on'); 44 | 45 | function handleEnemy() { 46 | const createDiv = document.createElement('div'); 47 | const positions = Math.random() < 0.5 ? 'enemy1' : 11; 48 | 49 | if (positions === 11) { 50 | createDiv.className = `enemy enemy${Math.floor(Math.random() * 3)}`; 51 | } else { 52 | createDiv.className = 'enemy enemy1'; 53 | } 54 | 55 | lane.appendChild(createDiv); 56 | 57 | holes -= 1; 58 | } 59 | 60 | function buildEnemy() { 61 | for (let i = 0; i < 2; i++) { 62 | handleEnemy(); 63 | } 64 | } 65 | 66 | function ouchy() { 67 | if (holes < 1) { 68 | document.getElementById('finish-line').classList.add('finish-line'); 69 | 70 | document 71 | .querySelectorAll('.enemy') 72 | [document.querySelectorAll('.enemy').length - 2].remove(); 73 | 74 | document 75 | .querySelectorAll('.enemy') 76 | [document.querySelectorAll('.enemy').length - 1].remove(); 77 | 78 | clearInterval(hit); 79 | clearInterval(run); 80 | 81 | setTimeout(() => { 82 | document.getElementById('end-finish').classList.add('end-on'); 83 | 84 | btn.classList.remove('start-off'); 85 | 86 | root.style.setProperty('--borderAnimation', 'none'); 87 | }, 2000); 88 | } 89 | 90 | const enemy = document.querySelectorAll('.enemy'); 91 | 92 | for (let i = 0; i < enemy.length; i++) { 93 | const a = enemy[i].getBoundingClientRect(); 94 | const b = car.getBoundingClientRect(); 95 | const ouch = !( 96 | a.right < b.left || 97 | a.left > b.right || 98 | a.bottom < b.top || 99 | a.top > b.bottom 100 | ); 101 | 102 | if (ouch) { 103 | hits += 1; 104 | 105 | console.log('ouch'); 106 | 107 | enemy[i].remove(); 108 | 109 | box.classList.add('ouch'); 110 | 111 | setTimeout(() => { 112 | box.classList.remove('ouch'); 113 | }, 750); 114 | 115 | if (hits === 2) { 116 | box.classList.add('cracked-one'); 117 | 118 | gauge.classList.add('gauge-two'); 119 | } 120 | 121 | if (hits === 4) { 122 | box.classList.add('cracked-two'); 123 | 124 | gauge.classList.add('gauge-three'); 125 | } 126 | 127 | if (hits === 6) { 128 | box.classList.add('cracked-three'); 129 | 130 | gauge.classList.add('gauge-four'); 131 | } 132 | 133 | if (hits === 8) { 134 | box.classList.add('cracked-four'); 135 | 136 | gauge.classList.add('gauge-five'); 137 | } 138 | 139 | if (hits >= 9) { 140 | box.classList.add('cracked-five'); 141 | 142 | gauge.classList.add('gauge-five'); 143 | } 144 | 145 | if (hits >= 10) { 146 | clearInterval(hit); 147 | clearInterval(run); 148 | 149 | document.getElementById('game-over').classList.add('end-on'); 150 | 151 | btn.classList.remove('start-off'); 152 | 153 | root.style.setProperty('--borderAnimation', 'none'); 154 | } 155 | } 156 | 157 | document.querySelector('#score').innerHTML = document.querySelectorAll( 158 | '.enemy', 159 | ).length; 160 | } 161 | } 162 | } 163 | -------------------------------------------------------------------------------- /public/style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --pink: #f21d7a; 3 | --aqua: aqua; 4 | --car: url(./assets/car.png); 5 | --borderAnimation: border 1s linear infinite; 6 | --animationTime: 1.5s; 7 | } 8 | 9 | * { 10 | box-sizing: border-box; 11 | } 12 | 13 | body { 14 | padding: 0; 15 | margin: 0; 16 | overflow-x: hidden; 17 | } 18 | 19 | body::-webkit-scrollbar { 20 | width: 14px; 21 | } 22 | 23 | body::-webkit-scrollbar-track { 24 | background: #d4d4d4; 25 | } 26 | 27 | body::-webkit-scrollbar-thumb { 28 | background: #8d8d8d; 29 | border-radius: 7px; 30 | border-left: 4px solid #d4d4d4; 31 | border-right: 4px solid #d4d4d4; 32 | width: 24px; 33 | } 34 | 35 | a { 36 | text-decoration: none; 37 | } 38 | 39 | #game-container { 40 | width: 100vw; 41 | height: auto; 42 | display: flex; 43 | flex-direction: column; 44 | align-items: center; 45 | justify-content: center; 46 | perspective: 600px; 47 | font-family: monospace; 48 | color: white; 49 | transform: scale(1); 50 | } 51 | 52 | .hero-text { 53 | color: white; 54 | position: relative; 55 | font-family: monospace; 56 | text-align: center; 57 | } 58 | 59 | #game-box { 60 | width: 900px; 61 | height: 525px; 62 | min-height: 525px; 63 | border: 2px solid white; 64 | position: relative; 65 | overflow: hidden; 66 | border-radius: 10px; 67 | font-size: 0px; 68 | text-align: center; 69 | perspective: 600px; 70 | box-shadow: 0 0 50px 10px black; 71 | margin: 25px 0; 72 | } 73 | 74 | #game-box::after { 75 | content: ''; 76 | width: 100%; 77 | height: 100%; 78 | position: absolute; 79 | top: 0; 80 | left: 0; 81 | background-image: var(--car); 82 | background-size: 100% 100%; 83 | background-position: 0% 50%; 84 | background-repeat: no-repeat; 85 | z-index: 1; 86 | } 87 | 88 | .ouch::after { 89 | background-color: rgba(255, 0, 0, 0.25); 90 | animation: ouch 0.5s linear forwards !important; 91 | } 92 | 93 | @keyframes ouch { 94 | 25% { 95 | transform: rotate(1deg); 96 | } 97 | 98 | 50% { 99 | transform: rotate(-1deg); 100 | } 101 | 102 | 75% { 103 | transform: rotate(1deg); 104 | } 105 | } 106 | 107 | #lanes { 108 | width: 66%; 109 | height: 200%; 110 | margin-top: -35%; 111 | background-size: 100% 200px; 112 | background-position: 0% 0%; 113 | margin-left: calc(17%); 114 | position: relative; 115 | transform: rotateX(75deg); 116 | background-size: 100% 10%; 117 | transition: 0.25s; 118 | } 119 | 120 | #lanes::before { 121 | width: 110%; 122 | height: 100%; 123 | background: linear-gradient( 124 | to bottom, 125 | rgba(0, 255, 255, 0.75) 10%, 126 | transparent 10%, 127 | transparent 90%, 128 | rgba(0, 255, 255, 0.75) 90% 129 | ); 130 | 131 | background-size: 100% 100px; 132 | content: ''; 133 | position: absolute; 134 | top: 0; 135 | left: -5%; 136 | z-index: -1; 137 | animation: var(--borderAnimation); 138 | } 139 | 140 | #lanes::after { 141 | width: 100%; 142 | height: 100%; 143 | background: transparent; 144 | background: linear-gradient( 145 | to right, 146 | transparent 33.33%, 147 | rgba(255, 255, 255, 0.05) 33.33%, 148 | rgba(255, 255, 255, 0.05) 66.33%, 149 | transparent 66.33% 150 | ), 151 | linear-gradient(to bottom, #000f1e, #00143e); 152 | content: ''; 153 | position: absolute; 154 | top: 0; 155 | left: 0; 156 | z-index: -1; 157 | } 158 | 159 | @keyframes border { 160 | 100% { 161 | background-position: 0 600px; 162 | } 163 | } 164 | 165 | #score-box { 166 | position: absolute; 167 | width: 100%; 168 | text-align: center; 169 | text-transform: uppercase; 170 | top: 64%; 171 | font-size: 12px; 172 | z-index: 2; 173 | pointer-events: none; 174 | } 175 | 176 | #score { 177 | font-family: sans-serif; 178 | font-size: 60px; 179 | line-height: 100%; 180 | } 181 | 182 | #car { 183 | width: 100px; 184 | height: 100px; 185 | background: red; 186 | position: absolute; 187 | bottom: 5%; 188 | left: calc(50% - 50px); 189 | clip-path: polygon(25% 0%, 75% 0%, 100% 100%, 0% 100%); 190 | } 191 | 192 | .left { 193 | left: calc(33% - 50px) !important; 194 | } 195 | 196 | .right { 197 | left: calc(66% - 50px) !important; 198 | } 199 | 200 | .right + #lanes { 201 | margin-left: calc(0%); 202 | } 203 | 204 | .left + #lanes { 205 | margin-left: calc(34%); 206 | } 207 | 208 | .enemy { 209 | width: 25px; 210 | height: 15px; 211 | border-radius: 50%; 212 | position: absolute; 213 | transform-style: preserve-3d; 214 | background: #f21d7a; 215 | box-shadow: 0 0 0 1px aqua, inset 0 3px 0 3px rgba(0, 155, 155, 1), 216 | inset 0 8px 0 8px rgba(0, 100, 100, 1); 217 | } 218 | 219 | .enemy0 { 220 | top: 5%; 221 | left: 15%; 222 | animation: enemy1 var(--animationTime) steps(5) forwards; 223 | } 224 | 225 | @keyframes enemy1 { 226 | 100% { 227 | opacity: 1; 228 | left: 25%; 229 | top: 110%; 230 | width: 100px; 231 | height: 60px; 232 | transform: translatex(-50%); 233 | } 234 | } 235 | 236 | .enemy1 { 237 | top: 5%; 238 | left: 50%; 239 | transform: translateX(-50%); 240 | animation: enemy2 var(--animationTime) steps(5) forwards; 241 | } 242 | 243 | @keyframes enemy2 { 244 | 100% { 245 | opacity: 1; 246 | top: 110%; 247 | transform: translateX(-17.5%); 248 | width: 100px; 249 | height: 60px; 250 | } 251 | } 252 | 253 | .enemy2 { 254 | top: 5%; 255 | left: 75%; 256 | animation: enemy3 var(--animationTime) steps(5) forwards; 257 | } 258 | 259 | @keyframes enemy3 { 260 | 100% { 261 | opacity: 1; 262 | left: 75%; 263 | top: 110%; 264 | width: 100px; 265 | height: 60px; 266 | } 267 | } 268 | 269 | #game-box::before { 270 | content: ''; 271 | width: 100%; 272 | height: 100%; 273 | position: absolute; 274 | top: 0; 275 | left: 0; 276 | background-size: 100% 100%; 277 | background-position: 0% 50%; 278 | background-repeat: no-repeat; 279 | z-index: 1; 280 | opacity: 0.5; 281 | } 282 | 283 | .cracked-one::before { 284 | background-image: url(./assets/cracked-one.png); 285 | } 286 | 287 | .cracked-two::before { 288 | background-image: url(./assets/cracked-two.png); 289 | } 290 | 291 | .cracked-three:before { 292 | background-image: url(./assets/cracked-three.png); 293 | } 294 | 295 | .cracked-four::before { 296 | background-image: url(./assets/cracked-four.png); 297 | } 298 | 299 | .cracked-five::before { 300 | background-image: url(./assets/cracked-five.png); 301 | } 302 | 303 | #gauge { 304 | width: 111px; 305 | height: 140px; 306 | position: absolute; 307 | bottom: -3.5%; 308 | left: 50%; 309 | transform: translateX(-50%) scale(0.75); 310 | z-index: 2; 311 | } 312 | 313 | .gauge-one { 314 | background-image: url(./assets/gauge-one.png); 315 | } 316 | 317 | .gauge-two { 318 | background-image: url(./assets/gauge-two.png); 319 | animation: wha 1s linear forwards; 320 | } 321 | 322 | .gauge-three { 323 | background-image: url(./assets/gauge-three.png); 324 | animation: wha2 1s linear forwards; 325 | } 326 | 327 | .gauge-four { 328 | background-image: url(./assets/gauge-four.png); 329 | animation: wha3 1s linear forwards; 330 | } 331 | 332 | .gauge-five { 333 | background-image: url(./assets/gauge-five.png); 334 | animation: wha4 1s linear infinite; 335 | } 336 | 337 | @keyframes wha { 338 | 50% { 339 | transform: translateX(-50%) scale(0.65); 340 | } 341 | } 342 | 343 | @keyframes wha2 { 344 | 50% { 345 | transform: translateX(-50%) scale(0.65); 346 | } 347 | } 348 | 349 | @keyframes wha3 { 350 | 50% { 351 | transform: translateX(-50%) scale(0.65); 352 | } 353 | } 354 | 355 | @keyframes wha4 { 356 | 50% { 357 | filter: invert(1); 358 | } 359 | } 360 | 361 | #end-dead, 362 | #end-finish, 363 | #game-over { 364 | position: absolute; 365 | top: 40%; 366 | left: 50%; 367 | transform: translate(-50%, -50%); 368 | z-index: 3; 369 | padding: 10px 20px 10px 15px; 370 | color: black; 371 | font-size: 60px; 372 | line-height: 100%; 373 | font-family: 'Titillium Web', sans-serif; 374 | font-style: italic; 375 | cursor: pointer; 376 | background: white; 377 | border-radius: 10px; 378 | box-shadow: 4px 4px #f008b7; 379 | text-shadow: 2px 2px aqua; 380 | max-width: 275px; 381 | } 382 | 383 | #end-finish, 384 | #game-over { 385 | font-size: 50px; 386 | width: 100%; 387 | max-width: 320px; 388 | top: 50%; 389 | } 390 | 391 | .finish-h3 { 392 | font-size: 28px; 393 | line-height: 36px; 394 | text-shadow: none; 395 | text-transform: uppercase; 396 | } 397 | 398 | .finish-h2 { 399 | font-size: 36px; 400 | line-height: 36px; 401 | } 402 | 403 | .offer-btn { 404 | color: black; 405 | background: var(--pink); 406 | display: block; 407 | padding: 10px; 408 | border-radius: 5px; 409 | text-decoration: none; 410 | font-size: 28px; 411 | text-shadow: 1px 1px white; 412 | } 413 | 414 | .offer-btn:hover { 415 | background: var(--aqua); 416 | } 417 | 418 | .offer-disc { 419 | font-size: 11px; 420 | line-height: 100%; 421 | letter-spacing: 0; 422 | font-family: sans-serif; 423 | } 424 | 425 | .end-p { 426 | font-size: 24px; 427 | line-height: 30px; 428 | letter-spacing: -2px; 429 | font-family: monospace; 430 | text-shadow: none; 431 | color: black; 432 | } 433 | 434 | .finish-strong { 435 | font-size: 60px; 436 | } 437 | 438 | #end-dead, 439 | #end-finish, 440 | #game-over { 441 | display: none; 442 | cursor: inherit; 443 | } 444 | 445 | .end-on { 446 | display: block !important; 447 | animation: end 1s linear forwards; 448 | } 449 | 450 | @keyframes end { 451 | 0% { 452 | transform: translate(-50%, -50%) scale(0.1); 453 | } 454 | 455 | 75% { 456 | transform: translate(-50%, -50%) scale(1.15); 457 | } 458 | 459 | 100% { 460 | transform: translate(-50%, -50%) scale(1); 461 | } 462 | } 463 | 464 | #end-dead { 465 | color: #f008b7; 466 | text-shadow: 2px 2px black; 467 | } 468 | 469 | .wrapper { 470 | background: radial-gradient( 471 | ellipse at center, 472 | rgba(0, 0, 0, 0.6) 80%, 473 | rgba(0, 0, 0, 1) 100% 474 | ), 475 | url(./assets/background.jpg); 476 | background-size: cover; 477 | min-height: 100vh; 478 | overflow: hidden; 479 | perspective: 1200px; 480 | } 481 | 482 | #hero { 483 | position: relative; 484 | transform: scale(0.65); 485 | z-index: 1; 486 | } 487 | 488 | .chrome { 489 | position: relative; 490 | color: white; 491 | font-size: 200px; 492 | font-family: 'Titillium Web', sans-serif; 493 | font-style: italic; 494 | margin: 0; 495 | line-height: 1; 496 | text-shadow: 5px 5px aqua; 497 | text-transform: uppercase; 498 | } 499 | 500 | .dreams { 501 | position: absolute; 502 | margin: 0px; 503 | font-family: 'Mr Dafoe', cursive; 504 | font-size: 100px; 505 | color: #f008b7; 506 | margin-left: 400px; 507 | margin-top: -80px; 508 | text-shadow: 2px 2px white; 509 | z-index: 20; 510 | } 511 | 512 | #left-btn, 513 | #right-btn { 514 | width: 50%; 515 | height: 100%; 516 | position: absolute; 517 | bottom: 0; 518 | background-color: transparent; 519 | z-index: 3; 520 | opacity: 0; 521 | display: none; 522 | } 523 | 524 | #left-btn { 525 | left: 0; 526 | } 527 | 528 | #right-btn { 529 | right: 0; 530 | } 531 | 532 | #left-btn::after, 533 | #right-btn::after { 534 | content: '<'; 535 | position: absolute; 536 | font-size: 100px; 537 | display: block; 538 | text-align: right; 539 | right: 50px; 540 | top: 60%; 541 | } 542 | 543 | #right-btn::after { 544 | content: '>'; 545 | text-align: left; 546 | left: 50px; 547 | } 548 | 549 | #finish-line { 550 | width: 100%; 551 | height: 30px; 552 | background-image: linear-gradient(45deg, var(--pink) 25%, transparent 25%), 553 | linear-gradient(-45deg, var(--pink) 25%, transparent 25%), 554 | linear-gradient(45deg, transparent 75%, var(--pink) 75%), 555 | linear-gradient(-45deg, transparent 75%, var(--pink) 75%); 556 | background-size: 20px 20px; 557 | background-position: 0 0, 0 10px, 10px -10px, -10px 0px; 558 | position: absolute; 559 | top: 0; 560 | opacity: 0; 561 | } 562 | 563 | .finish-line { 564 | animation: finish 2s linear forwards; 565 | } 566 | 567 | @keyframes finish { 568 | 0% { 569 | opacity: 1; 570 | } 571 | 572 | 100% { 573 | top: 100%; 574 | opacity: 1; 575 | } 576 | } 577 | 578 | #start-btn { 579 | position: relative; 580 | z-index: 2; 581 | padding: 10px 20px 10px 15px; 582 | color: black; 583 | line-height: 100%; 584 | font-family: 'Titillium Web', sans-serif; 585 | font-style: italic; 586 | background: white; 587 | border-radius: 10px; 588 | box-shadow: 4px 4px #f008b7; 589 | text-shadow: 2px 2px aqua; 590 | text-align: center; 591 | white-space: nowrap; 592 | } 593 | 594 | .start-text { 595 | margin: 0 0 10px 0; 596 | font-size: 18px; 597 | text-shadow: none; 598 | font-family: monospace; 599 | letter-spacing: 0px; 600 | } 601 | 602 | .difficulty { 603 | font-size: 24px; 604 | text-transform: uppercase; 605 | line-height: 28px; 606 | background: #efefef; 607 | padding: 10px; 608 | border-radius: 5px; 609 | display: inline-block; 610 | cursor: pointer; 611 | margin: 0 5px; 612 | } 613 | 614 | .start-off { 615 | opacity: 0.15; 616 | pointer-events: none; 617 | user-select: none; 618 | } 619 | 620 | .github-corner:hover .octo-arm { 621 | animation: octocat-wave 560ms ease-in-out; 622 | } 623 | @keyframes octocat-wave { 624 | 0%, 625 | 100% { 626 | transform: rotate(0); 627 | } 628 | 20%, 629 | 60% { 630 | transform: rotate(-25deg); 631 | } 632 | 40%, 633 | 80% { 634 | transform: rotate(10deg); 635 | } 636 | } 637 | @media (max-width: 500px) { 638 | .github-corner:hover .octo-arm { 639 | animation: none; 640 | } 641 | .github-corner .octo-arm { 642 | animation: octocat-wave 560ms ease-in-out; 643 | } 644 | } 645 | 646 | @media screen and (max-width: 900px) { 647 | #game-box { 648 | transform: scale(0.45) translateY(-25px); 649 | margin: 0; 650 | } 651 | 652 | .hero-text { 653 | margin-top: -25px; 654 | } 655 | 656 | #hero { 657 | transform: scale(0.3); 658 | } 659 | 660 | #left-btn, 661 | #right-btn { 662 | opacity: 0.25; 663 | display: block; 664 | } 665 | } 666 | --------------------------------------------------------------------------------