123 vs 321 积分游戏

body {
font-family: Arial, sans-serif;
max-width: 600px;
margin: 0 auto;
padding: 20px;
background-color: #f5f5f5;
}

.game-container {
background: white;
border-radius: 10px;
padding: 30px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.title {
text-align: center;
color: #333;
margin-bottom: 30px;
}

.scores {
display: flex;
justify-content: space-between;
margin-bottom: 30px;
gap: 20px;
}

.score-box {
flex: 1;
padding: 20px;
border-radius: 8px;
text-align: center;
font-size: 18px;
font-weight: bold;
}

.player-score {
background-color: #e3f2fd;
border: 2px solid #2196f3;
color: #1976d2;
}

.bot-score {
background-color: #fff3e0;
border: 2px solid #ff9800;
color: #f57c00;
}

.input-section {
text-align: center;
margin-bottom: 30px;
}

.input-box {
width: 200px;
padding: 15px;
font-size: 18px;
border: 2px solid #ddd;
border-radius: 5px;
text-align: center;
margin-right: 10px;
}

.submit-btn {
padding: 15px 30px;
font-size: 18px;
background-color: #4caf50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}

.submit-btn:hover {
background-color: #45a049;
}

.submit-btn:disabled {
background-color: #cccccc;
cursor: not-allowed;
}

.round-info {
text-align: center;
margin-bottom: 20px;
font-size: 16px;
color: #666;
}

.game-log {
background-color: #f9f9f9;
border: 1px solid #ddd;
border-radius: 5px;
padding: 15px;
max-height: 300px;
overflow-y: auto;
margin-top: 20px;
}

.log-entry {
margin-bottom: 10px;
padding: 8px;
border-radius: 3px;
}

.log-entry:nth-child(even) {
background-color: #f0f0f0;
}

.rules {
background-color: #fff8e1;
border: 1px solid #ffc107;
border-radius: 5px;
padding: 15px;
margin-bottom: 20px;
font-size: 14px;
}

.rules h4 {
margin-top: 0;
color: #f57c00;
}

.error {
color: #f44336;
text-align: center;
margin-top: 10px;
}

let playerScore = 100;
let botScore = 100;
let currentRound = 1;
let lastPlayerMove = null;
let gameHistory = [];

const playerScoreElement = document.getElementById(‘playerScore’);
const botScoreElement = document.getElementById(‘botScore’);
const roundNumberElement = document.getElementById(’roundNumber’);
const userInputElement = document.getElementById(‘userInput’);
const submitBtnElement = document.getElementById(‘submitBtn’);
const errorMessageElement = document.getElementById(‘errorMessage’);
const gameLogElement = document.getElementById(‘gameLog’);

function updateDisplay() {
playerScoreElement.textContent = playerScore;
botScoreElement.textContent = botScore;
roundNumberElement.textContent = currentRound;
}

function addLogEntry(message) {
const entry = document.createElement(‘div’);
entry.className = ‘log-entry’;
entry.textContent = message;
gameLogElement.appendChild(entry);
gameLogElement.scrollTop = gameLogElement.scrollHeight;
}

function getBotMove() {
if (currentRound = 0 ? `+${playerChange}` : `${playerChange}`;
const botChangeStr = botChange >= 0 ? `+${botChange}` : `${botChange}`;

addLogEntry(`Round ${currentRound}: You played ${playerMove}, Bot played ${botMove}`);
addLogEntry(`Score changes: You ${playerChangeStr}, Bot ${botChangeStr}`);
addLogEntry(`Current scores: You ${playerScore}, Bot ${botScore}`);
addLogEntry(‘—‘);

// Move to next round
currentRound++;

// Update display
updateDisplay();

// Clear input
userInputElement.value = ”;
}

function validateInput(input) {
if (input !== ‘123’ && input !== ‘321’) {
return ‘Please enter either 123 or 321’;
}
return null;
}

function handleSubmit() {
const input = userInputElement.value.trim();
const error = validateInput(input);

if (error) {
errorMessageElement.textContent = error;
return;
}

errorMessageElement.textContent = ”;
processRound(input);
}

// Event listeners
submitBtnElement.addEventListener(‘click’, handleSubmit);

userInputElement.addEventListener(‘keypress’, function(e) {
if (e.key === ‘Enter’) {
handleSubmit();
}
});

userInputElement.addEventListener(‘input’, function() {
errorMessageElement.textContent = ”;
});

// Initialize display
updateDisplay();