I tried to programm a mosaic tile game. You gotta click on them untill they are in the right rotation. The tiles are represented by image in a "img" folder. The images rotate 90 degrees clockwise when you click on them but if the images need to be clicked one more time before they are in the right position and you click them then they will turn 270 degrees counterclockwise instead of 90 degrees clockwise. PS: this is for my computer sience work so please help me! Thanks! CODE:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Raum 5: Das Mosaik des Schattens</title>
<link rel="stylesheet" href="styles/style.css">
<style>
.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;
}
</style>
</head>
<body>
<h1>Mosaic</h1>
<div class="mosaic-container" id="mosaic"></div>
<p id="mosaic-message"></p>
<script>
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();
</script>
</body>
</html>Because of the % 360 in your code, you are resetting the rotation of the element to 0 degrees every 4th rotation. This causes it to rotate counterclockwise (rotation from 270 degrees to 0 degrees). To fix this, you could remove the % 360 since a rotation above 360 degrees is essentially the same thing as doing % 360 with the only difference being that you are not rotating from 270 degrees to 0 degrees (counterclockwise) but instead rotating from 270 degrees to 360 degrees (equivalent to 0 degrees but clockwise rotation).
The only disadvantage of this solution is that the highest amount of rotation you can get is 9007199254740991 degrees which should be enough in this case. (See CSS transform rotate always clockwise without exceeding 360 degrees)
Here is the updated code:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Raum 5: Das Mosaik des Schattens</title>
<link rel="stylesheet" href="styles/style.css">
<style>
.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;
}
</style>
</head>
<body>
<h1>Mosaic</h1>
<div class="mosaic-container" id="mosaic"></div>
<p id="mosaic-message"></p>
<script>
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}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]}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();
</script>
</body>
</html>