Wie funktioniert die Rotationsfunktion in HTML? ⇐ HTML

[Guest]

Ich habe versucht, ein Mosaikfliesenspiel zu programmieren. Sie müssen auf sie klicken, bis sie in der richtigen Rotation sind. Die Kacheln werden durch Bild in einem "IMG" -Fordner dargestellt. Die Bilder drehen sich im Uhrzeigersinn um 90 Grad, wenn Sie darauf klicken. Wenn die Bilder jedoch noch einmal geklickt werden müssen, bevor sie in der richtigen Position sind, und Sie auf sie klicken, werden sie gegen den Uhrzeigersinn 270 Grad anstelle von 90 Grad im Uhrzeigersinn. PS: Dies ist für meine Computer -Sience -Arbeit. Bitte hilf mir! Danke! Code: < /p>

Code: Select all

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();