snake: add dark mode
Hunter
Wednesday, July 23rd, 2025 at 10:14 PM
171 display: none !important;
172 }
173 }
174 +
175 + @media (prefers-color-scheme: dark) {
176 + body {
177 + background-color: #1a1a1a;
178 + color: #ffffff;
179 + }
180 +
181 + #gameBoard {
182 + border-color: #666;
183 + background-color: #2d2d2d;
184 + }
185 +
186 + #startHint, #mobileStartHint {
187 + color: #ccc;
188 + }
189 + }
190 </style>
191 </head>
192 <body>
221
222 <script>
223 const BOARD_SIZE = 20;
- const EMPTY = '⬜';
224 + const EMPTY_LIGHT = '⬜';
225 + const EMPTY_DARK = '';
226 const SNAKE = '🟩';
227 const APPLE = '🟥';
228
229 + function getEmptySymbol() {
230 + return window.matchMedia('(prefers-color-scheme: dark)').matches ? EMPTY_DARK : EMPTY_LIGHT;
231 + }
232 +
233 let board = [];
234 let snake = [{x: 10, y: 10}];
235 let direction = {x: 0, y: -1};
246 for (let y = 0; y < BOARD_SIZE; y++) {
247 board[y] = [];
248 for (let x = 0; x < BOARD_SIZE; x++) {
- board[y][x] = EMPTY;
249 + board[y][x] = getEmptySymbol();
250 }
251 }
252 }
265
266 function updateBoard() {
267 // Clear board
268 + const emptySymbol = getEmptySymbol();
269 for (let y = 0; y < BOARD_SIZE; y++) {
270 for (let x = 0; x < BOARD_SIZE; x++) {
- board[y][x] = EMPTY;
271 + board[y][x] = emptySymbol;
272 }
273 }
274