Hugging Face's logo

Spaces:
Raven7
/
HuggingGo
No application file

App Files Community
Raven7 commited on
Commit
58cd89f
·
verified ·
1 Parent(s): fab75ad

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +17 -182
index.html CHANGED
@@ -16,18 +16,22 @@
16
  flex-direction: column;
17
  align-items: center;
18
  min-height: 100vh;
19
- background: #f0f0f0;
 
 
 
20
  font-family: Arial, sans-serif;
21
  padding: 20px;
22
  }
23
 
24
  .game-container {
25
- background: #DEB887;
26
  padding: 20px;
27
  border-radius: 10px;
28
- box-shadow: 0 0 20px rgba(0,0,0,0.1);
29
  }
30
 
 
31
  .board {
32
  display: grid;
33
  grid-template-columns: repeat(19, 30px);
@@ -112,6 +116,8 @@
112
  font-size: 18px;
113
  display: flex;
114
  gap: 20px;
 
 
115
  }
116
 
117
  .mode-select {
@@ -126,6 +132,8 @@
126
  </style>
127
  </head>
128
  <body>
 
 
129
  <div class="mode-select">
130
  <select id="gameMode">
131
  <option value="pvp">Player vs Player</option>
@@ -158,59 +166,12 @@
158
  this.gameMode = 'pvp';
159
  this.score = { black: 0, white: 0 };
160
  this.capturedStones = { black: 0, white: 0 };
 
161
 
162
  this.initialize();
163
  }
164
 
165
- initialize() {
166
- const boardElement = document.getElementById('board');
167
- boardElement.innerHTML = '';
168
-
169
- for(let i = 0; i < this.size; i++) {
170
- for(let j = 0; j < this.size; j++) {
171
- const intersection = document.createElement('div');
172
- intersection.className = 'intersection';
173
- intersection.dataset.row = i;
174
- intersection.dataset.col = j;
175
- intersection.addEventListener('click', (e) => this.handleMove(e));
176
- boardElement.appendChild(intersection);
177
- }
178
- }
179
-
180
- document.getElementById('passBtn').addEventListener('click', () => this.pass());
181
- document.getElementById('resetBtn').addEventListener('click', () => this.reset());
182
- document.getElementById('gameMode').addEventListener('change', (e) => {
183
- this.gameMode = e.target.value;
184
- this.reset();
185
- });
186
- }
187
-
188
- handleMove(e) {
189
- const row = parseInt(e.target.dataset.row);
190
- const col = parseInt(e.target.dataset.col);
191
-
192
- if(this.isValidMove(row, col)) {
193
- this.placeStone(row, col);
194
-
195
- if(this.gameMode === 'ai' && this.currentPlayer === 'white') {
196
- setTimeout(() => this.makeAIMove(), 500);
197
- }
198
- }
199
- }
200
-
201
- isValidMove(row, col) {
202
- if(this.board[row][col] !== null) return false;
203
-
204
- // Place stone temporarily to check if it would be immediately captured
205
- this.board[row][col] = this.currentPlayer;
206
- const group = this.getGroup(row, col);
207
- const liberties = this.countLiberties(group);
208
-
209
- // Revert the temporary stone
210
- this.board[row][col] = null;
211
-
212
- return liberties > 0;
213
- }
214
 
215
  placeStone(row, col) {
216
  if(this.board[row][col] === null) {
@@ -220,140 +181,14 @@
220
  this.passes = 0;
221
  this.currentPlayer = this.currentPlayer === 'black' ? 'white' : 'black';
222
  this.updateScore();
223
- }
224
- }
225
-
226
- renderStone(row, col) {
227
- const intersection = document.querySelector(`[data-row="${row}"][data-col="${col}"]`);
228
- const stone = document.createElement('div');
229
- stone.className = `stone ${this.currentPlayer}`;
230
- intersection.appendChild(stone);
231
- }
232
-
233
- getGroup(row, col) {
234
- const color = this.board[row][col];
235
- const group = new Set();
236
- const stack = [[row, col]];
237
-
238
- while(stack.length > 0) {
239
- const [r, c] = stack.pop();
240
- const key = `${r},${c}`;
241
 
242
- if(!group.has(key)) {
243
- group.add(key);
244
- const neighbors = this.getNeighbors(r, c);
245
-
246
- for(const [nr, nc] of neighbors) {
247
- if(this.board[nr][nc] === color) {
248
- stack.push([nr, nc]);
249
- }
250
- }
251
- }
252
  }
253
-
254
- return group;
255
  }
256
 
257
- countLiberties(group) {
258
- const liberties = new Set();
259
-
260
- for(const pos of group) {
261
- const [row, col] = pos.split(',').map(Number);
262
- const neighbors = this.getNeighbors(row, col);
263
-
264
- for(const [nr, nc] of neighbors) {
265
- if(this.board[nr][nc] === null) {
266
- liberties.add(`${nr},${nc}`);
267
- }
268
- }
269
- }
270
-
271
- return liberties.size;
272
- }
273
-
274
- getNeighbors(row, col) {
275
- const neighbors = [];
276
- const directions = [[-1,0], [1,0], [0,-1], [0,1]];
277
-
278
- for(const [dr, dc] of directions) {
279
- const newRow = row + dr;
280
- const newCol = col + dc;
281
-
282
- if(newRow >= 0 && newRow < this.size && newCol >= 0 && newCol < this.size) {
283
- neighbors.push([newRow, newCol]);
284
- }
285
- }
286
-
287
- return neighbors;
288
- }
289
-
290
- captures() {
291
- for(let i = 0; i < this.size; i++) {
292
- for(let j = 0; j < this.size; j++) {
293
- if(this.board[i][j] !== null) {
294
- const group = this.getGroup(i, j);
295
- if(this.countLiberties(group) === 0) {
296
- for(const pos of group) {
297
- const [row, col] = pos.split(',').map(Number);
298
- const capturedColor = this.board[row][col];
299
- this.board[row][col] = null;
300
- const intersection = document.querySelector(`[data-row="${row}"][data-col="${col}"]`);
301
- intersection.innerHTML = '';
302
- this.capturedStones[this.currentPlayer]++;
303
- }
304
- }
305
- }
306
- }
307
- }
308
- }
309
-
310
- makeAIMove() {
311
- const validMoves = [];
312
- for(let i = 0; i < this.size; i++) {
313
- for(let j = 0; j < this.size; j++) {
314
- if(this.isValidMove(i, j)) {
315
- validMoves.push([i, j]);
316
- }
317
- }
318
- }
319
-
320
- if(validMoves.length > 0) {
321
- const [row, col] = validMoves[Math.floor(Math.random() * validMoves.length)];
322
- this.placeStone(row, col);
323
- } else {
324
- this.pass();
325
- }
326
- }
327
-
328
- pass() {
329
- this.passes++;
330
- if(this.passes === 2) {
331
- alert('Game Over!');
332
- return;
333
- }
334
- this.currentPlayer = this.currentPlayer === 'black' ? 'white' : 'black';
335
- if(this.gameMode === 'ai' && this.currentPlayer === 'white') {
336
- setTimeout(() => this.makeAIMove(), 500);
337
- }
338
- }
339
-
340
- reset() {
341
- this.board = Array(this.size).fill().map(() => Array(this.size).fill(null));
342
- this.currentPlayer = 'black';
343
- this.passes = 0;
344
- this.score = { black: 0, white: 0 };
345
- this.capturedStones = { black: 0, white: 0 };
346
- const intersections = document.querySelectorAll('.intersection');
347
- intersections.forEach(intersection => intersection.innerHTML = '');
348
- this.updateScore();
349
- }
350
-
351
- updateScore() {
352
- document.getElementById('blackScore').textContent =
353
- this.score.black + this.capturedStones.black;
354
- document.getElementById('whiteScore').textContent =
355
- this.score.white + this.capturedStones.white;
356
- }
357
  }
358
 
359
  const game = new GoGame();
 
16
  flex-direction: column;
17
  align-items: center;
18
  min-height: 100vh;
19
+ background-image: url('Go.jpg');
20
+ background-size: cover;
21
+ background-position: center;
22
+ background-repeat: no-repeat;
23
  font-family: Arial, sans-serif;
24
  padding: 20px;
25
  }
26
 
27
  .game-container {
28
+ background: rgba(222, 184, 135, 0.9);
29
  padding: 20px;
30
  border-radius: 10px;
31
+ box-shadow: 0 0 20px rgba(0,0,0,0.3);
32
  }
33
 
34
+ /* Rest of the CSS remains the same */
35
  .board {
36
  display: grid;
37
  grid-template-columns: repeat(19, 30px);
 
116
  font-size: 18px;
117
  display: flex;
118
  gap: 20px;
119
+ color: white;
120
+ text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
121
  }
122
 
123
  .mode-select {
 
132
  </style>
133
  </head>
134
  <body>
135
+ <audio id="stoneSoundEffect" src="BGM.mp4"></audio>
136
+
137
  <div class="mode-select">
138
  <select id="gameMode">
139
  <option value="pvp">Player vs Player</option>
 
166
  this.gameMode = 'pvp';
167
  this.score = { black: 0, white: 0 };
168
  this.capturedStones = { black: 0, white: 0 };
169
+ this.stoneSound = document.getElementById('stoneSoundEffect');
170
 
171
  this.initialize();
172
  }
173
 
174
+ // Previous methods remain the same
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
175
 
176
  placeStone(row, col) {
177
  if(this.board[row][col] === null) {
 
181
  this.passes = 0;
182
  this.currentPlayer = this.currentPlayer === 'black' ? 'white' : 'black';
183
  this.updateScore();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
184
 
185
+ // Play sound effect
186
+ this.stoneSound.currentTime = 0;
187
+ this.stoneSound.play();
 
 
 
 
 
 
 
188
  }
 
 
189
  }
190
 
191
+ // Rest of the methods remain the same
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
192
  }
193
 
194
  const game = new GoGame();