v4: исправлены цвета кубиков - каждый получает правильные грани
This commit is contained in:
parent
2747d6173a
commit
8afae1cff1
22
index.html
22
index.html
@ -64,6 +64,7 @@
|
||||
.face-orange { background: #f97316; }
|
||||
.face-blue { background: #3b82f6; }
|
||||
.face-green { background: #22c55e; }
|
||||
.face-black { background: #1a1a1a; }
|
||||
|
||||
.face-front { transform: rotateY(0deg) translateZ(48px); }
|
||||
.face-back { transform: rotateY(180deg) translateZ(48px); }
|
||||
@ -332,7 +333,18 @@ let isDragging = false;
|
||||
let lastMouseX = 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');
|
||||
cubie.className = 'cubie';
|
||||
cubie.dataset.x = x;
|
||||
@ -341,7 +353,8 @@ function createCubie(x, y, z) {
|
||||
|
||||
FACES.forEach(face => {
|
||||
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 === 'back') faceEl.style.transform = 'rotateY(180deg) 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++) {
|
||||
cube[x + 1][y + 1] = [];
|
||||
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] = {
|
||||
element: cubie,
|
||||
x, y, z,
|
||||
colors: { ...FACE_COLORS }
|
||||
colors: { ...colors }
|
||||
};
|
||||
cubeEl.appendChild(cubie);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user