中国跳棋人机对战

* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Arial', sans-serif; } body { background-color: #f5f5f5; color: #333; display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 20px; } .game-container { max-width: 800px; width: 100%; background-color: #fff; border-radius: 15px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); overflow: hidden; } .header { background-color: #e74c3c; color: white; padding: 15px; text-align: center; } .header h1 { font-size: 1.8rem; margin-bottom: 10px; } .scoreboard { display: flex; justify-content: space-around; font-size: 1.2rem; } .player-score, .ai-score { display: flex; align-items: center; gap: 10px; } .board-container { position: relative; padding: 20px; } .board { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; margin: 0 auto; } .cell { aspect-ratio: 1; border-radius: 5px; display: flex; justify-content: center; align-items: center; font-size: 1.2rem; cursor: pointer; transition: all 0.3s ease; position: relative; } .cell.normal { background-color: #f0f0f0; } .cell.special { background-color: #3498db; color: white; } .cell.penalty { background-color: #e74c3c; color: white; } .cell.bonus { background-color: #2ecc71; color: white; } .cell.player { background-color: #3498db; } .cell.ai { background-color: #e74c3c; } .great-wall { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); z-index: 10; text-align: center; } .great-wall svg { width: 100%; height: 40px; } .controls { padding: 15px; display: flex; flex-direction: column; align-items: center; gap: 15px; background-color: #f9f9f9; } button { padding: 10px 20px; background-color: #e74c3c; color: white; border: none; border-radius: 5px; font-size: 1rem; cursor: pointer; transition: background-color 0.3s; } button:hover { background-color: #c0392b; } .dice-result { font-size: 2rem; font-weight: bold; } .message { font-size: 1.1rem; text-align: center; min-height: 20px; } @media (max-width: 600px) { .header h1 { font-size: 1.5rem; } .cell { font-size: 1rem; } button { padding: 8px 16px; } } class ChineseCheckersGame { constructor() { this.boardSize = 100; this.playerPosition = 0; this.aiPosition = 0; this.currentPlayer = 'player'; this.specialCells = { bonus: [5, 15, 25, 35, 45, 55, 65, 75, 85, 95], penalty: [8, 18, 28, 38, 48, 58, 68, 78, 88, 98], greatWall: [49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59] }; this.playerScore = 0; this.aiScore = 0; this.initGame(); this.setupEventListeners(); } initGame() { this.renderBoard(); this.updateScores(); } renderBoard() { const board = document.getElementById('board'); board.innerHTML = ''; for (let i = 0; i < this.boardSize; i++) { const cell = document.createElement('div'); cell.className = 'cell'; cell.dataset.index = i; if (i === this.playerPosition) { cell.classList.add('player'); cell.textContent = '👤'; } else if (i === this.aiPosition) { cell.classList.add('ai'); cell.textContent = '🤖'; } else if (this.specialCells.bonus.includes(i)) { cell.classList.add('bonus'); cell.textContent = '+'; } else if (this.specialCells.penalty.includes(i)) { cell.classList.add('penalty'); cell.textContent = '-'; } else if (this.specialCells.greatWall.includes(i)) { cell.classList.add('special'); cell.textContent = '🏯'; } else { cell.classList.add('normal'); } board.appendChild(cell); } } setupEventListeners() { document.getElementById('roll-dice').addEventListener('click', () => { if (this.currentPlayer === 'player') { this.rollDice(); } }); } rollDice() { const diceResult = Math.floor(Math.random() * 6) + 1; document.getElementById('dice-result').textContent = `🎲 ${diceResult}`; if (this.currentPlayer === 'player') { this.movePlayer(diceResult); } else { this.moveAI(diceResult); } } movePlayer(steps) { const newPosition = this.playerPosition + steps; if (newPosition >= this.boardSize) { this.playerScore++; this.playerPosition = 0; document.getElementById('message').textContent = '恭喜你跨越长城得分！'; } else { this.playerPosition = newPosition; if (this.specialCells.bonus.includes(this.playerPosition)) { const bonus = Math.floor(Math.random() * 3) + 1; document.getElementById('message').textContent = `获得奖励前进${bonus}步！`; this.movePlayer(bonus); return; } else if (this.specialCells.penalty.includes(this.playerPosition)) { const penalty = Math.floor(Math.random() * 3) + 1; document.getElementById('message').textContent = `遇到惩罚后退${penalty}步！`; this.movePlayer(-penalty); return; } else { document.getElementById('message').textContent = ''; } } this.renderBoard(); this.currentPlayer = 'ai'; setTimeout(() => { this.rollDice(); }, 1000); } moveAI(steps) { const newPosition = this.aiPosition + steps; if (newPosition >= this.boardSize) { this.aiScore++; this.aiPosition = 0; document.getElementById('message').textContent = 'AI跨越长城得分！'; } else { this.aiPosition = newPosition; if (this.specialCells.bonus.includes(this.aiPosition)) { const bonus = Math.floor(Math.random() * 3) + 1; document.getElementById('message').textContent = `AI获得奖励前进${bonus}步！`; this.moveAI(bonus); return; } else if (this.specialCells.penalty.includes(this.aiPosition)) { const penalty = Math.floor(Math.random() * 3) + 1; document.getElementById('message').textContent = `AI遇到惩罚后退${penalty}步！`; this.moveAI(-penalty); return; } else { document.getElementById('message').textContent = ''; } } this.renderBoard(); this.currentPlayer = 'player'; this.updateScores(); } updateScores() { document.getElementById('player-score').textContent = this.playerScore; document.getElementById('ai-score').textContent = this.aiScore; if (this.playerScore >= 3) { document.getElementById('message').textContent = '恭喜你获胜！'; document.getElementById('roll-dice').disabled = true; } else if (this.aiScore >= 3) { document.getElementById('message').textContent = 'AI获胜！'; document.getElementById('roll-dice').disabled = true; } } } // 启动游戏 const game = new ChineseCheckersGame();