v2: добавлена кнопка Подсказать (показывает последний ход)
This commit is contained in:
parent
72dccf45ef
commit
58954348e6
150
index.html
150
index.html
@ -260,6 +260,7 @@
|
||||
<div class="control-group-title">Действия</div>
|
||||
<div class="btn-row">
|
||||
<button class="kt-ai-btn" data-variant="primary" data-size="sm" onclick="scramble()">Перемешать</button>
|
||||
<button class="kt-ai-btn" data-size="sm" onclick="showHint()">Подсказать</button>
|
||||
<button class="kt-ai-btn" data-variant="danger" data-size="sm" onclick="resetGame()">Заново</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -383,11 +384,11 @@ function initCube() {
|
||||
}
|
||||
}
|
||||
|
||||
function rotateLayer(layer, direction) {
|
||||
function rotateLayer(layer, direction, isScramble = false) {
|
||||
if (isAnimating) return;
|
||||
isAnimating = true;
|
||||
|
||||
if (!startTime) startTimer();
|
||||
if (!startTime && !isScramble) startTimer();
|
||||
|
||||
const affectedCubies = [];
|
||||
|
||||
@ -568,6 +569,7 @@ function scramble() {
|
||||
let currentMove = 0;
|
||||
|
||||
resetGame();
|
||||
moveHistory = [];
|
||||
|
||||
function nextMove() {
|
||||
if (currentMove >= moves) return;
|
||||
@ -575,7 +577,8 @@ function scramble() {
|
||||
const layer = layers[Math.floor(Math.random() * layers.length)];
|
||||
const direction = Math.random() > 0.5 ? 1 : -1;
|
||||
|
||||
rotateLayer(layer, direction);
|
||||
moveHistory.push({ layer, direction });
|
||||
rotateLayer(layer, direction, true);
|
||||
currentMove++;
|
||||
|
||||
setTimeout(nextMove, 350);
|
||||
@ -584,27 +587,6 @@ function scramble() {
|
||||
nextMove();
|
||||
}
|
||||
|
||||
function resetGame() {
|
||||
document.getElementById('winMessage').classList.remove('show');
|
||||
document.getElementById('overlay').classList.remove('show');
|
||||
|
||||
moveCount = 0;
|
||||
document.getElementById('moves').textContent = '0';
|
||||
|
||||
if (timerInterval) {
|
||||
clearInterval(timerInterval);
|
||||
timerInterval = null;
|
||||
}
|
||||
startTime = null;
|
||||
document.getElementById('time').textContent = '00:00';
|
||||
|
||||
cubeRotationX = -25;
|
||||
cubeRotationY = -35;
|
||||
updateCubeRotation();
|
||||
|
||||
initCube();
|
||||
}
|
||||
|
||||
function startTimer() {
|
||||
startTime = Date.now();
|
||||
timerInterval = setInterval(() => {
|
||||
@ -722,6 +704,126 @@ document.addEventListener('touchend', () => {
|
||||
});
|
||||
|
||||
initCube();
|
||||
|
||||
let moveHistory = [];
|
||||
let hintTimeout = null;
|
||||
|
||||
function showHint() {
|
||||
const moveNames = {
|
||||
'U': { name: 'Верх (U)', axis: 'Y' },
|
||||
'D': { name: 'Низ (D)', axis: 'Y' },
|
||||
'L': { name: 'Лево (L)', axis: 'X' },
|
||||
'R': { name: 'Право (R)', axis: 'X' },
|
||||
'F': { name: 'Перед (F)', axis: 'Z' },
|
||||
'B': { name: 'Зад (B)', axis: 'Z' }
|
||||
};
|
||||
|
||||
if (moveHistory.length === 0) {
|
||||
showHintMessage('Нажмите «Перемешать» и начните решать!', 'info');
|
||||
return;
|
||||
}
|
||||
|
||||
const lastMove = moveHistory[moveHistory.length - 1];
|
||||
const moveInfo = moveNames[lastMove.layer];
|
||||
const directionText = lastMove.direction > 0 ? '→' : '←';
|
||||
const message = `Последний ход: ${moveInfo.name} ${directionText}`;
|
||||
|
||||
showHintMessage(message, 'hint');
|
||||
|
||||
const cubies = getCubiesForLayer(lastMove.layer);
|
||||
highlightCubies(cubies);
|
||||
}
|
||||
|
||||
function getCubiesForLayer(layer) {
|
||||
const cubies = [];
|
||||
for (let x = 0; x < 3; x++) {
|
||||
for (let y = 0; y < 3; y++) {
|
||||
for (let z = 0; z < 3; z++) {
|
||||
let include = false;
|
||||
if (layer === 'U' && cube[x][y][z].y === 1) include = true;
|
||||
if (layer === 'D' && cube[x][y][z].y === -1) include = true;
|
||||
if (layer === 'L' && cube[x][y][z].x === -1) include = true;
|
||||
if (layer === 'R' && cube[x][y][z].x === 1) include = true;
|
||||
if (layer === 'F' && cube[x][y][z].z === 1) include = true;
|
||||
if (layer === 'B' && cube[x][y][z].z === -1) include = true;
|
||||
|
||||
if (include) {
|
||||
cubies.push(cube[x][y][z]);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return cubies;
|
||||
}
|
||||
|
||||
function highlightCubies(cubies) {
|
||||
cubies.forEach(cubie => {
|
||||
cubie.element.style.filter = 'brightness(1.3) drop-shadow(0 0 8px var(--kt-ai-primary))';
|
||||
});
|
||||
|
||||
if (hintTimeout) clearTimeout(hintTimeout);
|
||||
|
||||
hintTimeout = setTimeout(() => {
|
||||
cubies.forEach(cubie => {
|
||||
cubie.element.style.filter = '';
|
||||
});
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
function showHintMessage(text, type) {
|
||||
let messageEl = document.getElementById('hintMessage');
|
||||
|
||||
if (!messageEl) {
|
||||
messageEl = document.createElement('div');
|
||||
messageEl.id = 'hintMessage';
|
||||
messageEl.style.cssText = `
|
||||
position: fixed;
|
||||
top: 100px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: var(--kt-ai-card-bg);
|
||||
border: 2px solid var(--kt-ai-primary);
|
||||
border-radius: var(--kt-ai-radius-lg);
|
||||
padding: var(--kt-ai-space-4) var(--kt-ai-space-6);
|
||||
z-index: 1001;
|
||||
display: none;
|
||||
box-shadow: 0 10px 40px rgba(0,0,0,0.2);
|
||||
max-width: 400px;
|
||||
text-align: center;
|
||||
font-weight: var(--kt-ai-weight-medium);
|
||||
`;
|
||||
document.body.appendChild(messageEl);
|
||||
}
|
||||
|
||||
messageEl.textContent = text;
|
||||
messageEl.style.display = 'block';
|
||||
|
||||
setTimeout(() => {
|
||||
messageEl.style.display = 'none';
|
||||
}, 2500);
|
||||
}
|
||||
|
||||
function resetGame() {
|
||||
document.getElementById('winMessage').classList.remove('show');
|
||||
document.getElementById('overlay').classList.remove('show');
|
||||
|
||||
moveCount = 0;
|
||||
document.getElementById('moves').textContent = '0';
|
||||
moveHistory = [];
|
||||
|
||||
if (timerInterval) {
|
||||
clearInterval(timerInterval);
|
||||
timerInterval = null;
|
||||
}
|
||||
startTime = null;
|
||||
document.getElementById('time').textContent = '00:00';
|
||||
|
||||
cubeRotationX = -25;
|
||||
cubeRotationY = -35;
|
||||
updateCubeRotation();
|
||||
|
||||
initCube();
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user