Compare commits
	
		
			2 commits
		
	
	
		
			8e361050d9
			...
			26fabc37e9
		
	
	| Author | SHA1 | Date | |
|---|---|---|---|
| 26fabc37e9 | |||
| 24d01959c1 | 
					 6 changed files with 90 additions and 116 deletions
				
			
		|  | @ -1,43 +1,43 @@ | |||
| body { | ||||
|   margin: 0; | ||||
|   overflow: hidden; | ||||
|     margin: 0; | ||||
|     overflow: hidden; | ||||
| } | ||||
| 
 | ||||
| canvas { | ||||
|   display: block; | ||||
|   background: black; | ||||
|   width: 100%; | ||||
|   height: 100%; | ||||
|     display: block; | ||||
|     background: black; | ||||
|     width: 100%; | ||||
|     height: 100%; | ||||
| } | ||||
| 
 | ||||
| .controls { | ||||
|   display: none; | ||||
|   position: absolute; | ||||
|   bottom: 20px; | ||||
|   left: 50%; | ||||
|   transform: translateX(-50%); | ||||
|   display: flex; | ||||
|   justify-content: space-between; | ||||
|   width: 80%; | ||||
|     display: none; | ||||
|     position: absolute; | ||||
|     bottom: 20px; | ||||
|     left: 50%; | ||||
|     transform: translateX(-50%); | ||||
|     display: flex; | ||||
|     justify-content: space-between; | ||||
|     width: 80%; | ||||
| } | ||||
| 
 | ||||
| .control-btn { | ||||
|   display: none; | ||||
|   padding: 10px; | ||||
|   font-size: 18px; | ||||
|   background-color: rgba(0, 0, 0, 0.6); | ||||
|   color: white; | ||||
|   border: 1px solid #fff; | ||||
|   border-radius: 5px; | ||||
|   cursor: pointer; | ||||
|   flex-grow: 1; | ||||
|   margin: 0 5px; | ||||
|     display: none; | ||||
|     padding: 10px; | ||||
|     font-size: 18px; | ||||
|     background-color: rgba(0, 0, 0, 0.6); | ||||
|     color: white; | ||||
|     border: 1px solid #fff; | ||||
|     border-radius: 5px; | ||||
|     cursor: pointer; | ||||
|     flex-grow: 1; | ||||
|     margin: 0 5px; | ||||
| } | ||||
| 
 | ||||
| @media (max-width: 600px) { | ||||
|   .control-btn { | ||||
|       display: block; | ||||
|       font-size: 16px; | ||||
|       padding: 12px; | ||||
|   } | ||||
| @media(max-width: 600px) { | ||||
|     .control-btn { | ||||
|         display: block; | ||||
|         font-size: 16px; | ||||
|         padding: 12px; | ||||
|     } | ||||
| } | ||||
|  |  | |||
|  | @ -2,9 +2,10 @@ | |||
|     margin: 0; | ||||
|     padding: 0; | ||||
|     box-sizing: border-box; | ||||
|   } | ||||
|    | ||||
|   body, html { | ||||
| } | ||||
| 
 | ||||
| body, | ||||
| html { | ||||
|     height: 100%; | ||||
|     font-family: Arial, sans-serif; | ||||
|     display: flex; | ||||
|  | @ -13,18 +14,18 @@ | |||
|     background-color: #000; | ||||
|     color: white; | ||||
|     overflow: hidden; | ||||
|   } | ||||
|    | ||||
|   .landing-page { | ||||
| } | ||||
| 
 | ||||
| .landing-page { | ||||
|     position: relative; | ||||
|     width: 100%; | ||||
|     height: 100%; | ||||
|     display: flex; | ||||
|     justify-content: center; | ||||
|     align-items: center; | ||||
|   } | ||||
|    | ||||
|   .game-background { | ||||
| } | ||||
| 
 | ||||
| .game-background { | ||||
|     position: absolute; | ||||
|     top: 0; | ||||
|     left: 0; | ||||
|  | @ -34,9 +35,9 @@ | |||
|     backdrop-filter: blur(8px); /* Apply blur effect to the background */ | ||||
|     z-index: -1; /* Ensures it's in the background */ | ||||
|     pointer-events: none; /* Prevent interaction with the blurred background */ | ||||
|   } | ||||
|    | ||||
|   .content { | ||||
| } | ||||
| 
 | ||||
| .content { | ||||
|     text-align: center; | ||||
|     z-index: 1; /* Ensure content appears above the game background */ | ||||
|     padding: 20px; | ||||
|  | @ -44,19 +45,19 @@ | |||
|     position: relative; | ||||
|     color: white; | ||||
|     backdrop-filter: blur(8px); /* Ensure content has some blur as well for contrast */ | ||||
|   } | ||||
|    | ||||
|   h1 { | ||||
| } | ||||
| 
 | ||||
| h1 { | ||||
|     font-size: 2rem; | ||||
|     margin-bottom: 20px; | ||||
|   } | ||||
|    | ||||
|   p { | ||||
| } | ||||
| 
 | ||||
| p { | ||||
|     font-size: 1.2rem; | ||||
|     margin-bottom: 30px; | ||||
|   } | ||||
|    | ||||
|   button { | ||||
| } | ||||
| 
 | ||||
| button { | ||||
|     padding: 12px 24px; | ||||
|     background-color: #ffcc00; | ||||
|     color: black; | ||||
|  | @ -66,9 +67,8 @@ | |||
|     border-radius: 5px; | ||||
|     text-transform: uppercase; | ||||
|     transition: background-color 0.3s ease; | ||||
|   } | ||||
|    | ||||
|   button:hover { | ||||
| } | ||||
| 
 | ||||
| button:hover { | ||||
|     background-color: #ff9900; | ||||
|   } | ||||
|    | ||||
| } | ||||
|  |  | |||
|  | @ -341,7 +341,7 @@ function drawGameOver() { | |||
| 
 | ||||
| // Restart game
 | ||||
| function restartGame() { | ||||
|     window.location.reload(); | ||||
|   window.location.reload(); | ||||
| } | ||||
| 
 | ||||
| // Main game loop
 | ||||
|  |  | |||
|  | @ -1,5 +1,6 @@ | |||
| /* Base Reset */ | ||||
| body, html { | ||||
| body, | ||||
| html { | ||||
|     margin: 0; | ||||
|     padding: 0; | ||||
|     font-family: monospace; | ||||
|  | @ -16,7 +17,7 @@ body, html { | |||
|     width: 441px; | ||||
|     height: 735px; | ||||
|     border-radius: 20px; | ||||
|     box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.6); | ||||
|     box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6); | ||||
|     display: flex; | ||||
|     flex-direction: column; | ||||
|     align-items: center; | ||||
|  | @ -24,7 +25,7 @@ body, html { | |||
|     position: relative; | ||||
| } | ||||
| 
 | ||||
| @media (max-width: 768px) { | ||||
| @media(max-width: 768px) { | ||||
|     .gameboy { | ||||
|         width: 100vw; | ||||
|         height: 100vh; | ||||
|  | @ -43,7 +44,7 @@ body, html { | |||
|     display: flex; | ||||
|     justify-content: center; | ||||
|     align-items: center; | ||||
|     box-shadow: inset 0px 4px 8px rgba(0, 0, 0, 0.5); | ||||
|     box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.5); | ||||
|     overflow: hidden; | ||||
| } | ||||
| 
 | ||||
|  | @ -54,7 +55,7 @@ body, html { | |||
| 
 | ||||
| /* Titles */ | ||||
| h1 { | ||||
|     font-size: 2rem;  /* Increased font size */ | ||||
|     font-size: 2rem; /* Increased font size */ | ||||
|     margin-bottom: 10px; | ||||
|     text-transform: uppercase; | ||||
| } | ||||
|  | @ -64,22 +65,24 @@ h1 { | |||
|     background-color: #9bbc0f; | ||||
|     color: #0f380f; | ||||
|     border: 2px solid #0f380f; | ||||
|     font-size: 2rem;  /* Increased font size */ | ||||
|     width: 80px;  /* Increased width */ | ||||
|     font-size: 2rem; /* Increased font size */ | ||||
|     width: 80px; /* Increased width */ | ||||
|     text-align: center; | ||||
|     margin: 10px auto; | ||||
|     padding: 10px;  /* Increased padding */ | ||||
|     padding: 10px; /* Increased padding */ | ||||
|     border-radius: 4px; | ||||
| } | ||||
| 
 | ||||
| /* Messages */ | ||||
| .message, .score, .highScore { | ||||
|     font-size: 1.4rem;  /* Increased font size */ | ||||
| .message, | ||||
| .score, | ||||
| .highScore { | ||||
|     font-size: 1.4rem; /* Increased font size */ | ||||
|     margin: 5px 0; | ||||
| } | ||||
| 
 | ||||
| .description, | ||||
| .description p{ | ||||
| .description p { | ||||
|     font-size: 1.2rem; | ||||
|     margin: 0 auto; | ||||
|     padding: 0 auto; | ||||
|  | @ -97,8 +100,8 @@ h1 { | |||
| /* D-Pad */ | ||||
| .dpad { | ||||
|     position: relative; | ||||
|     width: 120px;  /* Increased size */ | ||||
|     height: 120px;  /* Increased size */ | ||||
|     width: 120px; /* Increased size */ | ||||
|     height: 120px; /* Increased size */ | ||||
| } | ||||
| 
 | ||||
| /* Base Styling for D-Pad Buttons */ | ||||
|  | @ -110,7 +113,7 @@ h1 { | |||
|     position: absolute; | ||||
|     width: 42px; | ||||
|     height: 42px; | ||||
|     font-size: 1.5rem;  /* Increased size */ | ||||
|     font-size: 1.5rem; /* Increased size */ | ||||
|     display: flex; | ||||
|     justify-content: center; | ||||
|     align-items: center; | ||||
|  | @ -161,7 +164,7 @@ h1 { | |||
|     display: flex; | ||||
|     flex-direction: column; | ||||
|     justify-content: space-between; | ||||
|     height: 140px;  /* Increased height */ | ||||
|     height: 140px; /* Increased height */ | ||||
| } | ||||
| 
 | ||||
| .btn { | ||||
|  | @ -171,7 +174,7 @@ h1 { | |||
|     border-radius: 50%; | ||||
|     width: 60px; | ||||
|     height: 60px; | ||||
|     font-size: 1.8rem;  /* Increased font size */ | ||||
|     font-size: 1.8rem; /* Increased font size */ | ||||
|     cursor: pointer; | ||||
|     transition: transform 0.1s, background-color 0.2s; | ||||
| } | ||||
|  |  | |||
|  | @ -11,7 +11,7 @@ body { | |||
|     margin: 0; | ||||
|     line-height: 1.6; | ||||
|     background-image: url('images/background.jpg'); | ||||
|     background-size: cover /* Adjust size for tape appearance */ | ||||
|     background-size: cover; /* Adjust size for tape appearance */ | ||||
| } | ||||
| 
 | ||||
| header { | ||||
|  | @ -27,51 +27,22 @@ header { | |||
| /* Create the flickering neon light effect */ | ||||
| @keyframes neonFlicker { | ||||
|     0% { | ||||
|         text-shadow:  | ||||
|             0 0 5px #ffcc00,  | ||||
|             0 0 10px #ffcc00,  | ||||
|             0 0 15px #ffcc00,  | ||||
|             0 0 20px #ffcc00,  | ||||
|             0 0 30px #ffcc00,  | ||||
|             0 0 40px #ffcc00,  | ||||
|             0 0 50px #ffcc00; | ||||
|         text-shadow: 0 0 5px #ffcc00, 0 0 10px #ffcc00, 0 0 15px #ffcc00, 0 0 20px #ffcc00, 0 0 30px #ffcc00, 0 0 40px #ffcc00, 0 0 50px #ffcc00; | ||||
|     } | ||||
|     20% { | ||||
|         text-shadow:  | ||||
|             0 0 3px #ffcc00,  | ||||
|             0 0 7px #ffcc00,  | ||||
|             0 0 10px #ffcc00,  | ||||
|             0 0 15px #ffcc00,  | ||||
|             0 0 20px #ffcc00; | ||||
|         text-shadow: 0 0 3px #ffcc00, 0 0 7px #ffcc00, 0 0 10px #ffcc00, 0 0 15px #ffcc00, 0 0 20px #ffcc00; | ||||
|     } | ||||
|     40% { | ||||
|         text-shadow:  | ||||
|             0 0 5px #ffcc00,  | ||||
|             0 0 15px #ffcc00,  | ||||
|             0 0 25px #ffcc00; | ||||
|         text-shadow: 0 0 5px #ffcc00, 0 0 15px #ffcc00, 0 0 25px #ffcc00; | ||||
|     } | ||||
|     60% { | ||||
|         text-shadow:  | ||||
|             0 0 5px #ffcc00,  | ||||
|             0 0 10px #ffcc00,  | ||||
|             0 0 15px #ffcc00,  | ||||
|             0 0 20px #ffcc00,  | ||||
|             0 0 30px #ffcc00; | ||||
|         text-shadow: 0 0 5px #ffcc00, 0 0 10px #ffcc00, 0 0 15px #ffcc00, 0 0 20px #ffcc00, 0 0 30px #ffcc00; | ||||
|     } | ||||
|     80% { | ||||
|         text-shadow:  | ||||
|             0 0 3px #ffcc00,  | ||||
|             0 0 7px #ffcc00,  | ||||
|             0 0 10px #ffcc00; | ||||
|         text-shadow: 0 0 3px #ffcc00, 0 0 7px #ffcc00, 0 0 10px #ffcc00; | ||||
|     } | ||||
|     100% { | ||||
|         text-shadow:  | ||||
|             0 0 5px #ffcc00,  | ||||
|             0 0 10px #ffcc00,  | ||||
|             0 0 15px #ffcc00,  | ||||
|             0 0 20px #ffcc00,  | ||||
|             0 0 30px #ffcc00,  | ||||
|             0 0 40px #ffcc00; | ||||
|         text-shadow: 0 0 5px #ffcc00, 0 0 10px #ffcc00, 0 0 15px #ffcc00, 0 0 20px #ffcc00, 0 0 30px #ffcc00, 0 0 40px #ffcc00; | ||||
|     } | ||||
| } | ||||
| 
 | ||||
|  | @ -110,7 +81,7 @@ footer { | |||
|     filter: brightness(0.6); | ||||
| } | ||||
| 
 | ||||
| .item .description {  | ||||
| .item .description { | ||||
|     padding: 30px; | ||||
|     font-size: 1rem; | ||||
|     color: #ccc; | ||||
|  | @ -119,7 +90,7 @@ footer { | |||
|     flex-grow: 1; | ||||
| } | ||||
| 
 | ||||
| p {  | ||||
| p { | ||||
|     text-decoration: none; | ||||
| } | ||||
| 
 | ||||
|  | @ -154,7 +125,7 @@ p { | |||
|     transform: translateX(-50%) translateY(-10px); | ||||
| } | ||||
| 
 | ||||
| @media (max-width: 800px) { | ||||
| @media(max-width: 800px) { | ||||
|     header { | ||||
|         font-size: 1.5rem; | ||||
|     } | ||||
|  |  | |||
|  | @ -58,7 +58,7 @@ footer { | |||
|     object-fit: cover; | ||||
| } | ||||
| 
 | ||||
| .item .description {  | ||||
| .item .description { | ||||
|     padding: 30px; | ||||
|     font-size: 1rem; | ||||
|     color: #ddd; | ||||
|  | @ -67,7 +67,7 @@ footer { | |||
|     flex-grow: 1; /* Allow description to take remaining space */ | ||||
| } | ||||
| 
 | ||||
| p {  | ||||
| p { | ||||
|     text-decoration: none; | ||||
| } | ||||
| 
 | ||||
|  | @ -104,7 +104,7 @@ p { | |||
| } | ||||
| 
 | ||||
| /* Mobile Optimization */ | ||||
| @media (max-width: 600px) { | ||||
| @media(max-width: 600px) { | ||||
|     header { | ||||
|         font-size: 1.2rem; | ||||
|     } | ||||
|  | @ -114,7 +114,7 @@ p { | |||
|         width: auto; | ||||
|     } | ||||
| 
 | ||||
|     .grid-container{ | ||||
|     .grid-container { | ||||
|         grid-template-columns: repeat(1, 1fr); | ||||
|     } | ||||
| } | ||||
|  |  | |||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue