A 3d cube the can be rotated in its position with arrows in a 3d space's game

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

No:46728

←

Prev Next

→

A 3d cube the can be rotated in its position with ..ALL
Developer User20131｜Date and time 24/2/25 21:31:19
Build time 11.675 sec｜Game capacity 3.299KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
  <head>
    <style>
      canvas {
        width: 100%;
        height: 100vh;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas"></canvas>

const cubeSize = 5;
      let angleX = 0;
      let angleY = 0;

const cubeVertices = [
        [-cubeSize, -cubeSize, -cubeSize],
        [cubeSize, -cubeSize, -cubeSize],
        [cubeSize, cubeSize, -cubeSize],
        [-cubeSize, cubeSize, -cubeSize],
        [-cubeSize, -cubeSize, cubeSize],
        [cubeSize, -cubeSize, cubeSize],
        [cubeSize, cubeSize, cubeSize],
        [-cubeSize, cubeSize, cubeSize]
      ];

function drawCube() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

ctx.beginPath();
        ctx.moveTo(cubeVertices[0][0], cubeVertices[0][1]);
        ctx.lineTo(cubeVertices[1][0], cubeVertices[1][1]);
        ctx.lineTo(cubeVertices[2][0], cubeVertices[2][1]);
        ctx.lineTo(cubeVertices[3][0], cubeVertices[3][1]);
        ctx.lineTo(cubeVertices[0][0], cubeVertices[0][1]);
        ctx.stroke();

ctx.moveTo(cubeVertices[4][0], cubeVertices[4][1]);
        ctx.lineTo(cubeVertices[5][0], cubeVertices[5][1]);
        ctx.lineTo(cubeVertices[6][0], cubeVertices[6][1]);
        ctx.lineTo(cubeVertices[7][0], cubeVertices[7][1]);
        ctx.lineTo(cubeVertices[4][0], cubeVertices[4][1]);
        ctx.stroke();

ctx.moveTo(cubeVertices[0][0], cubeVertices[0][1]);
        ctx.lineTo(cubeVertices[4][0], cubeVertices[4][1]);
        ctx.stroke();

ctx.moveTo(cubeVertices[1][0], cubeVertices[1][1]);
        ctx.lineTo(cubeVertices[5][0], cubeVertices[5][1]);
        ctx.stroke();

ctx.moveTo(cubeVertices[2][0], cubeVertices[2][1]);
        ctx.lineTo(cubeVertices[6][0], cubeVertices[6][1]);
        ctx.stroke();

ctx.moveTo(cubeVertices[3][0], cubeVertices[3][1]);
        ctx.lineTo(cubeVertices[7][0], cubeVertices[7][1]);
        ctx.stroke();
      }

function rotateCube() {
        const cosX = Math.cos(angleX);
        const sinX = Math.sin(angleX);
        const cosY = Math.cos(angleY);
        const sinY = Math.sin(angleY);

for (let i = 0; i < cubeVertices.length; i++) {
          const x = cubeVertices[i][0];
          const y = cubeVertices[i][1];
          const z = cubeVertices[i][2];

cubeVertices[i][0] = x * cosY + z * sinY;
          cubeVertices[i][2] = z * cosY - x * sinY;
          cubeVertices[i][1] = y * cosX - cubeVertices[i][2] * sinX;
          cubeVertices[i][2] = cubeVertices[i][2] * cosX + y * sinX;
        }

drawCube();
      }

document.addEventListener('keydown', function(e) {
        switch (e.key) {
          case 'ArrowLeft':
            angleY -= 0.1;
            break;
          case 'ArrowRight':
            angleY += 0.1;
            break;
          case 'ArrowUp':
            angleX += 0.1;
            break;
          case 'ArrowDown':
            angleX -= 0.1;
            break;
        }

rotateCube();
      });

drawCube();
    </script>
  </body>
</html>