AI game creator

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

No:46690

←

Prev Next

→

Fai un cubo 3d
Developer User20131｜Date and time 24/2/25 20:02:55
Build time 8.654 sec｜Game capacity 1.952KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cubo 3D Game</title>
<style>
  #cubeContainer {
    perspective: 1000px;
  }
  .cube {
    position: relative;
    width: 100px;
    height: 100px;
    transform-style: preserve-3d;
    transition: transform 1s;
  }
  .face {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: red;
    border: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
  }
  .front { transform: translateZ(50px); }
  .back { transform: rotateY(180deg) translateZ(50px); }
  .left { transform: rotateY(-90deg) translateZ(50px); }
  .right { transform: rotateY(90deg) translateZ(50px); }
  .top { transform: rotateX(-90deg) translateZ(50px); }
  .bottom { transform: rotateX(90deg) translateZ(50px); }
</style>
</head>
<body>
<div id="cubeContainer">
    <div class="cube">
        <div class="face front">1</div>
        <div class="face back">2</div>
        <div class="face left">3</div>
        <div class="face right">4</div>
        <div class="face top">5</div>
        <div class="face bottom">6</div>
    </div>
</div>

let angleX = 0;
  let angleY = 0;

function updateCube() {
    cube.style.transform = `rotateX(${angleX}deg) rotateY(${angleY}deg)`;
  }

document.addEventListener('keydown', function(e) {
    switch(e.key) {
      case 'ArrowUp':
        angleX -= 90;
        break;
      case 'ArrowDown':
        angleX += 90;
        break;
      case 'ArrowLeft':
        angleY -= 90;
        break;
      case 'ArrowRight':
        angleY += 90;
        break;
      default:
        return;
    }
    updateCube();
  });
};
</script>
</body>
</html>