Spaces:

openfree
/

Minesweeper-Game

Running

App Files Files Community

Minesweeper-Game / index.html

openfree

Update index.html

8999237 verified 5 days ago

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>