Click here for free DL of the app version that can save data.

No:23636

Simulador de un cubo de rubik
Developer User11063｜Date and time 23/11/2 8:48:26
Build time 60.315 sec｜Game capacity 2.986KB｜

Script

Simulador de Cubo de Rubik

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
  <title>Simulador Cubo de Rubik</title>
  <style>
    #rubiks-cube {
      width: 300px;
      height: 300px;
      perspective: 1200px;
      margin: 50px auto;
    }

#cube {
      width: 100%;
      height: 100%;
      transform-style: preserve-3d;
      transition: transform 0.5s ease-in-out;
    }

.face {
      position: absolute;
      width: 300px;
      height: 300px;
      opacity: 0.8;
      box-sizing: border-box;
      border: 1px solid #000;
    }

.face.front {
      background-color: #ff0000;
      transform: translateZ(150px);
      display: flex;
      flex-wrap: wrap;
    }

.face.back {
      background-color: #ffa500;
      transform: rotateY(180deg);
    }

.face.left {
      background-color: #00ff00;
      transform: rotateY(-90deg) translateZ(150px);
    }

.face.right {
      background-color: #ffff00;
      transform: rotateY(90deg) translateZ(150px);
    }

.face.top {
      background-color: #0000ff;
      transform: rotateX(90deg) translateZ(150px);
    }

.face.bottom {
      background-color: #ffffff;
      transform: rotateX(-90deg) translateZ(150px);
    }

.cell {
      width: 30%;
      height: 30%;
      background-color: #000;
      margin: 5%;
    }
  </style>
</head>
<body>
  <h1>Simulador de Cubo de Rubik</h1>
  <div id="rubiks-cube">
    <div id="cube">
      <div class="face front">
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
      </div>
      <div class="face back"></div>
      <div class="face left"></div>
      <div class="face right"></div>
      <div class="face top"></div>
      <div class="face bottom"></div>
    </div>
  </div>

function rotateCube(axis, direction) {
      if (isRotating) return;
      isRotating = true;

cube.style.transform += rotateStyle;
      setTimeout(() => {
        isRotating = false;
      }, 500);
    }

document.addEventListener('keydown', (event) => {
      switch (event.key) {
        case 'ArrowUp':
          rotateCube('x', 1);
          break;
        case 'ArrowDown':
          rotateCube('x', -1);
          break;
        case 'ArrowLeft':
          rotateCube('y', -1);
          break;
        case 'ArrowRight':
          rotateCube('y', 1);
          break;
      }
    });
  </script>
</body>
</html>