吾爱去(52qu)-数字验证游戏

26

2025
01

数字验证游戏

使用通义AI制件的网页游戏。

点击进入游戏：数字验证游戏

生成随机数字：

生成的随机数字中每个数字都与其他位置的数字不同。

数字范围为1到9。

用户输入控件：

每个输入框的范围限定在1到9之间。

输入框的数量与用户指定的长度一致。

验证逻辑：

计算正确位置的数量：如果用户输入的数字与对应位置的随机数字相同，则计数加一。

计算正确数字的数量：通过统计每个数字出现的次数，确保正确数字的数量是用户输入和随机数字中共有的最小次数。

显示验证结果：

验证结果显示在页面上，并区分正确和错误的消息。

正确消息显示为绿色，错误消息显示为红色。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数字验证游戏</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
.container {
max-width: 400px;
margin: auto;
}
input[type="number"] {
width: 50px;
margin-right: 5px;
}
button {
margin-top: 10px;
}
.message-list {
margin-top: 10px;
}
.message-item {
margin-bottom: 5px;
}
.correct {
color: green;
}
.incorrect {
color: red;
}
</style>
</head>
<body>
<div>
<h1>数字验证游戏</h1>
<label for="length">选项中的值（生成的随机数字个数）:</label>
<input type="number" id="length" min="1" max="9" value="4">
<button onclick="startGame()">开始</button>
<br><br>
<div id="userInputContainer"></div>
<button id="validateButton" onclick="validateInput()" disabled>验证</button>
<div id="messageList"></div>
</div>

<script>
let randomNumbers = [];

function startGame() {
const length = parseInt(document.getElementById('length').value);
if (length > 9) {
displayMessage('生成的随机数字个数不能超过9', false);
return;
}
randomNumbers = generateUniqueRandomNumbers(length);
createInputControls(length);
document.getElementById('validateButton').disabled = false;
clearMessages(); // 清空消息
}

function generateUniqueRandomNumbers(length) {
const numbers = new Set();
while (numbers.size < length) {
numbers.add(Math.floor(Math.random() * 9) + 1);
}
return Array.from(numbers);
}

function createInputControls(length) {
const container = document.getElementById('userInputContainer');
container.innerHTML = ''; // Clear previous inputs
for (let i = 0; i < length; i++) {
const input = document.createElement('input');
input.type = 'number';
input.min = 1;
input.max = 9;
input.step = 1;
input.placeholder = '输入数字';
container.appendChild(input);
}
}

function validateInput() {
const inputs = document.querySelectorAll('#userInputContainer input');
const userInput = Array.from(inputs).map(input => parseInt(input.value));

if (userInput.some(isNaN)) {
displayMessage('请输入有效的数字', false);
return;
}

let correctPositions = 0;
let correctDigits = 0;

// Calculate correct positions
userInput.forEach((digit, index) => {
if (digit === randomNumbers[index]) {
correctPositions++;
}
});

// Calculate correct digits
const userDigitCount = {};
const randomDigitCount = {};

userInput.forEach(digit => {
userDigitCount[digit] = (userDigitCount[digit] || 0) + 1;
});

randomNumbers.forEach(digit => {
randomDigitCount[digit] = (randomDigitCount[digit] || 0) + 1;
});

for (const digit in userDigitCount) {
if (randomDigitCount[digit]) {
correctDigits += Math.min(userDigitCount[digit], randomDigitCount[digit]);
}
}

if (correctPositions === randomNumbers.length) {
displayMessage(`正确！您输入的数字完全正确。输入的数字: ${userInput.join('')}`, true);
} else {
displayMessage(`正确位置: ${correctPositions}, 正确数字: ${correctDigits}. 输入的数字: ${userInput.join('')}`, false);
}
}

function displayMessage(message, isCorrect) {
const messageList = document.getElementById('messageList');
const messageItem = document.createElement('div');
messageItem.className = 'message-item';
messageItem.textContent = message;
if (isCorrect) {
messageItem.classList.add('correct');
} else {
messageItem.classList.add('incorrect');
}
messageList.appendChild(messageItem);
}

function clearMessages() {
const messageList = document.getElementById('messageList');
messageList.innerHTML = ''; // Clear all messages
}
</script>
</body>
</html>