吾爱去(52qu)-专注力与记忆训练

26

2025
01

专注力与记忆训练

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

点击进入游戏：专注力与记忆训练

生成随机数字：

在点击“开始”按钮时，生成4个随机数字（每个数字范围为1到9）。

显示数字：

将这4个随机数字分别显示在4个小窗口中。

每个小窗口的位置和大小可以自由调整，不再固定长宽比。

数字在小窗口中的位置是随机的。

控制显示方式：

提供一个选项让用户选择是否同时显示所有数字。

如果选择“同时显示”，所有数字会在同一时间显示，并在设定的时间后消失。

如果不选择“同时显示”，数字会依次逐个显示，每次显示一个数字，并在设定的时间后继续下一个数字的显示。

用户输入验证：

用户需要在指定时间内记住这些数字，并在提示后输入他们所看到的数字序列。

输入框用于接收用户的输入，最大长度为4位数字。

验证按钮初始状态为禁用，只有在点击“开始”按钮后才启用。

验证结果：

用户输入完成后，点击“验证”按钮进行验证。

如果输入正确，弹出提示信息“正确！您输入的数字完全正确。”。

如果输入错误，弹出提示信息“错误！正确的数字是：XXX”。

统计次数：

记录并显示总的正确次数和错误次数。

不再显示本轮的正确次数和错误次数。

一旦用户进行了验证，无论结果如何，都会禁用验证按钮，防止二次验证。

控件布局：

所有控件（包括下拉菜单、输入框、按钮等）放置在页面的最下方。

标题和其他信息位于页面上方。

界面设计：

页面整体背景颜色为浅灰色 (#f0f0f0)。

使用简单的CSS样式来美化小窗口和控件。

通过以上需求，程序旨在帮助用户提高专注力和记忆力。希望这些需求对您有所帮助！如果有进一步的修改或扩展需求，请随时告知。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #f0f0f0;
flex-direction: column;
}
.container {
width: 90%; /* Relative width */
height: 50vh; /* Relative height */
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 10px;
margin-bottom: 20px;
}
.box {
position: relative;
background-color: white;
border: 1px solid #ccc;
display: flex;
justify-content: center;
align-items: center;
}
.number {
position: absolute;
font-size: 2em;
color: #333;
}
.controls {
display: flex;
justify-content: center;
align-items: center;
margin-top: 10px;
}
.controls select, .controls input, .controls button {
margin: 0 10px;
padding: 10px;
font-size: 1em;
}
h1 {
text-align: center;
margin-bottom: 10px;
}
.stats {
margin-top: 20px;
font-size: 1.5em;
color: #333;
}
</style>
</head>
<body>
<h1>专注力与记忆训练</h1>

<div id="container">

</div>

<div id="statsMessage"></div>

<div>
<select id="timeSelect">
<option value="1">1 秒</option>
<option value="3">3 秒</option>
<option value="5">5 秒</option>
<option value="7">7 秒</option>
</select>
<button id="startButton">开始</button>
<input type="text" id="userInput" placeholder="请输入4位数字" maxlength="4" disabled>
<button id="validateButton" disabled>验证</button>
<label>
<input type="checkbox" id="simultaneousDisplayCheckbox">
同时显示数字
</label>
</div>

<script>
let displayedNumbers = [];
let correctCount = 0;
let incorrectCount = 0;
let validationAllowed = true;

function getRandomNumber() {
return Math.floor(Math.random() * 9) + 1;
}

function getRandomPosition(boxWidth, boxHeight, numberWidth, numberHeight) {
const maxX = boxWidth - numberWidth;
const maxY = boxHeight - numberHeight;
return {
x: Math.floor(Math.random() * maxX),
y: Math.floor(Math.random() * maxY)
};
}

function updateBox(box, number) {
const randomPosition = getRandomPosition(
box.offsetWidth,
box.offsetHeight,
50, // Assuming the number width is 50px
50 // Assuming the number height is 50px
);

const numberElement = document.createElement('div');
numberElement.className = 'number';
numberElement.style.left = `${randomPosition.x}px`;
numberElement.style.top = `${randomPosition.y}px`;
numberElement.textContent = number;

box.innerHTML = ''; // Clear previous numbers
box.appendChild(numberElement);
}

function createBoxes(numBoxes) {
const container = document.getElementById('container');
container.innerHTML = ''; // Clear existing boxes

// Set grid template based on the number of boxes
if (numBoxes === 4) {
container.style.gridTemplateColumns = 'repeat(2, 1fr)';
container.style.gridTemplateRows = 'repeat(2, 1fr)';
}

for (let i = 0; i < numBoxes; i++) {
const box = document.createElement('div');
box.className = 'box';
container.appendChild(box);
}
}

document.getElementById('startButton').addEventListener('click', () => {
const boxes = document.querySelectorAll('.box');
const selectedTime = parseInt(document.getElementById('timeSelect').value);
const simultaneousDisplay = document.getElementById('simultaneousDisplayCheckbox').checked;
displayedNumbers = [];
const userInputField = document.getElementById('userInput');
const validateButton = document.getElementById('validateButton');

// Reset validation status
validationAllowed = true;
userInputField.disabled = false;
validateButton.disabled = false;

// Clear any existing intervals and result message
clearInterval(intervalId);
clearTimeout(timeoutId);
userInputField.value = '';

// Generate random numbers based on the number of boxes
for (let i = 0; i < boxes.length; i++) {
const randomNumber = getRandomNumber();
displayedNumbers.push(randomNumber);
}

if (simultaneousDisplay) {
// Display all numbers simultaneously with random positions
boxes.forEach((box, index) => {
updateBox(box, displayedNumbers[index]);
});

// Clear all boxes after the selected time
timeoutId = setTimeout(() => {
boxes.forEach(box => {
box.innerHTML = '';
});
}, selectedTime * 1000);
} else {
// Function to update each box in sequence with random positions
let currentBoxIndex = 0;
function updateNextBox() {
if (currentBoxIndex < boxes.length) {
updateBox(boxes[currentBoxIndex], displayedNumbers[currentBoxIndex]);
currentBoxIndex++;
setTimeout(updateNextBox, selectedTime * 1000);
} else {
// All boxes have been updated
// Wait for the selected time before clearing all boxes
timeoutId = setTimeout(() => {
boxes.forEach(box => {
box.innerHTML = '';
});
}, selectedTime * 1000);
}
}

// Start updating boxes every second
intervalId = setTimeout(updateNextBox, 1000);
}
});

document.getElementById('validateButton').addEventListener('click', () => {
if (!validationAllowed) {
alert("您已经验证过这一轮了，请点击“开始”按钮重新生成数字。");
return;
}

const userInputField = document.getElementById('userInput');
const userInput = userInputField.value.trim();

// Validate user input
if (userInput.length === displayedNumbers.length && /^\d+$/.test(userInput)) {
const userNumbers = userInput.split('').map(Number);

// Compare user input with displayed numbers
let correct = true;
for (let i = 0; i < displayedNumbers.length; i++) {
if (userNumbers[i] !== displayedNumbers[i]) {
correct = false;
break;
}
}

// Update stats
if (correct) {
correctCount++;
} else {
incorrectCount++;
}

// Display result in a popup
if (correct) {
alert("正确！您输入的数字完全正确。");
} else {
alert(`错误！正确的数字是：${displayedNumbers.join('')}`);
}

// Update total stats message
const statsMessage = document.getElementById('statsMessage');
statsMessage.textContent = `总正确次数: ${correctCount}, 总错误次数: ${incorrectCount}`;

// Disable further validation
validationAllowed = false;
userInputField.disabled = true;
validateButton.disabled = true;
} else {
alert(`无效输入。请输入正好${displayedNumbers.length}位数字。`);
}
});

let intervalId;
let timeoutId;

// Initialize with 4 boxes by default
createBoxes(4);
</script>
</body>
</html>