Naz/sozdat-sayt-igra-v-kubik-rub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v4: исправлены цвета кубиков - каждый получает правильные грани

Browse Source
This commit is contained in:
Naz 2026-09-16 10:08:21 +00:00
parent 2747d6173a
commit 8afae1cff1
1 changed files with 18 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
index.html
View File

@ -64,6 +64,7 @@
.face-orange { background: #f97316; } .face-orange { background: #f97316; }
.face-blue { background: #3b82f6; } .face-blue { background: #3b82f6; }
.face-green { background: #22c55e; } .face-green { background: #22c55e; }
.face-black { background: #1a1a1a; }
.face-front { transform: rotateY(0deg) translateZ(48px); } .face-front { transform: rotateY(0deg) translateZ(48px); }
.face-back { transform: rotateY(180deg) translateZ(48px); } .face-back { transform: rotateY(180deg) translateZ(48px); }
@ -332,7 +333,18 @@ let isDragging = false;
let lastMouseX = 0; let lastMouseX = 0;
let lastMouseY = 0; let lastMouseY = 0;
function createCubie(x, y, z) { function getCubieColors(x, y, z) {
const colors = {};
if (z === 1) colors.front = COLORS.RED;
if (z === -1) colors.back = COLORS.ORANGE;
if (x === 1) colors.right = COLORS.BLUE;
if (x === -1) colors.left = COLORS.GREEN;
if (y === 1) colors.top = COLORS.WHITE;
if (y === -1) colors.bottom = COLORS.YELLOW;
return colors;
}
function createCubie(x, y, z, colors) {
const cubie = document.createElement('div'); const cubie = document.createElement('div');
cubie.className = 'cubie'; cubie.className = 'cubie';
cubie.dataset.x = x; cubie.dataset.x = x;
@ -341,7 +353,8 @@ function createCubie(x, y, z) {
FACES.forEach(face => { FACES.forEach(face => {
const faceEl = document.createElement('div'); const faceEl = document.createElement('div');
faceEl.className = `face face-${face} face-${FACE_COLORS[face]}`; const colorName = colors[face] || 'black';
faceEl.className = `face face-${face} face-${colorName}`;
if (face === 'front') faceEl.style.transform = 'rotateY(0deg) translateZ(48px)'; if (face === 'front') faceEl.style.transform = 'rotateY(0deg) translateZ(48px)';
if (face === 'back') faceEl.style.transform = 'rotateY(180deg) translateZ(48px)'; if (face === 'back') faceEl.style.transform = 'rotateY(180deg) translateZ(48px)';
if (face === 'right') faceEl.style.transform = 'rotateY(90deg) translateZ(48px)'; if (face === 'right') faceEl.style.transform = 'rotateY(90deg) translateZ(48px)';
@ -372,11 +385,12 @@ function initCube() {
for (let y = -1; y <= 1; y++) { for (let y = -1; y <= 1; y++) {
cube[x + 1][y + 1] = []; cube[x + 1][y + 1] = [];
for (let z = -1; z <= 1; z++) { for (let z = -1; z <= 1; z++) {
const cubie = createCubie(x, y, z); const colors = getCubieColors(x, y, z);
const cubie = createCubie(x, y, z, colors);
cube[x + 1][y + 1][z + 1] = { cube[x + 1][y + 1][z + 1] = {
element: cubie, element: cubie,
x, y, z, x, y, z,
colors: { ...FACE_COLORS } colors: { ...colors }
}; };
cubeEl.appendChild(cubie); cubeEl.appendChild(cubie);
} }