a simple 3d cube spinning all the x y and z axis direction of spin can be changed according to 4 buttons that control it's game

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

No:41456

←

Prev Next

→

a simple 3d cube spinning all the x y and z axis d..ALL
Developer User18554｜Date and time 24/2/7 14:20:40
Build time 12.116 sec｜Game capacity 3.294KB｜

Script

Sure, here's a simple game that allows you to control the spinning direction of a 3D cube using four buttons. The rotation axis (x, y, or z) and the direction (clockwise or counterclockwise) can be changed dynamically. The game is implemented as a single HTML file with JavaScript enclosed in script tags. You can play it on a smartphone.

To play the game, simply copy the code into an HTML file and open it in a web browser on your smartphone. The cube will start spinning automatically, and you can use the buttons to change the rotation axis and direction. Enjoy!

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

```html
<!DOCTYPE html>
<html>
  <head>
    <style>
      #game-container {
        width: 300px;
        height: 300px;
        perspective: 800px;
        margin: 0 auto;
      }

#game-cube {
        position: relative;
        width: 100%;
        height: 100%;
        transform-style: preserve-3d;
        animation: spin 5s infinite linear;
      }

.face {
        position: absolute;
        width: 298px;
        height: 298px;
        border: 1px solid black;
        background-color: rgba(255, 255, 255, 0.8);
      }

.front { transform: translateZ(150px); }
      .back { transform: rotateY(180deg) translateZ(150px); }
      .left { transform: rotateY(-90deg) translateZ(150px); }
      .right { transform: rotateY(90deg) translateZ(150px); }
      .top { transform: rotateX(90deg) translateZ(150px); }
      .bottom { transform: rotateX(-90deg) translateZ(150px); }

@keyframes spin {
        from { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
        to { transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); }
      }
    </style>
  </head>
  <body>
    <div id="game-container">
      <div id="game-cube">
        <div class="face front"></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>
    <div>
      <button onclick="changeRotationAxis('x')">Rotate X</button>
      <button onclick="changeRotationAxis('y')">Rotate Y</button>
      <button onclick="changeRotationAxis('z')">Rotate Z</button>
      <button onclick="changeRotationDirection()">Change Direction</button>
    </div>

function changeRotationAxis(axis) {
        rotationAxis = axis;
      }

function changeRotationDirection() {
        clockwise = !clockwise;
      }

function updateCubeRotation() {
        const cube = document.getElementById('game-cube');
        clearInterval(cube.rotationInterval);

cube.rotationInterval = setInterval(function () {
          let transform;

switch (rotationAxis) {
            case 'x':
              transform = `rotateX(${clockwise ? '+' : '-'}=1deg)`;
              break;
            case 'y':
              transform = `rotateY(${clockwise ? '+' : '-'}=1deg)`;
              break;
            case 'z':
              transform = `rotateZ(${clockwise ? '+' : '-'}=1deg)`;
              break;
          }

cube.style.transform = cube.style.webkitTransform = transform;
        }, 10);
      }

updateCubeRotation();
    </script>
  </body>
</html>
```