senko · July 18, 2025 08:20
diff --git a/minesweeper-kimi-k2.html b/minesweeper-kimi-k2.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Minesweeper Clone</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }

        .game-container {
            text-align: center;
            background-color: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        h1 {
            color: #333;
            margin-top: 0;
        }

        .game-info {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            font-size: 18px;
            font-weight: bold;
        }

        .game-board {
            display: grid;
            grid-template-columns: repeat(10, 30px);
            grid-template-rows: repeat(10, 30px);
            gap: 1px;
            background-color: #999;
            border: 3px solid #666;
            margin: 0 auto;
        }

        .cell {
            width: 30px;
            height: 30px;
            background-color: #ccc;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: bold;
            cursor: pointer;
            user-select: none;
        }

        .cell:hover {
            background-color: #ddd;
        }

        .revealed {
            background-color: #eee;
            cursor: default;
        }

        .revealed:hover {
            background-color: #eee;
        }

        .flagged {
            background-color: #ffcccc;
        }

        .bomb {
            background-color: #ff6666;
        }

        .bomb-exploded {
            background-color: #ff0000;
        }

        .number-1 { color: #0000ff; }
        .number-2 { color: #008000; }
        .number-3 { color: #ff0000; }
        .number-4 { color: #800080; }
        .number-5 { color: #800000; }
        .number-6 { color: #008080; }
        .number-7 { color: #000000; }
        .number-8 { color: #808080; }

        .controls {
            margin-top: 20px;
        }

        button {
            padding: 10px 20px;
            font-size: 16px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        button:hover {
            background-color: #45a049;
        }

        .game-over {
            margin-top: 10px;
            font-size: 20px;
            font-weight: bold;
        }

        .win {
            color: #008000;
        }

        .lose {
            color: #ff0000;
        }
    </style>
 </head>
 <body>
    <div class="game-container">
        <h1>Minesweeper</h1>
        <div class="game-info">
            <div id="flags">🚩 10</div>
            <div id="timer">⏱️ 000</div>
        </div>
        <div id="game-board" class="game-board"></div>
        <div id="game-result" class="game-over"></div>
        <div class="controls">
            <button onclick="initGame()">New Game</button>
        </div>
    </div>

    <script>
        const ROWS = 10;
        const COLS = 10;
        const BOMBS = 10;
        
        let board = [];
        let revealed = [];
        let flagged = [];
        let gameOver = false;
        let firstClick = true;
        let timer = 0;
        let timerInterval;

        function createBoard() {
            const gameBoard = document.getElementById('game-board');
            gameBoard.innerHTML = '';
            gameBoard.style.gridTemplateColumns = `repeat(${COLS}, 30px)`;
            gameBoard.style.gridTemplateRows = `repeat(${ROWS}, 30px)`;

            for (let i = 0; i < ROWS; i++) {
                for (let j = 0; j < COLS; j++) {
                    const cell = document.createElement('div');
                    cell.classList.add('cell');
                    cell.dataset.row = i;
                    cell.dataset.col = j;
                    cell.addEventListener('click', handleLeftClick);
                    cell.addEventListener('contextmenu', handleRightClick);
                    gameBoard.appendChild(cell);
                }
            }
        }

        function initGame() {
            board = Array(ROWS).fill().map(() => Array(COLS).fill(0));
            revealed = Array(ROWS).fill().map(() => Array(COLS).fill(false));
            flagged = Array(ROWS).fill().map(() => Array(COLS).fill(false));
            gameOver = false;
            firstClick = true;
            timer = 0;
            clearInterval(timerInterval);
            updateTimer();
            
            document.getElementById('game-result').textContent = '';
            document.getElementById('flags').textContent = `🚩 ${BOMBS}`;
            
            createBoard();
        }

        function placeBombs(excludeRow, excludeCol) {
            let bombsPlaced = 0;
            while (bombsPlaced < BOMBS) {
                const row = Math.floor(Math.random() * ROWS);
                const col = Math.floor(Math.random() * COLS);
                
                if (board[row][col] === 0 && !(row === excludeRow && col === excludeCol)) {
                    board[row][col] = -1;
                    bombsPlaced++;
                }
            }
            
            calculateNumbers();
        }

        function calculateNumbers() {
            for (let i = 0; i < ROWS; i++) {
                for (let j = 0; j < COLS; j++) {
                    if (board[i][j] === -1) continue;
                    
                    let count = 0;
                    for (let di = -1; di <= 1; di++) {
                        for (let dj = -1; dj <= 1; dj++) {
                            const ni = i + di;
                            const nj = j + dj;
                            if (ni >= 0 && ni < ROWS && nj >= 0 && nj < COLS && board[ni][nj] === -1) {
                                count++;
                            }
                        }
                    }
                    board[i][j] = count;
                }
            }
        }

        function handleLeftClick(event) {
            if (gameOver) return;
            
            const row = parseInt(event.target.dataset.row);
            const col = parseInt(event.target.dataset.col);
            
            if (flagged[row][col]) return;
            
            if (firstClick) {
                placeBombs(row, col);
                firstClick = false;
                startTimer();
            }
            
            revealCell(row, col);
            updateDisplay();
            
            if (checkWin()) {
                gameOver = true;
                clearInterval(timerInterval);
                document.getElementById('game-result').textContent = 'You Win!';
                document.getElementById('game-result').className = 'game-over win';
                revealAllBombs();
            }
        }

        function handleRightClick(event) {
            event.preventDefault();
            if (gameOver) return;
            
            const row = parseInt(event.target.dataset.row);
            const col = parseInt(event.target.dataset.col);
            
            if (revealed[row][col]) return;
            
            flagged[row][col] = !flagged[row][col];
            
            const flagCount = flagged.flat().filter(Boolean).length;
            document.getElementById('flags').textContent = `🚩 ${BOMBS - flagCount}`;
            updateDisplay();
        }

        function revealCell(row, col) {
            if (row < 0 || row >= ROWS || col < 0 || col >= COLS) return;
            if (revealed[row][col] || flagged[row][col]) return;
            
            revealed[row][col] = true;
            
            if (board[row][col] === -1) {
                gameOver = true;
                clearInterval(timerInterval);
                document.getElementById('game-result').textContent = 'Game Over!';
                document.getElementById('game-result').className = 'game-over lose';
                revealAllBombs();
                return;
            }
            
            if (board[row][col] === 0) {
                for (let di = -1; di <= 1; di++) {
                    for (let dj = -1; dj <= 1; dj++) {
                        revealCell(row + di, col + dj);
                    }
                }
            }
        }

        function updateDisplay() {
            for (let i = 0; i < ROWS; i++) {
                for (let j = 0; j < COLS; j++) {
                    const cell = document.querySelector(`[data-row="${i}"][data-col="${j}"]`);
                    
                    if (revealed[i][j]) {
                        cell.classList.add('revealed');
                        if (board[i][j] === -1) {
                            cell.classList.add('bomb');
                            cell.textContent = '💣';
                        } else if (board[i][j] > 0) {
                            cell.textContent = board[i][j];
                            cell.classList.add(`number-${board[i][j]}`);
                        }
                    } else if (flagged[i][j]) {
                        cell.classList.add('flagged');
                        cell.textContent = '🚩';
                    } else {
                        cell.classList.remove('revealed', 'flagged');
                        cell.textContent = '';
                    }
                }
            }
        }

        function revealAllBombs() {
            for (let i = 0; i < ROWS; i++) {
                for (let j = 0; j < COLS; j++) {
                    if (board[i][j] === -1) {
                        const cell = document.querySelector(`[data-row="${i}"][data-col="${j}"]`);
                        cell.classList.add('revealed', 'bomb');
                        cell.textContent = '💣';
                    }
                }
            }
        }

        function checkWin() {
            for (let i = 0; i < ROWS; i++) {
                for (let j = 0; j < COLS; j++) {
                    if (board[i][j] !== -1 && !revealed[i][j]) {
                        return false;
                    }
                }
            }
            return true;
        }

        function startTimer() {
            timerInterval = setInterval(() => {
                timer++;
                updateTimer();
            }, 1000);
        }

        function updateTimer() {
            document.getElementById('timer').textContent = `⏱️ ${timer.toString().padStart(3, '0')}`;
        }

        initGame();
    </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Minesweeper Clone</title>
	<style>
	body {
	font-family: Arial, sans-serif;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	margin: 0;
	background-color: #f0f0f0;
	}

	.game-container {
	text-align: center;
	background-color: white;
	padding: 20px;
	border-radius: 10px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	}

	h1 {
	color: #333;
	margin-top: 0;
	}

	.game-info {
	display: flex;
	justify-content: space-between;
	margin-bottom: 10px;
	font-size: 18px;
	font-weight: bold;
	}

	.game-board {
	display: grid;
	grid-template-columns: repeat(10, 30px);
	grid-template-rows: repeat(10, 30px);
	gap: 1px;
	background-color: #999;
	border: 3px solid #666;
	margin: 0 auto;
	}

	.cell {
	width: 30px;
	height: 30px;
	background-color: #ccc;
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: bold;
	cursor: pointer;
	user-select: none;
	}

	.cell:hover {
	background-color: #ddd;
	}

	.revealed {
	background-color: #eee;
	cursor: default;
	}

	.revealed:hover {
	background-color: #eee;
	}

	.flagged {
	background-color: #ffcccc;
	}

	.bomb {
	background-color: #ff6666;
	}

	.bomb-exploded {
	background-color: #ff0000;
	}

	.number-1 { color: #0000ff; }
	.number-2 { color: #008000; }
	.number-3 { color: #ff0000; }
	.number-4 { color: #800080; }
	.number-5 { color: #800000; }
	.number-6 { color: #008080; }
	.number-7 { color: #000000; }
	.number-8 { color: #808080; }

	.controls {
	margin-top: 20px;
	}

	button {
	padding: 10px 20px;
	font-size: 16px;
	background-color: #4CAF50;
	color: white;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	}

	button:hover {
	background-color: #45a049;
	}

	.game-over {
	margin-top: 10px;
	font-size: 20px;
	font-weight: bold;
	}

	.win {
	color: #008000;
	}

	.lose {
	color: #ff0000;
	}
	</style>
	</head>
	<body>
	<div class="game-container">
	<h1>Minesweeper</h1>
	<div class="game-info">
	<div id="flags">🚩 10</div>
	<div id="timer">⏱️ 000</div>
	</div>
	<div id="game-board" class="game-board"></div>
	<div id="game-result" class="game-over"></div>
	<div class="controls">
	<button onclick="initGame()">New Game</button>
	</div>
	</div>

	<script>
	const ROWS = 10;
	const COLS = 10;
	const BOMBS = 10;

	let board = [];
	let revealed = [];
	let flagged = [];
	let gameOver = false;
	let firstClick = true;
	let timer = 0;
	let timerInterval;

	function createBoard() {
	const gameBoard = document.getElementById('game-board');
	gameBoard.innerHTML = '';
	gameBoard.style.gridTemplateColumns = `repeat(${COLS}, 30px)`;
	gameBoard.style.gridTemplateRows = `repeat(${ROWS}, 30px)`;

	for (let i = 0; i < ROWS; i++) {
	for (let j = 0; j < COLS; j++) {
	const cell = document.createElement('div');
	cell.classList.add('cell');
	cell.dataset.row = i;
	cell.dataset.col = j;
	cell.addEventListener('click', handleLeftClick);
	cell.addEventListener('contextmenu', handleRightClick);
	gameBoard.appendChild(cell);
	}
	}
	}

	function initGame() {
	board = Array(ROWS).fill().map(() => Array(COLS).fill(0));
	revealed = Array(ROWS).fill().map(() => Array(COLS).fill(false));
	flagged = Array(ROWS).fill().map(() => Array(COLS).fill(false));
	gameOver = false;
	firstClick = true;
	timer = 0;
	clearInterval(timerInterval);
	updateTimer();

	document.getElementById('game-result').textContent = '';
	document.getElementById('flags').textContent = `🚩 ${BOMBS}`;

	createBoard();
	}

	function placeBombs(excludeRow, excludeCol) {
	let bombsPlaced = 0;
	while (bombsPlaced < BOMBS) {
	const row = Math.floor(Math.random() * ROWS);
	const col = Math.floor(Math.random() * COLS);

	if (board[row][col] === 0 && !(row === excludeRow && col === excludeCol)) {
	board[row][col] = -1;
	bombsPlaced++;
	}
	}

	calculateNumbers();
	}

	function calculateNumbers() {
	for (let i = 0; i < ROWS; i++) {
	for (let j = 0; j < COLS; j++) {
	if (board[i][j] === -1) continue;

	let count = 0;
	for (let di = -1; di <= 1; di++) {
	for (let dj = -1; dj <= 1; dj++) {
	const ni = i + di;
	const nj = j + dj;
	if (ni >= 0 && ni < ROWS && nj >= 0 && nj < COLS && board[ni][nj] === -1) {
	count++;
	}
	}
	}
	board[i][j] = count;
	}
	}
	}

	function handleLeftClick(event) {
	if (gameOver) return;

	const row = parseInt(event.target.dataset.row);
	const col = parseInt(event.target.dataset.col);

	if (flagged[row][col]) return;

	if (firstClick) {
	placeBombs(row, col);
	firstClick = false;
	startTimer();
	}

	revealCell(row, col);
	updateDisplay();

	if (checkWin()) {
	gameOver = true;
	clearInterval(timerInterval);
	document.getElementById('game-result').textContent = 'You Win!';
	document.getElementById('game-result').className = 'game-over win';
	revealAllBombs();
	}
	}

	function handleRightClick(event) {
	event.preventDefault();
	if (gameOver) return;

	const row = parseInt(event.target.dataset.row);
	const col = parseInt(event.target.dataset.col);

	if (revealed[row][col]) return;

	flagged[row][col] = !flagged[row][col];

	const flagCount = flagged.flat().filter(Boolean).length;
	document.getElementById('flags').textContent = `🚩 ${BOMBS - flagCount}`;
	updateDisplay();
	}

	function revealCell(row, col) {
	if (row < 0 \|\| row >= ROWS \|\| col < 0 \|\| col >= COLS) return;
	if (revealed[row][col] \|\| flagged[row][col]) return;

	revealed[row][col] = true;

	if (board[row][col] === -1) {
	gameOver = true;
	clearInterval(timerInterval);
	document.getElementById('game-result').textContent = 'Game Over!';
	document.getElementById('game-result').className = 'game-over lose';
	revealAllBombs();
	return;
	}

	if (board[row][col] === 0) {
	for (let di = -1; di <= 1; di++) {
	for (let dj = -1; dj <= 1; dj++) {
	revealCell(row + di, col + dj);
	}
	}
	}
	}

	function updateDisplay() {
	for (let i = 0; i < ROWS; i++) {
	for (let j = 0; j < COLS; j++) {
	const cell = document.querySelector(`[data-row="${i}"][data-col="${j}"]`);

	if (revealed[i][j]) {
	cell.classList.add('revealed');
	if (board[i][j] === -1) {
	cell.classList.add('bomb');
	cell.textContent = '💣';
	} else if (board[i][j] > 0) {
	cell.textContent = board[i][j];
	cell.classList.add(`number-${board[i][j]}`);
	}
	} else if (flagged[i][j]) {
	cell.classList.add('flagged');
	cell.textContent = '🚩';
	} else {
	cell.classList.remove('revealed', 'flagged');
	cell.textContent = '';
	}
	}
	}
	}

	function revealAllBombs() {
	for (let i = 0; i < ROWS; i++) {
	for (let j = 0; j < COLS; j++) {
	if (board[i][j] === -1) {
	const cell = document.querySelector(`[data-row="${i}"][data-col="${j}"]`);
	cell.classList.add('revealed', 'bomb');
	cell.textContent = '💣';
	}
	}
	}
	}

	function checkWin() {
	for (let i = 0; i < ROWS; i++) {
	for (let j = 0; j < COLS; j++) {
	if (board[i][j] !== -1 && !revealed[i][j]) {
	return false;
	}
	}
	}
	return true;
	}

	function startTimer() {
	timerInterval = setInterval(() => {
	timer++;
	updateTimer();
	}, 1000);
	}

	function updateTimer() {
	document.getElementById('timer').textContent = `⏱️ ${timer.toString().padStart(3, '0')}`;
	}

	initGame();
	</script>
	</body>
	</html>