Fassa linha formarem um. Cubo. 3D. Girando's game

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

No:38564

←

Prev Next

→

Fassa linha formarem um. Cubo. 3D. Girando
Developer User16419｜Date and time 24/1/25 1:42:42
Build time 19.689 sec｜Game capacity 3.831KB｜

Script

Aqui está uma implementação simples de um jogo em HTML usando JavaScript, onde você pode girar um cubo 3D na tela do seu smartphone. Lembre-se de salvar o código abaixo em um único arquivo HTML:

Lembre-se de substituir os URLs no CSS pelas imagens reais que você deseja usar para cada face do cubo. Certifique-se de ter as imagens necessárias disponíveis online e atualize os URLs de acordo. Espero que isso atenda às suas necessidades! Divirta-se jogando o jogo do cubo 3D no seu smartphone!

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <style>
      #container {
        width: 200px;
        height: 200px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        perspective: 800px;
      }
      #cube {
        width: 100%;
        height: 100%;
        transform-style: preserve-3d;
        transform: rotateX(0deg) rotateY(0deg);
        animation: rotation 10s infinite linear;
      }
      .face {
        width: 200px;
        height: 200px;
        position: absolute;
        border: 1px solid black;
        box-sizing: border-box;
        opacity: 0.7;
      }
      .front {
        background: url(https://example.com/front.png) center center no-repeat;
        transform: translateZ(100px);
      }
      .back {
        background: url(https://example.com/back.png) center center no-repeat;
        transform: rotateY(180deg) translateZ(100px);
      }
      .left {
        background: url(https://example.com/left.png) center center no-repeat;
        transform: rotateY(-90deg) translateZ(100px);
      }
      .right {
        background: url(https://example.com/right.png) center center no-repeat;
        transform: rotateY(90deg) translateZ(100px);
      }
      .top {
        background: url(https://example.com/top.png) center center no-repeat;
        transform: rotateX(90deg) translateZ(100px);
      }
      .bottom {
        background: url(https://example.com/bottom.png) center center no-repeat;
        transform: rotateX(-90deg) translateZ(100px);
      }
      @keyframes rotation {
        from { transform: rotateX(0deg) rotateY(0deg); }
        to { transform: rotateX(360deg) rotateY(360deg); }
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div id="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>
    <script>
      // Fazendo o cubo girar ao tocar na tela
      document.addEventListener('touchstart', handleTouchStart, false);
      document.addEventListener('touchmove', handleTouchMove, false);

var xDown = null;
      var yDown = null;

function handleTouchStart(event) {
        xDown = event.touches[0].clientX;
        yDown = event.touches[0].clientY;
      }

function handleTouchMove(event) {
        if (!xDown || !yDown) {
          return;
        }

var xUp = event.touches[0].clientX;
        var yUp = event.touches[0].clientY;

var xDiff = xDown - xUp;
        var yDiff = yDown - yUp;

if (Math.abs(xDiff) > Math.abs(yDiff)) {
          if (xDiff > 0) {
            document.getElementById("cube").style.transform += " rotateY(-90deg)";
          } else {
            document.getElementById("cube").style.transform += " rotateY(90deg)";
          }
        } else {
          if (yDiff > 0) {
            document.getElementById("cube").style.transform += " rotateX(90deg)";
          } else {
            document.getElementById("cube").style.transform += " rotateX(-90deg)";
          }
        }

xDown = null;
        yDown = null;
      }
    </script>
  </body>
</html>
```

Lembre-se de substituir os URLs no CSS pelas imagens reais que você deseja usar para cada face do cubo. Certifique-se de ter as imagens necessárias disponíveis online e atualize os URLs de acordo.

Espero que isso atenda às suas necessidades! Divirta-se jogando o jogo do cubo 3D no seu smartphone!