Как работает функция вращения в HTML? ⇐ Html

[Anonymous]

Я попытался программировать мозаичную плитку. Вы должны нажать на них, пока они не в правильном вращении. Плитка представлена ​​изображением в папке "IMG". Изображения вращаются на 90 градусов по часовой стрелке, когда вы нажимаете на них, но если изображения необходимо нажать еще раз, прежде чем они окажутся в правильном положении, и вы нажимаете на них, тогда они исполнят 270 градусов против часовой стрелки вместо 90 градусов по часовой стрелке. PS: Это для моей компьютерной работы, поэтому, пожалуйста, помогите мне! Спасибо! Код: < /p>

Код: Выделить всё

Raum 5: Das Mosaik des Schattens


.mosaic-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 5px;
max-width: 600px;
margin: 20px auto;
border: 2px dashed #66fcf1;
background: #0b0c10;
padding: 10px;
}
.tile {
width: 190px;
height: 190px;
background-size: cover;
background-position: center;
border: 2px solid #444;
transition: transform 0.3s ease, border 0.3s ease, box-shadow 0.3s ease;
cursor: pointer;
}
.tile:hover {
transform: scale(1.1);
border: 3px solid red;
box-shadow: 0 0 15px red;
}



Mosaic





const numTiles = 9;
const mosaicContainer = document.getElementById('mosaic');
const messageElement = document.getElementById('mosaic-message');

const mosaicImages = [
"mosaic1.jpg",
"mosaic2.jpg",
"mosaic3.jpg",
"mosaic4.jpg",
"mosaic5.jpg",
"mosaic6.jpg",
"mosaic7.jpg",
"mosaic8.jpg",
"mosaic9.jpg"
];

const tileRotations = [];

function createMosaic() {
mosaicContainer.innerHTML = "";
for (let i = 0; i < numTiles; i++) {
const imageFile = mosaicImages[i];
const possibleRotations = [0, 90, 180, 270];
let rotation = possibleRotations[Math.floor(Math.random() * possibleRotations.length)];
tileRotations[i] = rotation; // Speichere die aktuelle Drehung (additiv, ohne Modulo)
const tile = document.createElement('div');
tile.classList.add('tile');
tile.style.backgroundImage = `url('img/${imageFile}')`;
tile.style.transform = `rotate(${rotation % 360}deg)`;
tile.dataset.index = i;
tile.addEventListener('click', () => {
rotateTile(i);
});
mosaicContainer.appendChild(tile);
}
}

function rotateTile(index) {
tileRotations[index] += 90;
const tile = document.querySelector(`.tile[data-index="${index}"]`);
tile.style.transform = `rotate(${tileRotations[index] % 360}deg)`;
checkMosaic();
}

function checkMosaic() {
const solved = tileRotations.every(rotation => (rotation % 360) === 0);
if (solved) {
messageElement.textContent = "Won!";
setTimeout(() => {
window.location.href = "raum6.html";
}, 2000);
} else {
messageElement.textContent = "";
}
}

createMosaic();

Подробнее здесь: https://stackoverflow.com/questions/794 ... rk-in-html