继续更新

InfoGenie-frontend/public/smallgame/贪吃蛇/styles.css

@@ -6,7 +6,7 @@
 
 body {
     font-family: 'Arial', sans-serif;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    background: linear-gradient(135deg, #a8e6cf 0%, #dcedc8 50%, #f1f8e9 100%);
     min-height: 100vh;
     display: flex;
     justify-content: center;
@@ -16,13 +16,14 @@ body {
 }
 
 .game-container {
-    background: rgba(255, 255, 255, 0.95);
+    background: linear-gradient(135deg, #e8f5e8 0%, #f1f8e9 100%);
     border-radius: 20px;
     padding: 20px;
-    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 20px 40px rgba(46, 125, 50, 0.3);
     max-width: 400px;
     width: 95%;
     margin: 20px auto;
+    border: 1px solid rgba(46, 125, 50, 0.2);
 }
 
 .game-header {
@@ -31,21 +32,22 @@ body {
 }
 
 .game-header h1 {
-    color: #333;
+    color: #1b5e20;
     font-size: 2.5rem;
     margin-bottom: 15px;
-    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
+    text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.5);
 }
 
 .score-board {
     display: flex;
     justify-content: space-around;
-    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+    background: linear-gradient(135deg, #2e7d32 0%, #388e3c 100%);
     padding: 12px;
     border-radius: 15px;
     color: white;
     font-weight: bold;
     font-size: 1.1rem;
+    box-shadow: 0 4px 8px rgba(46, 125, 50, 0.2);
 }
 
 .score-board span {
@@ -61,10 +63,10 @@ body {
 }
 
 #gameCanvas {
-    border: 3px solid #333;
+    border: 3px solid #2e7d32;
     border-radius: 10px;
-    background: #222;
-    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+    background: #1b5e20;
+    box-shadow: 0 8px 16px rgba(46, 125, 50, 0.3);
 }
 
 .game-controls {
@@ -83,33 +85,32 @@ body {
     margin: 0 10px;
     border: none;
     border-radius: 50%;
-    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+    background: linear-gradient(135deg, #4caf50 0%, #66bb6a 100%);
     color: white;
     font-size: 1.5rem;
     font-weight: bold;
     cursor: pointer;
     transition: all 0.3s ease;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 4px 8px rgba(46, 125, 50, 0.3);
 }
 
 .control-btn:hover {
-    transform: scale(1.1);
-    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 6px 12px rgba(46, 125, 50, 0.4);
 }
 
 .control-btn:active {
-    transform: scale(0.95);
+    box-shadow: 0 2px 4px rgba(46, 125, 50, 0.2);
 }
 
 #pauseBtn {
-    background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
-    color: #333;
+    background: linear-gradient(135deg, #81c784 0%, #a5d6a7 100%);
+    color: #1b5e20;
     font-size: 1.2rem;
 }
 
 .game-instructions {
     text-align: center;
-    color: #666;
+    color: #2e7d32;
     font-size: 0.9rem;
     margin-top: 15px;
 }
@@ -121,41 +122,43 @@ body {
     left: 0;
     width: 100%;
     height: 100%;
-    background: rgba(0, 0, 0, 0.8);
+    background: rgba(46, 125, 50, 0.6);
     z-index: 1000;
     justify-content: center;
     align-items: center;
 }
 
 .modal-content {
-    background: white;
+    background: linear-gradient(135deg, #e8f5e8 0%, #f1f8e9 100%);
     padding: 30px;
     border-radius: 20px;
     text-align: center;
     max-width: 400px;
     width: 90%;
-    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
+    box-shadow: 0 20px 40px rgba(46, 125, 50, 0.4);
+    border: 1px solid rgba(46, 125, 50, 0.2);
 }
 
 .modal-content h2 {
-    color: #e74c3c;
+    color: #1b5e20;
     margin-bottom: 20px;
     font-size: 2rem;
+    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5);
 }
 
 .stats p {
     margin: 10px 0;
     font-size: 1.1rem;
-    color: #333;
+    color: #2e7d32;
 }
 
 .stats span {
     font-weight: bold;
-    color: #e74c3c;
+    color: #1b5e20;
 }
 
 .restart-btn {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    background: linear-gradient(135deg, #2e7d32 0%, #388e3c 100%);
     color: white;
     border: none;
     padding: 15px 30px;
@@ -165,11 +168,70 @@ body {
     cursor: pointer;
     margin-top: 20px;
     transition: all 0.3s ease;
+    box-shadow: 0 4px 8px rgba(46, 125, 50, 0.2);
 }
 
 .restart-btn:hover {
-    transform: scale(1.05);
-    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 8px 16px rgba(46, 125, 50, 0.3);
+}
+
+/* 排行榜样式 */
+.leaderboard {
+    margin: 20px 0;
+    padding: 15px;
+    background: rgba(255, 255, 255, 0.3);
+    border-radius: 15px;
+    border: 1px solid rgba(46, 125, 50, 0.2);
+}
+
+.leaderboard h3 {
+    color: #1b5e20;
+    margin-bottom: 15px;
+    font-size: 1.3rem;
+    text-align: center;
+}
+
+.leaderboard-list {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.leaderboard-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 8px 12px;
+    background: rgba(255, 255, 255, 0.5);
+    border-radius: 10px;
+    font-size: 0.9rem;
+    transition: all 0.2s ease;
+}
+
+.leaderboard-item.current-player {
+    background: linear-gradient(135deg, #ffeb3b 0%, #fff176 100%);
+    font-weight: bold;
+    border: 2px solid #f57f17;
+}
+
+.leaderboard-item .rank {
+    font-weight: bold;
+    min-width: 30px;
+    text-align: left;
+}
+
+.leaderboard-item .player-name {
+    flex: 1;
+    text-align: left;
+    margin-left: 10px;
+    color: #2e7d32;
+}
+
+.leaderboard-item .player-score {
+    font-weight: bold;
+    color: #1b5e20;
+    min-width: 50px;
+    text-align: right;
 }
 
 /* 手机端优化 */
@@ -246,13 +308,4 @@ body {
     -ms-user-select: none;
 }
 
-/* 动画效果 */
-@keyframes pulse {
-    0% { transform: scale(1); }
-    50% { transform: scale(1.05); }
-    100% { transform: scale(1); }
-}
-
-.score-board {
-    animation: pulse 2s infinite;
-}
+/* 动画效果已删除 */