A 3d cube the can be rotated in its position with arrows in a 3d space And x and y cordinates in a 3d space's game

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

No:46730

←

Prev Next

→

A 3d cube the can be rotated in its position with ..ALL
Developer User20131｜Date and time 24/2/25 21:33:48
Build time 8.301 sec｜Game capacity 2.044KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Cubo 3D Rotante</title>
    <style>
        canvas {
            display: block;
            margin: 0 auto;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas" width="400" height="400"></canvas>

let angleX = 0;
        let angleY = 0;

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

// Front face
            ctx.beginPath();
            ctx.moveTo(x, y);
            ctx.lineTo(x + 50, y);
            ctx.lineTo(x + 50, y + 50);
            ctx.lineTo(x, y + 50);
            ctx.closePath();
            ctx.stroke();

// Back face
            ctx.beginPath();
            ctx.moveTo(x + z, y + z);
            ctx.lineTo(x + z + 50, y + z);
            ctx.lineTo(x + z + 50, y + z + 50);
            ctx.lineTo(x + z, y + z + 50);
            ctx.closePath();
            ctx.stroke();

// Connecting lines
            ctx.beginPath();
            ctx.moveTo(x, y);
            ctx.lineTo(x + z, y + z);
            ctx.stroke();

ctx.beginPath();
            ctx.moveTo(x + 50, y);
            ctx.lineTo(x + 50 + z, y + z);
            ctx.stroke();

ctx.beginPath();
            ctx.moveTo(x + 50, y + 50);
            ctx.lineTo(x + 50 + z, y + 50 + z);
            ctx.stroke();

ctx.beginPath();
            ctx.moveTo(x, y + 50);
            ctx.lineTo(x + z, y + z + 50);
            ctx.stroke();
        }

function animate() {
            requestAnimationFrame(animate);

angleX += 1;
            angleY += 1;

const x = 150 + 100 * Math.cos(angleX * Math.PI / 180);
            const y = 150 + 100 * Math.sin(angleY * Math.PI / 180);
            const z = 50;

drawCube(x, y, z);
        }

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