Hugging Face's logo

Spaces:
openfree
/
Minesweeper-Game
Running

App Files Community
Minesweeper-Game / index.html
openfree's picture
openfree
Update index.html
8999237 verified
raw
history blame contribute delete
13.8 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>๊ณ ๊ธ‰ ์ง€๋ขฐ์ฐพ๊ธฐ</title>
<style>
:root {
--cell-size: 35px;
--border-color: #7B7B7B;
--cell-bg: #C0C0C0;
--revealed-bg: #E0E0E0;
}
body {
display: flex;
flex-direction: column;
align-items: center;
background: #f0f0f0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 20px;
}
/* ์ƒ๋‹จ ๋ฉ”์‹œ์ง€ ์Šคํƒ€์ผ */
.message-container {
width: 100%;
background: #333;
color: white;
padding: 20px 0;
margin-bottom: 30px;
text-align: center;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.message-title {
font-size: 24px;
margin-bottom: 10px;
}
.message-subtitle {
font-size: 16px;
margin-bottom: 10px;
color: #ddd;
}
.message-link {
font-size: 14px;
color: #66ccff;
text-decoration: none;
}
.message-link:hover {
text-decoration: underline;
}
/* ๊ฒŒ์ž„ ์ปจํ…Œ์ด๋„ˆ ์Šคํƒ€์ผ */
.game-container {
background: var(--cell-bg);
padding: 15px;
border-radius: 8px;
box-shadow: 3px 3px 10px rgba(0,0,0,0.2);
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
background: var(--cell-bg);
padding: 10px;
margin-bottom: 15px;
border: 3px solid var(--border-color);
}
.display {
background: black;
color: red;
padding: 5px 10px;
font-family: "Digital-7", monospace;
font-size: 24px;
min-width: 70px;
text-align: center;
}
.controls {
margin-bottom: 15px;
}
select {
padding: 5px;
margin-right: 10px;
}
.game-board {
display: grid;
gap: 1px;
background: var(--border-color);
border: 3px solid var(--border-color);
}
.cell {
width: var(--cell-size);
height: var(--cell-size);
background: var(--cell-bg);
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
font-size: 18px;
cursor: pointer;
user-select: none;
transition: background-color 0.2s;
border: 2px solid;
border-color: #fff #7B7B7B #7B7B7B #fff;
}
.cell:hover:not(.revealed) {
background: #d0d0d0;
}
.revealed {
background: var(--revealed-bg);
border: 1px solid #999;
}
.mine {
background: #ff4444 !important;
}
.flagged {
background: var(--cell-bg);
}
button {
padding: 8px 16px;
font-size: 14px;
cursor: pointer;
background: var(--cell-bg);
border: 2px solid;
border-color: #fff #7B7B7B #7B7B7B #fff;
}
button:hover {
background: #d0d0d0;
}
.color-1 { color: blue; }
.color-2 { color: green; }
.color-3 { color: red; }
.color-4 { color: darkblue; }
.color-5 { color: darkred; }
.color-6 { color: teal; }
.color-7 { color: black; }
.color-8 { color: gray; }
.smiley {
font-size: 24px;
cursor: pointer;
user-select: none;
padding: 5px 15px;
background: var(--cell-bg);
border: 2px solid;
border-color: #fff #7B7B7B #7B7B7B #fff;
}
.smiley:hover {
background: #d0d0d0;
}
</style>
</head>
<body>
<!-- ์ƒ๋‹จ ๋ฉ”์‹œ์ง€ -->
<div class="message-container">
<div class="message-title">MOUSE Autonomous "Minesweeper Game"</div>
<div class="message-subtitle">"One-minute creation by AI Coding Autonomous Agent MOUSE"</div>
<a href="https://VIDraft-mouse1.hf.space" class="message-link">https://VIDraft-mouse1.hf.space</a>
</div>
<!-- ๊ฒŒ์ž„ ์ปจํ…Œ์ด๋„ˆ -->
<div class="game-container">
<div class="controls">
<select id="difficulty">
<option value="beginner">์ดˆ๊ธ‰ (9x9, 10์ง€๋ขฐ)</option>
<option value="intermediate">์ค‘๊ธ‰ (16x16, 40์ง€๋ขฐ)</option>
<option value="expert">๊ณ ๊ธ‰ (16x30, 99์ง€๋ขฐ)</option>
</select>
</div>
<div class="header">
<div class="display" id="mine-count">010</div>
<div class="smiley" id="smiley">๐Ÿ˜Š</div>
<div class="display" id="timer">000</div>
</div>
<div class="game-board" id="board" oncontextmenu="return false"></div>
</div>
<script>
// ์ด์ „ JavaScript ์ฝ”๋“œ๋ฅผ ๊ทธ๋Œ€๋กœ ์œ ์ง€
const difficulties = {
beginner: { width: 9, height: 9, mines: 10 },
intermediate: { width: 16, height: 16, mines: 40 },
expert: { width: 30, height: 16, mines: 99 }
};
let board = [];
let revealed = [];
let flagged = [];
let gameOver = false;
let minesRemaining;
let timeElapsed = 0;
let timerInterval;
let firstClick = true;
let currentDifficulty = difficulties.beginner;
// ... (์ด์ „์˜ ๋ชจ๋“  JavaScript ํ•จ์ˆ˜๋“ค์„ ๊ทธ๋Œ€๋กœ ์œ ์ง€)
document.getElementById('difficulty').addEventListener('change', (e) => {
currentDifficulty = difficulties[e.target.value];
initGame();
});
document.getElementById('smiley').addEventListener('click', initGame);
function formatDisplay(num) {
return String(num).padStart(3, '0');
}
function updateTimer() {
timeElapsed++;
document.getElementById('timer').textContent = formatDisplay(Math.min(timeElapsed, 999));
}
function initGame() {
clearInterval(timerInterval);
timeElapsed = 0;
document.getElementById('timer').textContent = '000';
document.getElementById('smiley').textContent = '๐Ÿ˜Š';
board = [];
revealed = [];
flagged = [];
gameOver = false;
firstClick = true;
minesRemaining = currentDifficulty.mines;
document.getElementById('mine-count').textContent = formatDisplay(minesRemaining);
for(let i = 0; i < currentDifficulty.height; i++) {
board[i] = [];
revealed[i] = [];
flagged[i] = [];
for(let j = 0; j < currentDifficulty.width; j++) {
board[i][j] = 0;
revealed[i][j] = false;
flagged[i][j] = false;
}
}
const boardElement = document.getElementById('board');
boardElement.style.gridTemplateColumns = `repeat(${currentDifficulty.width}, var(--cell-size))`;
renderBoard();
}
function placeMines(firstRow, firstCol) {
let minesPlaced = 0;
while(minesPlaced < currentDifficulty.mines) {
const x = Math.floor(Math.random() * currentDifficulty.height);
const y = Math.floor(Math.random() * currentDifficulty.width);
if(board[x][y] !== -1 && !(Math.abs(x - firstRow) <= 1 && Math.abs(y - firstCol) <= 1)) {
board[x][y] = -1;
minesPlaced++;
}
}
for(let i = 0; i < currentDifficulty.height; i++) {
for(let j = 0; j < currentDifficulty.width; j++) {
if(board[i][j] !== -1) {
let count = 0;
for(let dx = -1; dx <= 1; dx++) {
for(let dy = -1; dy <= 1; dy++) {
const nx = i + dx;
const ny = j + dy;
if(nx >= 0 && nx < currentDifficulty.height && ny >= 0 && ny < currentDifficulty.width) {
if(board[nx][ny] === -1) count++;
}
}
}
board[i][j] = count;
}
}
}
}
function renderBoard() {
const boardElement = document.getElementById('board');
boardElement.innerHTML = '';
for(let i = 0; i < currentDifficulty.height; i++) {
for(let j = 0; j < currentDifficulty.width; j++) {
const cell = document.createElement('div');
cell.className = 'cell';
cell.dataset.row = i;
cell.dataset.col = j;
if(revealed[i][j]) {
cell.classList.add('revealed');
if(board[i][j] === -1) {
cell.classList.add('mine');
cell.textContent = '๐Ÿ’ฃ';
} else if(board[i][j] > 0) {
cell.textContent = board[i][j];
cell.classList.add(`color-${board[i][j]}`);
}
} else if(flagged[i][j]) {
cell.classList.add('flagged');
cell.textContent = '๐Ÿšฉ';
}
cell.addEventListener('mousedown', () => {
if(!gameOver && !revealed[i][j]) {
document.getElementById('smiley').textContent = '๐Ÿ˜ฎ';
}
});
cell.addEventListener('mouseup', () => {
if(!gameOver) {
document.getElementById('smiley').textContent = '๐Ÿ˜Š';
}
});
cell.addEventListener('mouseleave', () => {
if(!gameOver) {
document.getElementById('smiley').textContent = '๐Ÿ˜Š';
}
});
cell.addEventListener('click', handleClick);
cell.addEventListener('contextmenu', handleRightClick);
boardElement.appendChild(cell);
}
}
}
function handleClick(e) {
if(gameOver) return;
const row = parseInt(e.target.dataset.row);
const col = parseInt(e.target.dataset.col);
if(flagged[row][col]) return;
if(firstClick) {
firstClick = false;
placeMines(row, col);
timerInterval = setInterval(updateTimer, 1000);
}
if(board[row][col] === -1) {
gameOver = true;
clearInterval(timerInterval);
document.getElementById('smiley').textContent = '๐Ÿ˜ต';
revealAll();
return;
}
revealCell(row, col);
renderBoard();
if(checkWin()) {
gameOver = true;
clearInterval(timerInterval);
document.getElementById('smiley').textContent = '๐Ÿ˜Ž';
}
}
function handleRightClick(e) {
e.preventDefault();
if(gameOver || firstClick) return;
const row = parseInt(e.target.dataset.row);
const col = parseInt(e.target.dataset.col);
if(revealed[row][col]) return;
flagged[row][col] = !flagged[row][col];
minesRemaining += flagged[row][col] ? -1 : 1;
document.getElementById('mine-count').textContent = formatDisplay(minesRemaining);
renderBoard();
}
function revealCell(row, col) {
if(row < 0 || row >= currentDifficulty.height || col < 0 || col >= currentDifficulty.width) return;
if(revealed[row][col] || flagged[row][col]) return;
revealed[row][col] = true;
if(board[row][col] === 0) {
for(let dx = -1; dx <= 1; dx++) {
for(let dy = -1; dy <= 1; dy++) {
revealCell(row + dx, col + dy);
}
}
}
}
function revealAll() {
for(let i = 0; i < currentDifficulty.height; i++) {
for(let j = 0; j < currentDifficulty.width; j++) {
revealed[i][j] = true;
}
}
renderBoard();
}
function checkWin() {
for(let i = 0; i < currentDifficulty.height; i++) {
for(let j = 0; j < currentDifficulty.width; j++) {
if(board[i][j] !== -1 && !revealed[i][j]) return false;
}
}
return true;
}
initGame();
</script>
</body>
</html>